Skip to content

Instantly share code, notes, and snippets.

@qazd
Created December 17, 2016 18:59
Show Gist options
  • Save qazd/dcdbf917d8f984b908d8803596706eea to your computer and use it in GitHub Desktop.
Save qazd/dcdbf917d8f984b908d8803596706eea to your computer and use it in GitHub Desktop.
var horizonalLinePlugin = {
afterDraw: function(chartInstance) {
var yScale = chartInstance.scales["y-axis-0"];
var canvas = chartInstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartInstance.options.horizontalLine) {
for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
line = chartInstance.options.horizontalLine[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yValue = yScale.getPixelForValue(line.y);
} else {
yValue = 0;
}
ctx.lineWidth = 3;
if (yValue) {
ctx.beginPath();
ctx.moveTo(0, yValue);
ctx.lineTo(canvas.width, yValue);
ctx.strokeStyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillStyle = style;
ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
}
}
return;
};
}
};
Chart.pluginService.register(horizonalLinePlugin);
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
"horizontalLine": [{
"y": 82,
"style": "rgba(255, 0, 0, .4)",
"text": "max"
}, {
"y": 60,
"style": "#00ffff",
}, {
"y": 44,
"text": "min"
}]
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment