Add external labels to Chart.js pie charts

Chart.js piecharts are created without labels by default. Depending on your project requirement and design, a need for external labels may arise. This article is a quick guide to adding external labels to a chart.js pie chart. All you need is a chart.js pie chart in your project to follow along.

In two simple steps, we will use the chartjs-plugin-piechart-outlabels plugin to create the external labels on our chart.

Step 1: Install

The first step is to install the plugin. Copy the command below into your terminal.

npm install chartjs-plugin-piechart-outlabels --save

Step 2: Import and use

Import the plugin into the chart file.

import "chartjs-plugin-piechart-outlabels"

Chart.js renders charts by calling an inbuilt renderChart() method that takes the data and options objects as parameters. The data object contains the chart data sets and labels array, while the options object contains the chart appearance configurations.

In the options object of the chart, declare the imported plugin to create the external label feature. Copy the code below into the options object.

plugins: {
outlabels: {
text: (l, v) => "%l %v",
//text: (label, percentage, value) => `$${value}`,
color: "black",
stretch: 40,
font: {
resizable: true,
minSize: 12,
maxSize: 18,
},
backgroundColor: false,
},
},

The code block above defines what your external labels will look like. You have a number of configurable options to choose from in the official documentation. You can add a background color to the labels, change the font size, tweak the text property itself to show only the labels without values, or even truncate the label texts. Play around with the available options and see what works best for your project.