Chart.js - draw horizontal line

Question

I would like to draw a horizontal line in a chart using Chart.js. But I'm not able to do it.

I've read this question - Chart.js — drawing an arbitrary vertical line - but I can't transform the code for drawing horizontal lines not vertical.

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

Answer 1

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, it may not be perfect but you should be able to adjust it to fit your needs.