histogram-canvas

histogram-canvas

Install

yarn add histogram-canvas

or

npm i --save histogram-canvas

Usage

Import it:

const HistogramCanvas = require('histogram-canvas')

or include the standalone file, which is attached on each release or found in the dist folder when downloaded from the npm registry:

<script src="path/to/histogram-canvas.min.js"></script>

The constructor takes a Canvas and an optional options object:

let histogram = new HistogramCanvas(canvas, options)

Methods

update(data, dontClear)

• data Object
  Object with properties red, green, and blue, each arrays of numbers, representing the heights of the histogram bars. Arrays can be any length.

• dontClear Boolean (false)
  If true, the canvas will be cleared.

Options

Can be passed in constructor options object and are available as properties on the instance.

Default values are in parentheses.

• red Boolean (true)
  Whether or not to draw red graph.

• green Boolean (true)
  Whether or not to draw green graph.

• blue Boolean (true)
  Whether or not to draw blue graph.

• redColor String ('#FF0000')
  Color for drawing red data

• greenColor String ('#00FF00)
  Color for drawing green data

• blueColor String ('#0000FF')
  Color for drawing blue data

• compositeOperation String ('screen')
  See options here

The following are for drawing the histogram at a specific location in the canvas. By default the histogram will fill the canvas.

• x Number (0)
  X coordinate of left side of histogram

• y Number (canvas.height)
  Y coordinate of bottom of histogram

• width Number (canvas.width)
  Width of histogram

• height Number (canvas.height)
  Height of histogram

License

MIT © Stephen Tuso