CODEWITHSUNDEEP
javascriptchart.jsstacked-chartchartjs-2.6.0
Stefano Radaelli
Stefano Radaelli

Reputation: 1118

chartjs: unable to create Stacked Chart

I feel stupid but I don't understand where I'm going wrong :(

I'm trying to build a stacked bar chart through chartjs but I obtain only a chart with grouped labels:

const ctx = document.getElementById('bar-chart')
var chart = new Chart(ctx, {
    type: 'bar',
  options: {
    responsive: true,
    scales: {
      y: {
        stacked: true
      },
      x: {
        stacked: true
      }
    }
  },
  data: {
    labels: ['A','B','C'],
    datasets: [{
      label: 'Year 2020',
      data: [10,20,25],
      backgroundColor: '#ff0000'
    },{
      label: 'Year 2021',
      data: [15,30,10],
      backgroundColor: '#00ff00'
    },{
      label: 'Year 2022',
      data: [30,5,25],
      backgroundColor: '#0000ff'
    }]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<canvas id="bar-chart" width="600" height="350"></canvas>

But I obtain this... enter image description here

...whereas my goal is to obtain 3 bars with data stacked (vertically).

Where am I going wrong?

Upvotes: 1

Views: 91

Answers (1)

Stefano Radaelli
Stefano Radaelli

Reputation: 1118

I was using an old chartjs version that does not implement the grouped chart capability.

Referring to...

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

...the issue is solved.

Upvotes: 0

Related Questions