stacked bar chart no longer working

I saw https://github.com/jerairrest/react-chartjs-2/issues/220 that suggested adding both the stack attribute to each data column and stacked: true to the axes objects but for some reason this is broken for me

Using the same data in jsfiddle and the original chartjs library does show stacked bars but with this library it doesn’t

My input data for this is:

const colors = ['#004876', '#0063a0', '#007ecc', '#0093ee', '#82caf8', '#c8e6f4'];
const options = {
    layout: {
      padding: {
        bottom: 0,
        top: 0
      }
    },
    scales: {
      xAxes: [{
        stacked: true,
        gridLines: {
          display: false
        },
      }],
      yAxes: [{
        stacked: true,
          }],
    },
        responsive: true,
          legend: {
            display: true,
            position: 'right',
            labels: {
              fontColor: '#91929b',
              padding: 20
            }
          }
        };
const chartData = {
  labels: ["08-2018", "09-2018", "10-2018", "11-2018"],
  datasets: [{
      label: 'Air',
      data: [20000, 10000, 2000, 25000],
      stack:'1',
      backgroundColor: colors[0],
      borderWidth: 0
    },
    {
      label: 'Express',
      stack: '2',
      data: [20000, 20000, 2000, 25000],
      backgroundColor: colors[1],
      borderWidth: 0
    },
    {
      label: 'LCL',
      data: [5000, 5000, 20000, 25000],
      backgroundColor: colors[2],
      borderWidth: 0,
      stack: '3'
    },
    {
      label: 'FTL',
      data: [20000, 10000, 12000, 25000],
      backgroundColor: colors[3],
      borderWidth: 0,
      stack: '4',
    },
    {
      label: 'LTL',
      data: [20000, 5000, 10000, 25000],
      backgroundColor: colors[4],
      borderWidth: 0,
      stack: '5',
    },
    {
      label: 'FCL',
      data: [5000, 10000, 5000, 25000],
      backgroundColor: colors[5],
      borderWidth: 0,
      stack: '6',
    },
  ]
};

class App extends Component {
 
  render() {
      return ( <div className = "App" >
      <header className = "App-header" >
      <div>
        <Bar 
        data={chartData}
        options={options}
        width={700}
        height={350} />
        </div>
      </header> <
      /div>
    );
  }
}

The resulting chart with this library looks like this:

while the same code in JSFiddle looks like this: https://jsfiddle.net/tbLv0nf4/5/

[mulraj208]

<Bar data={barChartData} options={barChartOptions} />

const barChartData = { labels: [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’], datasets: [ { label: ‘Active’, backgroundColor: ‘#a88add’, stack: ‘2’, data: [30, 50, 20, 40, 50, 30, 20, 110], }, { label: ‘Banned’, backgroundColor: ‘#0cc2aa’, stack: ‘2’, data: [10, 0, 5, 15, 0, 4, 8, 8], }, ], };

const barChartOptions = { legend: { display: false, }, scales: { xAxes: [ { stacked: true, }, ], yAxes: [ { stacked: true, }, ], }, };

“chart.js”: “^2.8.0”, “react-chartjs-2”: “^2.7.6”,

This config works for me.

[cosmith]

This is working fine if you use the format as specified by chartjs (example here: view-source:https://www.chartjs.org/samples/latest/charts/bar/stacked.html)

You don’t need stack: x in your dataset either. Just stacked: true in your xAxes and yAxes.