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