Is it possible to make a chart like the example below?
I haven't been able to find an example with an overlay. I'm using this in the context of an atmosphere plugin within a meteor application so it might not be possible for me to easily add plugins to my chartjs instance.
I've built out quite a few charts already, so for that reason it's my strong preference to get this to work over switching to another charting library, but it's not too late to port them over if there's no other way to make this work.
You could extend the Bar Chart to add the horizontal line
Chart.types.Bar.extend({
name: "BarLine",
draw: function () {
Chart.types.Bar.prototype.draw.apply(this, arguments);
var scale = this.scale,
barHeight = this.scale.calculateY(83);
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(30, barHeight);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineWidth = 3;
this.chart.ctx.lineTo(this.chart.width, barHeight);
this.chart.ctx.stroke();
// write Label Text
this.chart.ctx.fillStyle = '#000000';
var text = this.options.labelText ? this.options.labelText : "DEFAULT TEXT"
this.chart.ctx.textAlign = 'center';
this.chart.ctx.font = '22px Arial';
this.chart.ctx.fillText(text, this.chart.width * 0.5, 95);
this.chart.ctx.closePath();
}
});`
You could add the bar values in the draw function i'm sure, but I generally do it in the 'onanimationcomplete' function for the chart, like so:
resultChart = new Chart(resultGraphCanvas.getContext("2d")).BarLine(chart, {
scaleBeginAtZero: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
maintainAspectRatio: false,
labelText: "TEST DRAWN NEAR THE LINE",
showTooltips: false, //Needs to be set to false for the onAnimationComplete drawing to persist
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y );
});
})
},
});
This will draw the values at the top of the bars, i'll leave positioning them elsewhere to you :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.