Custom pie and doughnut chart labels in Chart.js
It's easy to build a pie or doughnut chart in Chart.js. Follow the Chart.js documentation to create a basic chart config:
{
type: 'pie',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
data: [50, 60, 70, 180, 190]
}]
}
}
Let's render it using QuickChart. Pack it into the URL:
https://quickchart.io/chart?c={type:'pie',data:{labels:['January','February', 'March','April', 'May'], datasets:[{data:[50,60,70,180,190]}]}}This URL produces the following chart:
Using the Datalabels plugin
QuickChart's pie charts include data labels, unlike vanilla Chart.js. This is because we automatically include the Chart.js datalabels plugin. To customize the color, size, and other aspects of data labels, view the datalabels documentation.
Here's a simple example. Note how we're specifying the position of the data labels, as well as the background color, border, and font size:
The data labels plugin has a ton of options available for the positioning and styling of data labels. Check out the documentation to learn more.
Note that the datalabels plugin also works for doughnut charts. Here's an example of a percentage doughnut chart that uses the formatter option to display a percentage:
Hiding data labels
Returning null or empty string in the formatter property will hide the data label. We'll modify the above example to hide values less than 15%:
Custom formatting
Use the formatter property to determine exactly what shows as a label. For example, the configuration below will display labels that show the series name rather than the value. It will also format the number using Intl.NumberFormat.
To learn more about the formatter field, read the plugin documentation.
Multiple labels
Using the datalabels plugin, it is possible to set up to 3 different labels for each dataset. The datalabels plugin calls this "multiple labels", and each series can set an index, name, and value label.
Use this feature to create more than one label for each slice of your chart.
In the example below, we use:
index: Draw chart labels outside the pie/doughnut chart, and display the chart labels.name: Draw a label inside the chart, top aligned, with the dataset number. Color the text dynamically based on the data's background color.value: Draw the actual value of the data.
Using the doughnutlabel plugin
In addition to the datalabels plugin, we include the Chart.js doughnutlabel plugin, which lets you put text in the center of your doughnut. You can combine this with Chart.js datalabel options for full customization.
Here's a quick example that includes a center doughnut labels and custom data labels:
Note that this plugin is available for Chart.js v2 only.
Using the outlabeledPie plugin
The Chart.js piechart outlabels plugin draws labels in their own boxes, with lines that connect to the corresponding pie slice. To learn more about how to customize the styling and formatting of these labels, read the documentation.
Outlabels can help improve label readability, and provide labeling for slices that are too small to draw text on directly. Here's an example of the outlabledPie chart type:
Note that this plugin is available for Chart.js v2 only.
Conclusion
That's all for now. Try out your own Chart.js configs in the interactive sandbox and ask us if you have any questions!