# histogram
**Repository Path**: mirrors_component/histogram
## Basic Information
- **Project Name**: histogram
- **Description**: Create JavaScript image histograms with Canvas
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-05-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# histogram
JavaScript image histograms with Canvas.
## Installation
$ component install component/histogram
Or use without component:
$ component build --standalone histogram
## Example
```html
Histogram
```
## 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:
```css
.histogram .channel {
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:
```css
.histogram {
background: #1a1a1a;
}
.histogram .channel {
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:
When invoked without arguments (`.smooth()`) the
default kernel of `6` is used:
You may also pass any kernel size you wish, here is `20` for
example:
## License
MIT