Normally, you only display a single dataset with a pie chart, but multiple datasets are supported. They are displayed as concentric circles. Labeling the data in this case is mandatory, since it's impossible to visually compare the sizes of the slices.

The following example uses two datasets containing country population estimates from 1980 and 2015 to create a doughnut chart with the 1980 values in the inner circle, and the 2015 values in the outer circle. The relevant code fragments are shown as follows. You can see the full code in Pie/pie-10-multiset.html:

 const dataset2015 = [189,206,258,320,1309,1397,3703],
       dataset1980 = [78,121,147,230,697,994,2191];
 
 const labels = ["Pakistan", "Brazil", "Indonesia", "United States of 
                America", "India", "China", "Others"];
 
 const colors2015 = [], colors1980 = [];
 
 let count = 0;
 labels.forEach(d => {
     count++;
     colors2015.push('hsla('+(count * 300 / labels.length)+', 100%,
     50%, .9)');
     colors1980.push('hsla('+(count * 300 / labels.length)+', 100%,
     75%, .9)');
 });
 
 const dataObj = {
     labels: labels,
     datasets: [
         { data: dataset2015, backgroundColor: colors2015 },
         { data: dataset1980, backgroundColor: colors1980 }
     ]
 }
 const canvas = document.getElementById("my-pie-chart");
 const ctx = canvas.getContext("2d");
 
 const chartObj = {
     type: "doughnut",
     data: dataObj,
     options: {
         animation: { // to draw on canvas use this callback
             onComplete: function() {
                 ctx.fillText("Population in 1980",
                               canvas.width/2 - 140,canvas.height/2);
                 ctx.fillText("Population in 2015",
                               canvas.width/2 + 70,canvas.height - 10);
             }
         } // ...
     }
 };
 
 const chart = new Chart("my-pie-chart", chartObj);
 chart.update();

The label in the center of the doughnuts was created by drawing directly on the canvas. If you need to do that, you must use a callback. The onComplete callback (configured under options.animation) is called when the chart has finished drawing. If you don't use a callback, Chart.js may erase whatever you draw. This behavior will be detailed in Chapter 6, Configuring Styles and
Interactivity.

The result is shown as follows:

These charts may be visually attractive, but they can introduce some serious perception errors. The outer arcs are perceived to be much larger than they actually are. It's an optical illusion. A population growth in the preceding chart won't be noticed unless the difference is significant. You can visualize this problem if you invert the order of the datasets, placing the 1980 values on the outer circle. This is shown in the following chart, where it seems that some populations grew in proportion to the whole, when all of them actually decreased. This chart is lying to us: