Canvas-bullet-chart NPM

Canvas Bullet Chart

Or: 1. import { bulletChartImage } from 'canvas-bullet-chart; 2. Call bulletChartImage(options)

It may be either a <canvas> element or an element id.

Object containing the desired options and values.

Name	Type	Description	Default
borderFill	String / Object	Fill options for the border. Object format explained here	`#808080`
fontSize	Number	Font size for the labels.	12
heightDecrease	Number	Rate at which successive bars decrease in height.	Here
scale	Number	Maximum expected value.	1
scalePadding	Number	Space between the labels and the bullet chart.	7
values	Array	Explained here.	[]
withBorder	Boolean	Should a border be drawn around each box	`false`
scaleColor	String	Font color for scale	`#000`
width	Number	Width of the desired image. Note: for `bulletChartImage` only	1280
height	Number	Height of the desired image. Note: for `bulletChartImage` only	720

Object containing the values to render.

Name	Type	Description	Default
fillColor	String	Solid color to fill the bar (e.g.: #f00). Ignored if `gradientOptions` provided.	`#000`
gradientOptions	Object	An object with the options for the gradients, explained here.	{}
name	String	At the time, not in use.	undefined
value	Number	Should be less than the scale and greater than zero.	0

Object containing the desired gradient options.

Name	Type	Description	Default
endColor	String	Final gradient color (e.g.: #0f0).	`#fff`
endStop	Number	Initial position for the gradient in the (x0,y0), (x1,y1) diagonal.	1
startColor	String	Initial gradient color (e.g.: #f00).	`#000`
startStop	Number	Initial position for the gradient in the (x0,y0), (x1,y1) diagonal	0
x0	Number	Initial horizontal position for the gradient	0
x1	Number	Final horizontal position for the gradient.	`<canvas>` width
y0	Number	Initial vertical position for the gradient	0
y1	Number	Final vertical position for the gradient.	`<canvas>` height