I was wondering if it was possible to overlay a line ontop of a chart.js graph, such as a line graph ? For example, on the x axis a horizontal line would be drawn at value 20 across the graph
I've created something called an overlay chart that i have added to my fork of chart.js (https://github.com/leighquince/Chart.js) that could be used in this situation. it works in the same was as a line or bar chart, only difference is you declare an extra property called type that can either be 'line' or 'bar'. Then just call new Chart(ctx).Overlay(data).
So for your example you could just have your bar chart and then provided another data set (with some better colors than i have 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>
