Skip to main content

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:

Example chart { type: 'pie', d...

Edit this example

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:

{
type: 'pie',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
data: [50, 60, 70, 180, 190],
},
],
},
options: {
plugins: {
datalabels: {
display: true,
align: 'bottom',
backgroundColor: '#ccc',
borderRadius: 3,
font: {
size: 18,
},
},
},
},
}
Chart URL: https://quickchart.io/chart?c={ type: 'pie', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [ { data: [50, 60, 70, 1...
Example chart { type: 'pie', d...

Open in full editor

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:

{
type: 'doughnut',
data: {
datasets: [
{
data: [10, 20, 15, 5, 50],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
],
},
],
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
},
options: {
plugins: {
datalabels: {
formatter: (value) => {
return value + '%';
},
},
},
},
}
Chart URL: https://quickchart.io/chart?c={ type: 'doughnut', data: { datasets: [ { data: [10, 20, 15, 5, 50], backgroundColor: [ 'rgb(255, 99, ...
Example chart { type: 'doughnut'...

Open in full editor

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%:

{
type: 'doughnut',
data: {
datasets: [
{
data: [10, 20, 15, 5, 50],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
],
},
],
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
},
options: {
plugins: {
datalabels: {
formatter: (value) => {
if (value < 15) return '';
return value + '%';
},
},
},
},
}
Chart URL: https://quickchart.io/chart?c={ type: 'doughnut', data: { datasets: [ { data: [10, 20, 15, 5, 50], backgroundColor: [ 'rgb(255, 99, ...
Example chart { type: 'doughnut'...

Open in full editor

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.

{
type: 'doughnut',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
data: [50, 60, 70, 180, 190],
},
],
},
options: {
legend: {
display: false,
},
plugins: {
datalabels: {
display: true,
formatter: (val, ctx) => {
// Grab the label for this value
const label = ctx.chart.data.labels[ctx.dataIndex];

// Format the number with 2 decimal places
const formattedVal = Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
}).format(val);

// Put them together
return `${label}: ${formattedVal}`;
},
color: '#fff',
backgroundColor: '#404040',
},
},

},
}
Chart URL: https://quickchart.io/chart?c={ type: 'doughnut', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [ { data: [50, 60, ...
Example chart { type: 'doughnut'...

Open in full editor

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.
{
type: 'doughnut',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
data: [50, 60, 70, 180, 190],
backgroundColor: [
'#EA526F',
'#23B5D3',
'#279AF1',
'#935FA7',
'#DAFEB7',
],
datalabels: {
labels: {
index: {
color: '#404040',
font: {
size: 18,
},
// See https://chartjs-plugin-datalabels.netlify.app/guide/options.html#option-context
formatter: (val, ctx) => ctx.chart.data.labels[ctx.dataIndex],
align: 'end',
anchor: 'end',
},
name: {
color: (ctx) => ctx.dataset.backgroundColor,
font: {
size: 16,
},
backgroundColor: '#404040',
borderRadius: 4,
offset: 0,
padding: 2,
formatter: (val, ctx) => `#${ctx.dataIndex + 1}`,
Chart URL: https://quickchart.io/chart?c={ type: 'doughnut', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [ { data: [50, 60, ...
Example chart { type: 'doughnut'...

Open in full editor

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:

{
type: 'doughnut',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
data: [50, 60, 70, 180, 190],
},
],
},
options: {
plugins: {
datalabels: {
display: true,
backgroundColor: '#ccc',
borderRadius: 3,
font: {
color: 'red',
weight: 'bold',
},
},
doughnutlabel: {
labels: [
{
text: '550',
font: {
size: 20,
weight: 'bold',
},
},
{
text: 'total',
},
],
},
},
Chart URL: https://quickchart.io/chart?c={ type: 'doughnut', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [ { data: [50, 60, ...
Example chart { type: 'doughnut'...

Open in full editor

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:

{
type: 'outlabeledPie',
data: {
labels: ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE'],
datasets: [
{
backgroundColor: [
'#FF3784',
'#36A2EB',
'#4BC0C0',
'#F77825',
'#9966FF',
],
data: [1, 2, 3, 4, 5],
},
],
},
options: {
plugins: {
legend: false,
outlabels: {
text: '%l %p',
color: 'white',
stretch: 35,
font: {
resizable: true,
minSize: 12,
maxSize: 18,
},
},
},
},
}
Chart URL: https://quickchart.io/chart?c={ type: 'outlabeledPie', data: { labels: ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE'], datasets: [ { backgroundColor: [ ...
Example chart { type: 'outlabele...

Open in full editor

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!