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!