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:

import React , { Component } from " react " ; import { Line } from " react-chartjs-2 " ; import " chartjs-plugin-lineheight-annotation " ; class App extends Component { render ( ) { let data = api . get ( " line-data " ) ; return ( < Line options = { { lineHeightAnnotation : { color : " #000 " , shadow : true } } } data = { data } / > ) ; } }

and that's it!

Options

lineHeightAnnotation : { always : true , hover : false , color : ' #000 ' , yAxis : ' y-axis-0 ' , lineWeight : 1 . 5 , shadow : { color : ' rgba(0,0,0,0.35) ' , blur : 10 , offset : { x : 0 , y : 3 } } , noDash : true , }

Always on: