JESTech JESTech - 7 months ago 123
jQuery Question

Plugin for custom horizontal line Y-axis marker on grid of a Line chart with Chart.js

I need to create "up" and "low" markers on along the Y-axis of my Chart.js line chart. I can't seem to find an out-of-the-box way of doing this. Anybody can help me on how to write a plugin to achieve something like this? (See the horizontal red lines along the 70 and 50 Y-axis.
enter image description here


I found a plugin called Chart.Annotations.js on the Chart.js GitHub root page. It is exactly what I needed!

You need to add the following attributes to your options object. Add an annotations: attribute per line you want to draw. In my case I had 2.

annotation: {
annotations: [{

Look at this screenshot of my final implementation: enter image description here