{"id":23053575,"url":"https://github.com/component/histogram","last_synced_at":"2026-03-07T06:32:33.351Z","repository":{"id":6141037,"uuid":"7369844","full_name":"component/histogram","owner":"component","description":"Create JavaScript image histograms with Canvas","archived":false,"fork":false,"pushed_at":"2013-08-21T17:33:19.000Z","size":4168,"stargazers_count":45,"open_issues_count":2,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-10-05T23:39:22.126Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://component.github.com/histogram/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/component.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-12-29T19:52:06.000Z","updated_at":"2023-09-04T19:49:57.000Z","dependencies_parsed_at":"2022-09-14T18:51:07.890Z","dependency_job_id":null,"html_url":"https://github.com/component/histogram","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/component/histogram","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Fhistogram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Fhistogram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Fhistogram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Fhistogram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/component","download_url":"https://codeload.github.com/component/histogram/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Fhistogram/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30209086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T05:23:27.321Z","status":"ssl_error","status_checked_at":"2026-03-07T05:00:17.256Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-16T00:18:41.170Z","updated_at":"2026-03-07T06:32:33.318Z","avatar_url":"https://github.com/component.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# histogram\n\n  JavaScript image histograms with Canvas.\n\n  ![js histogram](http://cdn.dropmark.com/41933/195c6ba28e2bd32341350d1acb5a50d9b4b66b4d/main.png)\n\n## Installation\n\n    $ component install component/histogram\n\n  Or use without component:\n\n    $ component build --standalone histogram\n\n## Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eHistogram\u003c/title\u003e\n  \u003cstyle\u003e\n    .histogram {\n      background: #1a1a1a;\n    }\n    .histogram .channel {\n      opacity: .4;\n    }\n    .histogram .red {\n      color: #dc1e1a;\n    }\n    .histogram .green {\n      color: #12b81c;\n    }\n    .histogram .blue {\n      color: #46a3d6;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ccanvas width=200 height=120\u003e\u003c/canvas\u003e\n  \u003cscript src=\"build/build.js\"\u003e\u003c/script\u003e\n\n  \u003cscript\u003e\n    var histogram = require('histogram');\n    var canvas = document.querySelector('canvas');\n\n    var img = document.createElement('img');\n    img.src = 'your img here';\n\n    histogram(img)\n      .smooth(12)\n      .draw(canvas);\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Styling\n\n  By default the histogram will be completely black,\n  for example the following has only an opacity applied:\n\n  ![](http://cdn.dropmark.com/41933/4819d5cb323f839807bf2023969c5db875fecf9d/default-coloring.png)\n\n  Using CSS you can style the canvas histogram however you like,\n  for example the following CSS:\n\n```css\n.histogram .channel {\n  opacity: .4;\n}\n.histogram .red {\n  color: #dc1e1a;\n}\n.histogram .green {\n  color: #12b81c;\n}\n.histogram .blue {\n  color: #46a3d6;\n}\n```\n\n yields:\n\n   ![](http://cdn.dropmark.com/41933/3232b5147111926d36e24270de1d441d43be6317/white.png)\n\n For the dark theme used in the first image on this page use:\n\n```css\n.histogram {\n  background: #1a1a1a;\n}\n.histogram .channel {\n  opacity: .4;\n}\n.histogram .red {\n  color: #dc1e1a;\n}\n.histogram .green {\n  color: #12b81c;\n}\n.histogram .blue {\n  color: #46a3d6;\n}\n```\n\n## Scaling\n\n  The histogram's size will adjust to fit the canvas size, so use whatever dimensions you prefer:\n\n  ![](http://cdn.dropmark.com/41933/1ebf9734bf5c09e8d4b986c0eca108fe47fee459/scaled.png)\n\n## API\n\n### .smooth([n])\n\n  By default no smoothing is applied:\n\n  ![no smoothing](http://cdn.dropmark.com/41933/24c9e31a80bc86ede792aaf1dbf3d144d4e30e60/no-smooth.png)\n\n  When invoked without arguments (`.smooth()`) the\n  default kernel of `6` is used:\n\n  ![smoothing enabled](http://cdn.dropmark.com/41933/e4c31627d241db0b21e010eb72cdd853e4c9457d/smooth-default-6.png)\n\n  You may also pass any kernel size you wish, here is `20` for\n  example:\n\n  ![larger kernel](http://cdn.dropmark.com/41933/6631116b859dc420ef3c532f241e1d77af8ddb3f/smooth-20.png)\n\n## License\n\n  MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent%2Fhistogram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomponent%2Fhistogram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent%2Fhistogram/lists"}