JESTech JESTech - 4 months ago 52
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

Answer

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: [{
    type:'line',
    mode:'horizontal',
    scaleID:'y-axis-1',
    value:'10',
    borderColor:'#000000',
    borderWidth:2
}]
}

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