Latest Socket ResearchMalicious Chrome Extension Performs Hidden Affiliate Hijacking.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

histogram-component

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

histogram-component

Image histograms

npmnpm
Version
0.0.2
Version published
Maintainers
1
Created
Source

histogram

JavaScript image histograms with Canvas.

js histogram

Installation

$ component install component/histogram

Or use without component:

$ component build --standalone histogram

Example

<!DOCTYPE html>
<html>
<head>
  <title>Histogram</title>
  <style>
    .histogram {
      background: #1a1a1a;
      opacity: .4;
    }
    .histogram .red {
      color: #dc1e1a;
    }
    .histogram .green {
      color: #12b81c;
    }
    .histogram .blue {
      color: #46a3d6;
    }
  </style>
</head>
<body>
  <canvas width=200 height=120></canvas>
  <script src="build/build.js"></script>

  <script>
    var histogram = require('histogram');
    var canvas = document.querySelector('canvas');

    var img = document.createElement('img');
    img.src = 'your img here';

    histogram(img)
      .smooth(12)
      .draw(canvas);
  </script>
</body>
</html>

Styling

By default the histogram will be completely black, for example the following has only an opacity applied:

Using CSS you can style the canvas histogram however you like, for example the following CSS:

.histogram {
  opacity: .4;
}
.histogram .red {
  color: #dc1e1a;
}
.histogram .green {
  color: #12b81c;
}
.histogram .blue {
  color: #46a3d6;
}

yields:

For the dark theme used in the first image on this page use:

.histogram {
  background: #1a1a1a;
  opacity: .4;
}
.histogram .red {
  color: #dc1e1a;
}
.histogram .green {
  color: #12b81c;
}
.histogram .blue {
  color: #46a3d6;
}

Scaling

The histogram's size will adjust to fit the canvas size, so use whatever dimensions you prefer:

API

.smooth([n])

By default no smoothing is applied:

no smoothing

When invoked without arguments (.smooth()) the default kernel of 6 is used:

smoothing enabled

You may also pass any kernel size you wish, here is 20 for example:

larger kernel

License

MIT

Keywords

histogram
graph
image
canvas

FAQs

Package last updated on 02 Jan 2013

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Inside Lodash’s Security Reset and Maintenance Reboot

Security News

Inside Lodash’s Security Reset and Maintenance Reboot

Lodash 4.17.23 marks a security reset, with maintainers rebuilding governance and infrastructure to support long-term, sustainable maintenance.

By Sarah Gooding  -  Jan 31, 2026