React-chartjs-2: stacked bar chart no longer working

[thepoosh]

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/

[davie-robertson]

I don't think you want/need stacked on the XAxis are you want stack them vertically on the YAxis

[bendavismines]

There should be a way to use a previous version (whatever is used in the fiddle) to get it to work right? Unfortunately I can't tell what the fiddle is using

[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.

[jldork]

Was this ever resolved? @thepoosh @cosmith

I also cannot reproduce a stacked bar chart using the format specified by chartjs.

[mulraj208]

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.

[Pringels]

Closing. Reason: older than 6 months and not enough or outdated information supplied. Please re-open this issue if the problem persists, but provide more information. (including a sandbox link if possible)

[sanjeeviraj]

Was this ever resolved? @thepoosh @cosmith

I also cannot reproduce a stacked bar chart using the format specified by chartjs.

use stack key in dataset, would solve it like

datasets: [ { label: 'Low', data: [67.8,50,10], backgroundColor: '#D6E9C6', stack: arbitraryStackKey, }, { label: 'Moderate', data: [20.7,5,9], backgroundColor: '#FAEBCC', stack: arbitraryStackKey, }, { label: 'High', data: [11.4,9,3], backgroundColor: '#EBCCD1', stack: arbitraryStackKey, } ]

[tmswartz12]

Has someone figured out a solution to the stacked bar example?

Would be awesome if someone could provide a sandbox or example in the docs!

Thanks!

[jhonnold]

@tmswartz12 mulraj208 has a working solution listed above. They added stacked: true to both axes.