A line chart could be used to show how much CO2 that each country releases in the atmosphere each year. It would reveal if a country's emissions were increasing, stable, or decreasing, but such a line chart would not be very useful to show the total amount of CO2 released in the air, and how each country contributes to this total. You can display this kind of information using a stacked area chart.

There is no special area type chart in Chart.js. Instead, you can create a simple overlapping area chart configuring the fill properties for each dataset in a line chart. To create a stacked area chart, you will need to set the stacked property to true in the x and y-axes.

Let's try an example. We will use a JSON file containing data about carbon emissions (in kilotonnes) from selected countries from 1960 to 2014. It's based on a CSV file containing data for all countries, which is available for download from the World Bank public database. I created a JSON Version of this file containing only the six greatest polluters, adding up all of the other countries in a single entry. This is the file we will use (Data/world_bank_co2_kt.json), as follows:

{ "labels":[1960,1961,…,2013,2014],
   "entries":[
      {"country":"Others",
       "data":[983835.74025,1015886.52639,
        …,10073290.7688,10300830.9827]},
      {"country":"Russian Federation",
       "data":[0,0,… ,1778561.006,1705345.684]},
      {"country":"India",
       "data":[120581.961,130402.187,… ,2034752.294,2238377.137]},
      {"country":"Japan",
       "data":[232781.16,283118.069,… ,1246515.976,1214048.358]},
      {"country":"China",
       "data":[780726.302,552066.85,… ,10258007.128,10291926.878]},
      {"country":"European Union",
       "data":[2359594.88616257,2445945.66448806,… 
        ,3421472.348,3241844.353]},
      {"country":"United States",
       "data":[2890696.1,2880505.507,2987207.873,… 
        ,5159160.972,5254279.285]}
 ]}

As in the previous example, we need to load the file and parse the JSON string, as follows:

fetch('world_bank_co2_kt.json')
         .then(response => response.text())
         .then((json) => {
     draw(JSON.parse(json));
 });

The next step is to set up an array of labels and datasets from the data. The JSON file already contains an array with the years, so all you have to do is copy it directly into the chart's data object labels property. The datasets array is assembled iterating through each entry in the data file's entries array to extract the label of the dataset (from the country property) and the data array (from the data property). We will use the array's index to generate different colors, as follows:

 function draw(datasetsObj) {
     const datasets = [];
     datasetsObj.entries.forEach((entry, index) => {
         const color = 'hsla('+(index+5)*50+',75%,75%,1)';
         const dataset = {
             label: entry.country,
             data: entry.data,
             borderColor: color,
             backgroundColor: color,
             borderWidth: 3,
             fill: 'start', // fills the space below each line
             pointRadius: 0
         };
         datasets.push(dataset);
     });
 
     const dataObj = {
         labels: datasetsObj.labels, // copied from the JSON data
         datasets: datasets
     }
 
     new Chart("my-area-chart", {type: "line", data: dataObj });

The result of this code is shown as follows. The full code is in LineArea/line-11-area.html. The step between 1990 and 1992 is caused by a lack of data in previous years, mostly from Warsaw Pact countries and the Soviet Union:

The Chart is probably not what you would expect. It's not stacking the data. The other dataset is overlapping all of the other datasets.

Datasets could be stacked in two ways: on the x axis, or on the y axis, so you have to tell Chart.js how you want to do it. In this example, it doesn't make sense to add up the years, but it does to add up carbon emissions, so we have to stack the y axis. This is done by setting the scales.yAxes[0].stacked property to true, in the options configuration object, as follows:

 const chartObj = {
     type: "line",
     data: dataObj,
     options:{
        scales: {
            yAxes: [{
               stacked: true
            }]
       },
           legend: {
            labels: {
                boxWidth: 20,
            }
         }
     }
 };

In the preceding options configuration, we have also reduced the size of the legend boxes to half (the boxWidth property). You can see the final result as follows. The full code is in LineArea/line-12-area-stacked.html:

Now the chart reveals that the step from 1990 to 1992 is mostly due to Russia, for which the World Bank didn't have any carbon emission data before 1990, when it was the Soviet Union.