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

Note how QuickChart shows 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:

{
  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,
        }
      },
    }
  }
}

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:

{
  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 + '%';
        }
      }
    }
  }
}

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'
        }]
      }
    }
  }
}

That’s all for now. Try out your own Chart.js configs in the interactive sandbox and reach out if you have any questions!

About the author

Ian Webster is a software engineer and former Googler based in San Mateo, California. He has helped Google, NASA, and governments around the world improve their data pipelines and visualizations. In 2018, Ian created QuickChart, a collection of open-source APIs that support data visualization efforts.

Email · LinkedIn · Twitter