Chart.js 2.1.6: Drawing horizontal Limit Lines?

Question

I need to draw horizontal limit lines for my line and my combined (bar and line) charts. There was a solution for Chart.js < 2.0 like shown here:

draw horizontal line

but this solution is no longer working with chart.js > 2.0:

jquery.1.12.1.js:9743 Uncaught TypeError: Cannot read property 'extend' of undefined

So how am i supposed to draw limit lines in Chart.js 2.1.6?

score 3 · Accepted Answer · answered Aug 08 '16 at 11:02

Add the Chart.Annotation.js to your project and do:

annotation: {
    annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: '25',
        borderColor: 'red',
        borderWidth: 2
    }]
}

in the options

rejo · Answer 2 · 2016-08-07T12:46:53.720

0

You can draw horizontal and vertical line in chart.js , Try this , ywhich is using Chart.js Version: 2.2.1

http://plnkr.co/edit/8HJtZ7WKmTEy2gGuOT0v?p=preview

thanks to this fiddle ,I Updated it with latest version of chart.js and do changes on that.

edited Aug 07 '16 at 12:46

answered Aug 07 '16 at 12:38

rejo

3,352
5
27
34

With your solution: How would it be possible to let the horizontal line start at a defined y-Value? And how would it be possible to create multiple limit lines? Because that is exactly the purpose of a limit line in charts. – Mulgard Aug 07 '16 at 15:24

score 0 · Answer 3 · answered Dec 06 '19 at 12:13

For anyone interested in drawing multiple limit lines (e.g. one limit for each data point), I found an easy approach was to simply create a mixed chart, with a line-series representing your limit points. Once you have this, you can use the following options to turn the line points into flat lines, and hide the overall line:

pointStyle: 'line', radius: 20, fill: false, showLine: false,

Chart.js 2.1.6: Drawing horizontal Limit Lines?

3 Answers3