Sample Multi Series Pie Chart Chart.js
How to draw a Multi-Series Pie Chart in Chart.js
Chart.js is an excellent js based charting library that can be used to draw various chart types including line chart, bar chart, radar chart, bubble chart, pie chart, doughnut chart and other charts including mixed charts.
Based on github stars and number of downloads, chart.js is the most popular javascript charting library. It is an open source charting library that can be installed easily on your website or server and used to draw various types of charts.
The best thing about chart.js library is that despite being free, it offers a vast number of customization options to draw interactive charts.
Moreover, you do not need to be a master of js to learn to draw charts using chart.js. The chart.js library offers customizations that are very easy to set and can be configured easily to create excellent looking charts even with very large datasets.
In this post, we will show you how to draw a multi series pie chart. A multi series pie chart uses several datasets unlike a pie chart that uses just one. However, before we can draw pie chart using chart.js, we will need to install the library on our website or server.
Install Chart.js
The chart.js javascript charting library can be installed using two methods. The first method or the cdn method is the most recommended method. You can install it on your website using the cdn script. You will only need to add the script to your website’s head. However, if you want to install it on your server, it is possible to do so using npm.
Install via cdn link
To install chart.js on your website, you will need to add the following script to your website in the head between the and tags:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```.
**Install Using NPM**
You can also install the chart.js library pon your server using npm. To do that, you need to run the following command on your server:
npm install chart.js
That’s all you have installed chart.js on your website. Now, you can start drawing charts using chart.js.
## Draw Multi-series pie chart with chart.js
To draw any type of chart using chart.js you will first need to draw canvas to hold the chart.
The dataset to be used for drawing the multiseries pie chart will look something like this:
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Americas 2021', 'Europe 2021', 'China 2021', 'Japan 2021', 'Asia Pacific 2021', 'Americas 2022', 'Europe 2022', 'China 2022', 'Japan 2022', 'Asia Pacific 2022'],
datasets: [{
backgroundColor: ['#ff6384', '#36a2eb', '#cc65fe', '#17becf', '#ffce56'],
data: [153.3, 89.3, 68.4, 28.5, 26.36]
},
{
backgroundColor: ['#ff6384', '#36a2eb','#cc65fe','#17becf','#ffce56'],
data: [169.7, 95.12, 74.2, 26, 29.4],
},
]
},
As you can see above we have used two datasets that include the data for 2021 in one set and data for 2022 in the other set. However, there are ten labels and five for each year. The first five among the labels represent the first dataset and then the next five the second dataset in sequence.
Finally, the complete script will look like this:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
Chart.register(ChartDataLabels);
var ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Americas 2021', 'Europe 2021', 'China 2021', 'Japan 2021', 'Asia Pacific 2021','Americas 2022', 'Europe 2022', 'China 2022', 'Japan 2022', 'Asia Pacific 2022'],
datasets: [{
backgroundColor: ['#ff6384', '#36a2eb','#cc65fe','#17becf','#ffce56'],
data: [153.3, 89.3, 68.4, 28.5, 26.36]
},
{
backgroundColor: ['#ff6384', '#36a2eb','#cc65fe','#17becf','#ffce56'],
data: [169.7, 95.12, 74.2, 26, 29.4],
},
]
},
options: {
cutout: 80,
interactions: {mode: 'index'},
responsive: 'true',
plugins: {
tooltip: {position: 'nearest', intersect: false, backgroundColor: 'white', titleColor: 'black', bodyColor: 'black', displayColors: false, yAlign: 'bottom', caretPadding: 5, padding:12, titleMarginBottom: 10, },
legend: {position: 'bottom'}, title: {display: true, text: 'Apple Geographic Revenue 2021-2022 in $ billions', font: {size: 14}}, datalabels: {align: 'end', Color: 'black', backgroundColor: 'white',anchor: 'start', font: {size: 14, weight: 'bold'},
formatter: function(value) {
return ' $' + value + ' billion';
},}},
scales: {
y: [{
beginAtZero: true,
}
]
}
}
});
</script>
That is the entire script to draw a chart that looks like the following image.
.png)
We have also added datalabels and used a formatter to show the dollar sign and add ‘billion’ to the value. While drawing a multi series pie chart, it is important to keep in mind that you need to have just as many datasets as many series or layers in the pie chart. We have used similar colors for both datasets as backgroundColor for easy comparison/
Suggested Reading
Sample ARea Chart in zchart.js
How to Apply Title and subtitle in Chart.js
Sample Mimxed Chart in Chart.js
How to configure and cutomize tooltip in chart.js
Configure Datalables Plugin in Chart.js