如何在 Chart.js v3 中显示具有不同数据集的时间序列配置的面积图？

Question

I've been trying to implement area chart which has different datasets and we are following the configuration of timeseries chart by providing the options a min & max value to generate labels automatically. Here is my code :

var feronisData = [398, 445];
     var formattedDates = ["Feb 01", "Mar 20"];
     var colors = ['#5ba2df', '#e2ac00', '#59b110'];
     
     
      var data = {
      /* labels: formattedDates, */
        datasets: [{
        type: 'line',
        fill: 1,
          spanGaps: true,
          pointStyle: 'circle',
          label: 'Feronis',
          
          data: [{x: moment('2021-02-10 00:00:00.000').format('MMM DD'), y: 250}, {x: moment('2021-02-28 00:00:00.000').format('MMM DD'), y: 350}],
          
          borderColor: '#5ba2df',
          labels: [],
          borderWidth: 3,
          backgroundColor: 'rgba(0, 0, 0,0)',
        }, {
        type: 'line',
        fill: true,
        borderColor: '#2187f3',
backgroundColor: '#219634', 
borderWidth: 1,
          spanGaps: false,
          pointStyle: 'circle',
          label: 'Others',
          data: [{x: moment('2021-01-24 00:00:00.000').format('MMM DD'), y: 150},{x: moment('2021-02-04 00:00:00.000').format('MMM DD'), y: 300}, {x: moment('2021-03-24 00:00:00.000').format('MMM DD'), y: 450}],
          borderColor: '#e2ac00',
          labels:[],
          borderWidth: 3,
          backgroundColor: 'rgba(0, 0, 0,0)',
        }]
      };
      var options = {
        showLines: true,
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 80
          }
        },
        elements: {
          point: {
            radius: 1,
            hoverRadius: 5,
          }
        },
        hover: {
          mode: 'index',
          intersect: false
        },
         responsive: true,
        tooltips: {
          enabled: true,
          mode: 'index',
          intersect: false,
          yAlign: 'right',
        },
        scales: {
        x : {
        type: 'time',
        min: 'Jan 01',
        max: 'Jul 01',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'MMM DD'
          }
        }
          /* xAxes: [{
            type: 'time',
            time: {
            unit: 'day',
            unitStepSize: 10,
            format: 'MMM DD',
              displayFormats: {
                'day': 'dddd',
                                'week': 'MMM DD',
                'month': 'MMM DD'
              },
              min: 'JAN 01',
                max: 'JUL 01'
            },
            display: true,
            interval: 5,
            intervalType: "month",
            gridLines: {
              drawOnChartArea: false,
            }
          }], */
      },
      y: {
        stacked: true,
      }
      }}
  this.chart = new Chart('canvas', {
        responsive: true,
        data: data,
        options: options
      });

The same is available on fiddle here : https://jsfiddle.net/erdfs37h/

Configuaration is Backend is not going to provide me any set of labels as labels array shown in each dataset. Instead we are depending directly on the data array which provides values in this format [{x: 'xItem', y: 'someValueToPlot'}]

Note : actually I'm going to render this with React.js where my common component generates chart based on these configuration, but it is almost similar to what I've shown on fiddle link.

Since we are also using the timeseries configuration, can you point out any specific thing that I'm missing here?

---

Currently, I think the solution can be achieved by adding these key-fields for each dataset

type: 'line',
    fill: {
      target: 'origin',
      above: 'rgb(123, 43, 54)', // Area will be reddish above the origin
      below: 'rgb(65, 47, 231)' // And blue below the origin
    },

Answer 1

Your issue is that you provided duplicate keys for the backgroundColor and in your duplicate you set it to a fully transparent color so thats why its not showing also the labels array in your dataset config is redundent since you are using object notation

Example:

 var feronisData = [398, 445]; var formattedDates = ["Feb 01", "Mar 20"]; var colors = ['#5ba2df', '#e2ac00', '#59b110']; var data = { /* labels: formattedDates, */ datasets: [{ type: 'line', fill: 1, spanGaps: true, pointStyle: 'circle', label: 'Feronis', data: [{ x: moment('2021-02-10 00:00:00.000').format('MMM DD'), y: 250 }, { x: moment('2021-02-28 00:00:00.000').format('MMM DD'), y: 350 }], borderColor: '#5ba2df', borderWidth: 3, }, { type: 'line', fill: true, borderColor: '#2187f3', backgroundColor: '#219634', borderWidth: 1, spanGaps: false, pointStyle: 'circle', label: 'Others', data: [{ x: moment('2021-01-24 00:00:00.000').format('MMM DD'), y: 150 }, { x: moment('2021-02-04 00:00:00.000').format('MMM DD'), y: 300 }, { x: moment('2021-03-24 00:00:00.000').format('MMM DD'), y: 450 }], }] }; var options = { showLines: true, layout: { padding: { left: 0, right: 0, top: 0, bottom: 80 } }, elements: { point: { radius: 1, hoverRadius: 5, } }, hover: { mode: 'index', intersect: false }, responsive: true, plugins: { tooltip: { enabled: true, mode: 'index', intersect: false, yAlign: 'right', }, }, scales: { x: { type: 'time', min: 'Jan 01', max: 'Jul 01', time: { unit: 'day', displayFormats: { day: 'MMM DD' } } }, y: { stacked: true, } } } this.chart = new Chart('canvas', { responsive: true, data: data, options: options });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script> <canvas style="height: 400px;" id='canvas' />

You might also want to check the migration guide out since as I can see fast your tooltip is also wrongly configured: https://www.chartjs.org/docs/master/getting-started/v3-migration.html