Overlay line on chart.js chart

Question

I was wondering if it is possible to overlay a line on a chart.js chart such as a line graph? For example, on the x axis, a horizontal line will be displayed with a value of 20 on the graph

Answer 1

I created something called an overlay chart, which I added to my chart.js fork ( https://github.com/leighquince/Chart.js ), which can be used in this situation. it works in the same way as a linear or histogram, the only difference is that you declare an additional property called type , which can be 'line' or 'bar' . Then just call new Chart(ctx).Overlay(data) .

So, for your example, you can just have your own histogram and then provide a different data set (with some better colors than I used) to show the line.

 var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", //new option, barline will default to bar as that what is used to create the scale type: "line", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(0,0,0,0.6)", pointColor: "rgba(0,0,0,0.6)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", datasetFill:false, data: [20, 20, 20, 20, 20, 20, 20] }, { label: "My First dataset", //new option, barline will default to bar as that what is used to create the scale type: "bar", fillColor: "rgba(220,20,220,0.2)", strokeColor: "rgba(220,20,220,1)", pointColor: "rgba(220,20,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [32, 25, 33, 88, 12, 92, 33] }] }; var ctx = document.getElementById("canvas").getContext("2d"); var chart = new Chart(ctx).Overlay(data, { responsive: false }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script> <canvas id="canvas" width="400"></canvas> 

Answer 2

I need something like this, but instead of a line graph, I needed a real blending line that was flat.

Just expanded the chart as follows:

  Chart.types.Bar.extend({ name: 'BarOverlay', draw: function (ease) { Chart.types.Bar.prototype.draw.apply(this); ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)'; ctx.moveTo(35, this.scale.calculateY(100)); ctx.lineTo(this.scale.calculateX(this.datasets[0].bars.length), this.scale.calculateY(100)); ctx.stroke(); } }); 

The shaft is hardcoded to draw a line at 100 (in this case, when we looked at the target 100%).

And call it that:

 new Chart(ctx).BarOverlay(data, options); 

I also found that the Quince code is outdated and incompatible with the Chart.js 1.0.2 code in some way (rendering went all the way).

Answer 3

The StrangeWill answer was great as a basis, but I need vertical lines with data located on the histogram, so I changed it like this:

First, I added the property to an array of parameters (adding another dataset is probably cleaner, but I would have to tell ChartJS to ignore it), where each parameter is an index of the data value that I want to allocate, something like this:

 ChartDefaults.verticalOverlayAtBar = [itemOne, itemTwo] ... var HistoryChart = new Chart(ctx).BarOverlay(ChartData, ChartDefaults); 

Then I modified the StrangeWill code, expanding it to iterate over the array of elements on top and draw vertical lines on the specified strip.

 Chart.types.Bar.extend({ name: 'BarOverlay', draw: function (ease) { // First draw the main chart Chart.types.Bar.prototype.draw.apply(this); var ctx = this.chart.ctx; var barWidth = this.scale.calculateBarWidth(this.datasets.length); for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) { var overlayBar = this.options.verticalOverlayAtBar[i]; // I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar); var y = this.scale.calculateY(2000); var bar_base = this.scale.endPoint ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)'; ctx.moveTo(x, bar_base); ctx.lineTo(x, y); ctx.stroke(); } ctx.closePath(); } }); 

This is not ideal, since I am not familiar with the internal ChartJs code, in particular my lines were from 2 bars, although my suspicion is that the error in the fencepost in the data array, and not in the calculation of the chart. However, I hope this is a useful step for someone else.