Chart JS Line Height Annotation Plugin
A small, lightweight and reliable ChartJS plugin for Line charts specifically. This plugin was made to be compatible with the react-chartjs-2
library, but it is available as a commonjs and umd module, as well.
The lines always go to the top of the data point, but you can choose if they're always on or when user hovers. On hover: The line will draw to the tallest data point near the user's hover position.
Usage
npm i chartjs-plugin-lineheight-annotation
For React components:
;;; { let data = api; return <Line options= // see all defaults / options below! lineHeightAnnotation: color: "#000" shadow: true data=data /> ; }
and that's it!
Options
/// default valueslineHeightAnnotation: // defaults to have line to the highest data point on every tick always: true // optionally, only have line draw to the highest datapoint nearest the user's hover position hover: false // colors of the line color: '#000' // name of yAxis yAxis: 'y-axis-0' // weight of the line lineWeight: 15 /// sets shadow for ALL lines on the canvas shadow: // color of the shadow color: 'rgba(0,0,0,0.35)' // blur of the shadow blur: 10 /// shadow offset offset: // x offset x: 0 // y offset y: 3 // dash defaults at [10, 10] noDash: true