Chart.js - How to add text in the middle of a chart?

Question

I use Chart.js to create this line chart:

But I need to mark the zones, something like this:

Any ideas?

Answer 1

You expand the chart you used, and then write labels using helper methods.

HTML

<canvas id="myChart" width="500" height="400"></canvas> 

In the JS below, note that the parameter for calculateY Y is the value of y, and for calculateX X is the index of the label

 Chart.types.Line.extend({ name: "LineAlt", draw: function(){ Chart.types.Line.prototype.draw.apply(this, arguments); this.chart.ctx.textAlign = "center" // y value and 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 }); 

Violin - https://jsfiddle.net/bpfvvxpn/

Not sure how you created the line chart, so don't add it to the violin

Answer 2

Here is how I write inside the pie to create a sensor:

 var start=0; var stop=100; var part=(stop-start)/3; var pi_value=4.999; var pi_name="مدت توقف"; var pi_unit="(روز)"; var pi_data=[30, 30, 20, 1, 9]; var inner={ backgroundColor: [ "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 1)", "rgba(0, 0, 0, 0)" ], borderWidth: 0, hoverBackgroundColor: [ "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 1)", "rgba(0, 0, 0, 0)" ], hoverBorderWidth: 0 }; angular.module('PIR').controller("DoughnutCtrl", ['$scope', function ($scope) { var originalDraw = Chart.controllers.doughnut.prototype.draw; Chart.controllers.doughnut.prototype.draw = function(ease) { if(this.index == 1){ let x = (this.chart.boxes[this.index].right)/2; this.chart.chart.ctx.textAlign = "center"; this.chart.chart.ctx.fillText(pi_value, x, x*3/2); this.chart.chart.ctx.fillText(start, 4*this.chart.boxes[this.index].left, x*3/2); this.chart.chart.ctx.fillText(stop, this.chart.boxes[this.index].right-3*this.chart.boxes[this.index].left, x*3/2); } originalDraw.call(this, ease); }; $scope.data = [pi_data, pi_data]; $scope.datasetOverride = [ { backgroundColor: [ "rgb(255, 69, 96)", "rgb(206, 148, 73)", "rgb(153, 223, 89)", "rgba(0, 0, 0, 1)", "rgb(153, 223, 89)" ], borderWidth: 0, hoverBackgroundColor: [ "rgb(255, 69, 96)", "rgb(206, 148, 73)", "rgb(153, 223, 89)", "rgba(0, 0, 0, 1)", "rgb(153, 223, 89)" ], hoverBorderWidth: 0, }, inner ]; $scope.options = { cutoutPercentage: 0, rotation: -3.1415926535898, circumference: 3.1415926535898, legend: { display: false }, tooltips: { enabled: false }, title: { display: true, text: pi_name + ' ' + pi_unit, fontSize: 14, fontFamily: 'yekan', position: 'bottom' } }; }]); 

http://jtblin.imtqy.com/angular-chart.js/

https://github.com/chartjs/Chart.js/issues/2874#issuecomment-273839993