Grouping datasets in a stacked bar

[waleedexe]

Hi,

I have been trying to create a stacked bar chart that will have multiple stacked data sets but also allow a data set to be split within the same x axis.
As an example i have monthly sales data for apples, oranges, and pears. I also have 2 sellers (layers) that i need to split the data on.
I modified the online stacked-grouped bar chart using the sample above to show this:

So visually, it looks promising. However, there are multiple data sets used here and I didn't know how to make it in such a way that the legend will show only 3 options: Apples/Oranges/Pears.
If possible, i would like to be able to de-select apples and it should have the effect of de-selecting apples from both groups like this:

but as you can see, i am faced with Apples.L1 and Apples.L2.
Anyway, this can be achieved?

the idea graph would look like this example (which is in excel and is grouped by region)

here's the config i used in the examples:

const DATA_COUNT = 4;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Apples.L1',
      data: [
        70,20,50,40
      ],
      backgroundColor: Utils.CHART_COLORS.red,
      stack: 'Layer1',
    },
    {
      label: 'Oranges.L1',
      data: [
        40,60,50,30
      ],
      backgroundColor: Utils.CHART_COLORS.blue,
      stack: 'Layer1',
    },
    {
      label: 'Pears.L1',
      data: [
        10,60,50,30
      ],
      stack: 'Layer1',
    },
    {
      label: 'Apples.L2',
      data: [
        40,60,10,30
      ],
      backgroundColor: Utils.CHART_COLORS.red,
      stack: 'Layer2',
    },
    {
      label: 'Oranges.L2',
      data: [
        40,20,50,30
      ],
      backgroundColor: Utils.CHART_COLORS.blue,
      stack: 'Layer2',
    },
  ]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },
    responsive: true,
    interaction: {
      intersect: false,
    },
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  }
};

[samuei]

I have only a partial solution, but maybe it will be helpful. I also have multiple datasets with the same label, so I defined the following function as options.plugins.legend.generateLabels:

generateLabels: (chart) => {
    const labels = [];
    const labelNames = [];
    chart.data?.datasets?.forEach((dataset, i) => {
        if (!labelNames.includes(dataset.label)) {
            labelNames.push(dataset.label);
            labels.push({
                text: dataset.label,
                fillStyle: dataset.borderColor,
                datasetIndex: i,
            });
        }
    });

    return labels;
},

This simulates grouping by only displaying each label's name once, but it won't solve your select/deselect issue. 🤷

[waleedexe]

thank you! that gives me more ideas to look into the legend data structure. I found options.plugins.legend.filter which could be useful for hiding the data when a label is selected.