[Question]: Does anyone have an example of a combochart with stacked and grouped combined, is that possible?

[bniksa]

Question

This kind of works

const data1 = [
  { group: 'Past Year', key: 'January', value: 30000 },
  { group: 'Past Year', key: 'February', value: 40000 },
  { group: 'Past Year', key: 'March', value: 35000 },
  { group: 'Past Year', key: 'April', value: 45000 },
  { group: 'Past Year', key: 'May', value: 50000 },
  { group: 'Past Year', key: 'June', value: 60000 },
  { group: 'Past Year', key: 'July', value: 70000 },
  { group: 'Past Year', key: 'August', value: 80000 },
  { group: 'Past Year', key: 'September', value: 90000 },
  { group: 'Past Year', key: 'October', value: 100000 },
  { group: 'Past Year', key: 'November', value: 110000 },
  { group: 'Past Year', key: 'December', value: 120000 },
  { group: 'Current Year', key: 'January', value: 20000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'January', value: 10000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'February', value: 25000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'February', value: 15000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'March', value: 30000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'March', value: 20000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'April', value: 35000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'April', value: 25000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'May', value: 40000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'May', value: 30000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'June', value: 45000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'June', value: 35000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'July', value: 50000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'July', value: 40000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'August', value: 55000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'August', value: 45000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'September', value: 60000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'September', value: 50000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'October', value: 65000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'October', value: 55000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'November', value: 70000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'November', value: 60000, subgroup: 'Projected' },
  { group: 'Current Year', key: 'December', value: 75000, subgroup: 'Paid' },
  { group: 'Current Year', key: 'December', value: 65000, subgroup: 'Projected' }
];

const options = {
  title: 'Combo Chart - Grouped and Stacked Bar',
  axes: {
    left: {
      mapsTo: 'value',
      scaleType: 'linear'
    },
    bottom: {
      mapsTo: 'key',
      scaleType: 'labels'
    }
  },
  comboChartTypes: [
    {
      type: 'grouped-bar',
      options: {
        bars: { width: 10 },
        color: {
          scale: {
            'Past Year': 'red'
          }
        }
      },
      correspondingDatasets: ['Past Year', 'Current Year']
    },
    {
      type: 'stacked-bar',
      options: {
        bars: { width: 10 },
        color: {
          scale: {
            Paid: 'blue',
            Projected: 'yellow'
          }
        }
      },
      correspondingDatasets: ['Paid', 'Projected']
    }
  ],
  height: '400px',
  width: '100%'
};

[mountpoint]

@bniksa have you resolved this problem? I also have the same trouble

[bniksa]

@mountpoint It is not possible to do it with Carbon charts, but I did a hack around, used a combo chart with 2 bar charts and then did a little css to align everything as i needed it, only problem is you lose tooltips on one of the bar charts cause carbon can't keep track of 2 bar charts, but for my use case it worked, not ideal, but it was the best I could figure out

{
  title: 'Past and Upcoming Payments',
  axes: {
    left: {
      mapsTo: 'value',
      scaleType: 'linear' as ScaleTypes
    },
    bottom: {
      mapsTo: 'key',
      scaleType: 'labels' as ScaleTypes
    }
  },
  comboChartTypes: [
    {
      type: 'simple-bar',
      options: {
        bars: { width: 12 }
      },
      correspondingDatasets: ['Paid Prior Year']
    },
    {
      type: 'stacked-bar',
      options: {
        bars: { width: 12 }
      },
      correspondingDatasets: ['Paid Current Year', 'Projected Future Payments']
    }
  ],
  height: '500px',
  width: '100%',
  color: {},
  tooltip: {
    enabled: false // disabled due to hacking 2 bar charts into 1, carbon does not allow this
  },
  legend: {
    alignment: 'center' as Alignments,
    truncation: { numCharacter: 100 }
  }