Chartjs-Datasets in Chart.js stacked barchart appear overlaid instead of stacked

by

1👍

✅

Simply define your yAxes as stacked also as shown below.

yAxes: [{
  stacked: true,

Also try to use the latest stable version of Chart.js (currently v2.9.3)

Please have a look at your amended code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chart.js test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>  
<div style="width:90%;margin:20px auto">

  <canvas id="myChart" width="90%"></canvas>

  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["6 Mar","7 Mar","8 Mar","9 Mar","10 Mar","11 Mar","12 Mar","13 Mar","14 Mar","15 Mar","16 Mar","17 Mar","18 Mar","19 Mar","20 Mar","21 Mar","22 Mar","23 Mar","24 Mar","25 Mar","26 Mar","27 Mar","28 Mar","29 Mar","30 Mar","31 Mar","1 Apr","2 Apr","3 Apr","4 Apr","5 Apr","6 Apr","7 Apr","8 Apr","9 Apr","10 Apr","11 Apr","12 Apr","13 Apr","14 Apr","15 Apr","16 Apr","17 Apr","18 Apr","19 Apr","20 Apr","21 Apr","22 Apr","23 Apr","24 Apr","25 Apr","26 Apr","27 Apr","28 Apr","29 Apr","30 Apr","1 May","2 May","3 May","4 May","5 May","6 May","7 May","8 May","9 May","10 May","11 May","12 May","13 May"],
            datasets: [
            {
                        label: 'dataset1',
                        data: [163,43,67,48,61,74,0,342,342,0,403,407,676,63,1294,1035,665,967,1427,1452,2129,2885,2546,2433,2619,3009,4324,4244,4450,3735,5903,3802,3634,5491,4344,8681,5233,5288,4342,5252,4603,4617,5599,5525,5850,4676,4301,4451,4583,5386,4913,4463,4309,3996,4076,6032,6201,4806,4339,3985,4406,6111,5614,4649,3896,3923,3877,3403,3242],
                        backgroundColor:'rgb(0,102,204,0.8)'
                    },{
                        label: 'dataset2',
                        data: [1,1,0,1,4,0,2,1,18,15,22,16,34,43,36,56,35,74,149,186,183,284,294,214,374,382,670,652,714,760,644,568,1038,1034,1103,1152,839,686,744,1044,842,1029,935,1115,498,559,1172,837,727,1005,843,420,338,909,795,674,739,621,315,288,693,649,539,626,346,268,210,627,494],
                        backgroundColor:'rgb(204,0,102,1)'
                    }           ]
        },
        options: {
            layout: {
                padding: {
                    left: 10,
                    right: 10,
                    top: 10,
                    bottom: 10
                }
            },
            legend: {
                display: true,
                position: 'bottom'
            },
            scales: {
                xAxes: [{
                  display: true,
                  stacked: true,
                  scaleLabel: {
                    display: true,
                    labelString: 'Date'
                  },
                  ticks: {
                    autoSkip: true,
                    maxTicksLimit: 20,
                    maxRotation: 0,
                    minRotation: 0,
                    major: {
                      fontStyle: 'bold',
                      fontColor: '#FF0000'
                    }
                  }
                }],
                yAxes: [{
                  stacked: true,
                  scaleLabel: {
                    display: true,
                    stacked: true,
                    labelString: 'Number'
                  },
                  ticks: {
                        beginAtZero: true
                  }
                }]
            },
            title: {
              display: true,
              text: 'Chart title'
            },
            responsive: true
        }
    });
  </script>
</div>
</body>
</html>

Leave a comment