Adding Text to a Doughnut Chart in Chart.js V3.8 with HTML5 Canvas (2024)

Abstract: Learn how to add dynamic text to the center of a Doughnut Chart using Chart.js V3.8 and HTML5 Canvas.

2024-04-21 by DevCodeF1 Editors

Adding Text to a Doughnut Chart with Chart.js v3.8 on HTML5 Canvas

Chart.js is a popular JavaScript library for creating charts and graphs on HTML5 canvas. In this article, we will focus on adding text to a doughnut chart using Chart.js v3.8 on HTML5 canvas. We will cover the key concepts and provide detailed context on the topic. The text that we will add to the chart will be dynamic, not static, and we will try to add text inside the chart as well.

Creating a Basic Doughnut Chart with Chart.js

Before we can add text to a doughnut chart, we need to create a basic chart. Here is an example of how to create a basic doughnut chart using Chart.js:

<canvas id="myChart"></canvas>
This code creates a basic doughnut chart with three sections, each represented by a different color. The labels for each section are 'Red', 'Blue', and 'Yellow', and the values for each section are 12, 19, and 3, respectively.
Adding Text to a Doughnut Chart
Now that we have a basic doughnut chart, we can add text to it. To add text to a chart, we can use the Chart.Element.prototype.draw() function. This function is called every time the chart is rendered, and it allows us to add custom text to the chart. Here is an example of how to add text to a doughnut chart:
<canvas id="myChart"></canvas>
In this example, we have added text to the first section of the doughnut chart, which is represented by the 'Red' label. The text that we have added is 'Red Circle'. We have also customized the font size, font style, font family, text alignment, and text baseline to make the text look better on the chart. The drawText() function is used to actually draw the text on the chart.
Adding Dynamic Text to a Doughnut Chart
The text that we added to the doughnut chart in the previous example was static. However, we can also add dynamic text to a doughnut chart. To do this, we can use a variable instead of a hard-coded value. Here is an example of how to add dynamic text to a doughnut chart:
<canvas id="myChart"></canvas>
In this example, we have added a variable called redValue to the doughnut chart. We have then used this variable to display the value of the red section of the chart as dynamic text. Every time the chart is rendered, the value of the red section will be displayed as dynamic text.
Adding Text Inside a Doughnut Chart
So far, we have added text to the sections of the doughnut chart. However, we can also add text inside the doughnut chart. To do this, we can use the Chart.plugins.register() function to register a new plugin. Here is an example of how to add text inside a doughnut chart:
Chart.plugins.register({ afterDraw: function (chart) { var width = chart.chart.width, height = chart.chart.height, ctx = chart.chart.ctx; ctx.restore(); var fontSize = (height / 114).toFixed(2); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; ctx.fillStyle = "#000"; var text = "Doughnut Chart"; var x = Math.round(width / 2); var y = height / 2; ctx.fillText(text, x, y); ctx.save(); }});var ctx = document.getElementById('myChart').getContext('2d');var myDoughnutChart = new Chart(ctx, { type: 'doughnut', data: { labels: ['Red', 'Blue', 'Yellow'], datasets: [{ label: '# of Votes', data: [12, 19, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ], borderWidth: 1 }] }});
In this example, we have registered a new plugin called afterDraw. This plugin is called every time the chart is rendered, and it allows us to add custom text inside the doughnut chart. We have added the text 'Doughnut Chart' inside the chart using the fillText() function.

• Chart.js is a popular JavaScript library for creating charts and graphs on HTML5 canvas.
• We can add text to a doughnut chart using the Chart.Element.prototype.draw() function.
• We can add dynamic text to a doughnut chart using a variable instead of a hard-coded value.
• We can add text inside a doughnut chart using the Chart.plugins.register() function.

References

• Chart.js Documentation
• CanvasRenderingContext2D.drawText()
• CanvasRenderingContext2D.fillText()
• HTML5 Canvas drawText() Method