Question: I would like to draw a horizontal line in a chart using [Chart.js](http://www.chartjs.org/). But I'm not able to do it.

I've read this question - [Chart.js — drawing an arbitrary vertical line](https://stackoverflow.com/questions/30256695/chart-js-drawing-an-arbitrary-vertical-line?rq=1) - but I can't transform the code for drawing **horizontal lines** not vertical.

I hope you can help me (especially potatopeelings :)).

Answer: 
Here is the JavaScript code to draw a horizontal line.

```
var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
    },
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale
        console.log(this);

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(scale.startPoint+12, point.y);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(this.chart.width, point.y);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

```

<http://jsfiddle.net/7a4hhzge/455/>

This is based off of [the code used to draw an arbitrary vertical line](https://stackoverflow.com/questions/30256695/chart-js-drawing-an-arbitrary-vertical-line?rq=1), it may not be perfect but you should be able to adjust it to fit your needs.
Without any additional code, I managed to draw a line by adding a new entry as a dataset with these options :

Just replace with the size of your dataset, and with the value that the line represents.

```
{
  data: Array.apply(null, new Array(<length>)).map(Number.prototype.valueOf, <value>),
  fill: false,
  radius: 0,
  backgroundColor: "rgba(0,0,0,0.1)"
}

```

The radius of 0 will somehow hide the dots and the fill: false will make it appear as a line.