Hi I want to add a horizontal line to my Barchart. This is the Code of my chart:

var singleBarOptions = {
    scaleBeginAtZero: true,
    scaleShowGridLines: true,
    scaleGridLineColor: "rgba(0,0,0,.05)",
    scaleGridLineWidth: 1,
    barShowStroke: true,
    barStrokeWidth: 1,
    barValueSpacing: 5,
    barDatasetSpacing: 1,
    responsive: true
};

var singleBarData = {
    labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],

    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(0,191,255,0.5)",
            strokeColor: "rgba(0,191,255,0.8)",
            highlightFill: "rgba(100,149,237,0.75)",
            highlightStroke: "rgba(100,149,237,1)",
            data: [60, 50, 40, 30, 20, 10, 20]
        }
    ]
};
var ctx = document.getElementById("singleBarOptions").getContext("2d");
var myNewChart = new Chart(ctx).Bar(singleBarData, singleBarOptions);

Is there an easy way to draw this line? It would also be nice if I could change the position of the line later on.

There are solutions here on stackoverflow, but they don't deal with settings.

Hi I want to add a horizontal line to my Barchart. This is the Code of my chart:

var singleBarOptions = {
    scaleBeginAtZero: true,
    scaleShowGridLines: true,
    scaleGridLineColor: "rgba(0,0,0,.05)",
    scaleGridLineWidth: 1,
    barShowStroke: true,
    barStrokeWidth: 1,
    barValueSpacing: 5,
    barDatasetSpacing: 1,
    responsive: true
};

var singleBarData = {
    labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],

    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(0,191,255,0.5)",
            strokeColor: "rgba(0,191,255,0.8)",
            highlightFill: "rgba(100,149,237,0.75)",
            highlightStroke: "rgba(100,149,237,1)",
            data: [60, 50, 40, 30, 20, 10, 20]
        }
    ]
};
var ctx = document.getElementById("singleBarOptions").getContext("2d");
var myNewChart = new Chart(ctx).Bar(singleBarData, singleBarOptions);

Is there an easy way to draw this line? It would also be nice if I could change the position of the line later on.

There are solutions here on stackoverflow, but they don't deal with settings.

• javascript
• bar-chart
• chart.js

Share Improve this question Follow edited Oct 21, 2016 at 13:01 B5-NDDT asked Oct 19, 2016 at 8:33 B5-NDDTB5-NDDT 18711 gold badge33 silver badges1616 bronze badges 4

• Can you please put this in a fiddle and share the link?, – David R Commented Oct 19, 2016 at 8:36
• Possible duplicate of Chart.js - draw horizontal line – tektiv Commented Oct 20, 2016 at 9:32
• its not a duplicate, they only have a dataset. I don't know how to add my settings to their code. – B5-NDDT Commented Oct 21, 2016 at 13:00
• please create fiddle of the code u tried – Ashish Patel Commented Oct 21, 2016 at 13:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Yes, use the Annotations plugin:Chart.Annotation.js

annotation: {
    annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: '26',
        borderColor: 'tomato',
        borderWidth: 1
    }],
    drawTime: "afterDraw" // (default)
}

Result:

Codepen: Chart.js Annotations BarChart

Note: I am using V 2.2.1, your syntax is I believe from a previous version, so I am only using your Data and some options.