React-chartjs-2: Does this support groupable Stacked bar chart

[arvindkumarc]

http://www.chartjs.org/samples/latest/charts/bar/stacked-group.html

The usually stacked bar chart works but is this library supporting groupable stacked bar chart, which just uses one more stack property to split them.

[arvindkumarc]

Yes, it does, you have to have chart.js 2.6 at least.

[arvindkumarc]

A simple example

[
    {
      label: 'My First dataset',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      stack: '1',
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
      label: 'My Second dataset',
      backgroundColor: 'rgba(155,49,12,0.4)',
      borderColor: 'rgba(155,49,12,1)',
      borderWidth: 1,
      stack: '2',
      hoverBackgroundColor: 'rgba(155,49,12,0.4)',
      hoverBorderColor: 'rgba(155,59,12,1)',
      data: [55, 40, 81, 56, 65, 59, 80]
    },
    {
      label: 'My Third dataset',
      backgroundColor: 'rgba(45,149,102,0.4)',
      borderColor: 'rgba(45,149,102,1)',
      borderWidth: 1,
      stack: '2',
      hoverBackgroundColor: 'rgba(155,49,12,0.4)',
      hoverBorderColor: 'rgba(155,59,12,1)',
      data: [55, 40, 81, 56, 65, 59, 80]
    }
  ]

Just mark the xAxes and yAxes to have stacked:true

[techhysahil]

It's not working for me. Am i missing anything?

let data = [
    {
      label: 'My First dataset',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      stack: '1',
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
      label: 'My Second dataset',
      backgroundColor: 'rgba(155,49,12,0.4)',
      borderColor: 'rgba(155,49,12,1)',
      borderWidth: 1,
      stack: '2',
      hoverBackgroundColor: 'rgba(155,49,12,0.4)',
      hoverBorderColor: 'rgba(155,59,12,1)',
      data: [55, 40, 81, 56, 65, 59, 80]
    },
    {
      label: 'My Third dataset',
      backgroundColor: 'rgba(45,149,102,0.4)',
      borderColor: 'rgba(45,149,102,1)',
      borderWidth: 1,
      stack: '2',
      hoverBackgroundColor: 'rgba(155,49,12,0.4)',
      hoverBorderColor: 'rgba(155,59,12,1)',
      data: [55, 40, 81, 56, 65, 59, 80]
    }
]

<Bar data={data} options={{
    scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    }
}} />

"chart.js": "^2.7.3",
"react-chartjs-2": "^2.7.4",

[yoloOnTheBattlefield]

doesn't work for me either

[Audrey-Ann]

Not working for me too :(

[jramirezneira]

It's not working for me. Am i missing anything?

let data = [
    {
      label: 'My First dataset',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      stack: '1',
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
      label: 'My Second dataset',
      backgroundColor: 'rgba(155,49,12,0.4)',
      borderColor: 'rgba(155,49,12,1)',
      borderWidth: 1,
      stack: '2',
      hoverBackgroundColor: 'rgba(155,49,12,0.4)',
      hoverBorderColor: 'rgba(155,59,12,1)',
      data: [55, 40, 81, 56, 65, 59, 80]
    },
    {
      label: 'My Third dataset',
      backgroundColor: 'rgba(45,149,102,0.4)',
      borderColor: 'rgba(45,149,102,1)',
      borderWidth: 1,
      stack: '2',
      hoverBackgroundColor: 'rgba(155,49,12,0.4)',
      hoverBorderColor: 'rgba(155,59,12,1)',
      data: [55, 40, 81, 56, 65, 59, 80]
    }
]

<Bar data={data} options={{
    scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    }
}} />

"chart.js": "^2.7.3",
"react-chartjs-2": "^2.7.4",

you only have to indicate stacked: true in one of two axis, if you chart is vertical xAxes stacked: true

scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: false
}]
}