Chart.js - How to Add Text in the Middle of the Chart? -


i'm using chart.js create line chart:

enter image description here

but need label zones, this:

enter image description here

any ideas?

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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -