Chartjs-How to show area chart with timeseries configuration with different datasets in Chart.js v3?

by

0👍

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

Leave a comment