Chart.js - How to Add Text in the Middle of the Chart? -
you extend chart used , write labels using helper methods
html
<canvas id="mychart" width="500" height="400"></canvas>
in below js, note parameter calculatey y value, while calculatex, label index
chart.types.line.extend({ name: "linealt", draw: function(){ chart.types.line.prototype.draw.apply(this, arguments); this.chart.ctx.textalign = "center" // y value , x index this.chart.ctx.filltext("zone1", this.scale.calculatex(3.5), this.scale.calculatey(20.75)) this.chart.ctx.filltext("zone2", this.scale.calculatex(11.5), this.scale.calculatey(13)) this.chart.ctx.filltext("zone3", this.scale.calculatex(2), this.scale.calculatey(9.75)) this.chart.ctx.filltext("zone4", this.scale.calculatex(14.5), this.scale.calculatey(22.75)) } }); var data = { labels: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], datasets: [{ data: [] }] }; var ctx = document.getelementbyid("mychart").getcontext("2d"); var mybarchart = new chart(ctx).linealt(data, { scaleoverride: true, scalesteps: 16, scalestepwidth: 1, scalestartvalue: 8, animation: false });
fiddle - https://jsfiddle.net/bpfvvxpn/
not sure how created line chart, didn't add fiddle
Comments
Post a Comment