You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

canvas-bullet-chart

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

canvas-bullet-chart

Render a simple bullet chart on a canvas

1.1.4
latest
Source
npmnpm
Version published
Weekly downloads
1
-50%
Maintainers
1
Weekly downloads
 
Created
Source

Canvas Bullet Chart

How to use

  • import bulletChart from 'canvas-bullet-chart'
  • Call bulletChart(canvas, options).

Or:

  • import { bulletChartImage } from 'canvas-bullet-chart;
  • Call bulletChartImage(options)

Function parameters

canvas

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

options

Object containing the desired options and values.

Allowed options

NameTypeDescriptionDefault
borderFillString / ObjectFill options for the border. Object format explained here#808080
fontSizeNumberFont size for the labels.12
heightDecreaseNumberRate at which successive bars decrease in height.Here
scaleNumberMaximum expected value.1
scalePaddingNumberSpace between the labels and the bullet chart.7
valuesArrayExplained here.[]
withBorderBooleanShould a border be drawn around each boxfalse
scaleColorStringFont color for scale#000
widthNumberWidth of the desired image. Note: for bulletChartImage only1280
heightNumberHeight of the desired image. Note: for bulletChartImage only720

Values

Object containing the values to render.

NameTypeDescriptionDefault
fillColorStringSolid color to fill the bar (e.g.: #f00). Ignored if gradientOptions provided.#000
gradientOptionsObjectAn object with the options for the gradients, explained here.{}
nameStringAt the time, not in use.undefined
valueNumberShould be less than the scale and greater than zero.0

Gradient Options

Object containing the desired gradient options.

NameTypeDescriptionDefault
endColorStringFinal gradient color (e.g.: #0f0).#fff
endStopNumberInitial position for the gradient in the [(x0,y0), (x1,y1)] diagonal.1
startColorStringInitial gradient color (e.g.: #f00).#000
startStopNumberInitial position for the gradient in the [(x0,y0), (x1,y1)] diagonal0
x0NumberInitial horizontal position for the gradient0
x1NumberFinal horizontal position for the gradient.<canvas> width
y0NumberInitial vertical position for the gradient0
y1NumberFinal vertical position for the gradient.<canvas> height

Height decrease calculation.

If no heightDecrease value is provided, it's calculated as: (<canvas height> - <fontSize> - <scalePadding>) / <values array length>

Keywords

canvas

FAQs

Package last updated on 22 Oct 2019

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