reactjstypescriptchartsgoogle-visualizationreact-google-charts

react-google-charts for dual-Y stacked bar charts

I am trying to build the below bar chart.

My data are in the format :

[ month , region , totalSalesForCompanyA, totalSalesForCompanyB ]

I can successfully build the below charts :

What I want is to combine the above and include region. So end goal is to have :

Is that possible using react-google-charts? I am reading on ComboChart but I am not sure if that's the one I need. Using Bar Chart it doesn't look like that's possible.

Apologies for the no code post - will add code samples if ComboChart is indeed the one to go for. Thanks!

EDIT : I found that react-vis has something as per : uber.github.io/react-vis/examples/showcases/plots -> Clustered Stacked Vertical Bar Series - was wondering if google charts have something similar

EDIT 2 :

I am looking for something like this :enter image description here

So having a dimension on X axis - Quarters. Then have 2 Y-columns - each of which is stacked. Those 2 Y-columns are presented side by side.

Solution

  • it is possible to have multiple stacks in google charts.
    but it is only available using google's material bar chart,
    it is not possible using the classic bar / column chart.

    classic = google.visualization.ColumnChart & package = 'corechart'
    material = google.charts.Bar & package = 'bar'

    the issue with material charts, there are several options that are not supported,
    which can be found here...
    Tracking Issue for Material Chart Feature Parity #2143

    for starters, the data table needs to be structured as follows...
    for two stacks, side-by-side, you will need 5 columns in the data table.
    first, the x-axis, the remaining four for the two stacks.

    ['Qtr', 'Stack 1 - Apples', 'Stack 1 - Oranges', 'Stack 2 - Apples', 'Stack 2 - Oranges'],
['Q1', 500, 1200, 816, 200],
['Q2', 163, 231, 539, 594],
['Q3', 125, 819, 200, 578],
['Q4', 197, 536, 613, 500]

    next, in order to get multiple stacks, we need to move "Stack 2" to a separate y-axis.
    this can be done in the options, using series[series number].targetAxisIndex

    series: {
  2: {  // third data table column -- 'Stack 2 - Apples'
    targetAxisIndex: 1
  },
  3: {  // fourth data table column -- 'Stack 2 - Oranges'
    targetAxisIndex: 1
  }
},

    the default y-axis is axis index 0, whereas the second y-axis is index 1
    stack 2 needs to be set to the same, second axis

    following is a working example (though not react)...

    google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Quarter');
  data.addColumn('number', 'Stack 1 - Apples');
  data.addColumn('number', 'Stack 1 - Oranges');
  data.addColumn('number', 'Stack 2 - Apples');
  data.addColumn('number', 'Stack 2 - Oranges');
  data.addRows([
    ['Q1', 500, 1200, 816, 200],
    ['Q2', 163, 231, 539, 594],
    ['Q3', 125, 819, 200, 578],
    ['Q4', 197, 536, 613, 500]
  ]);

  var options = {
    chart: {
      title: 'Multiple Stacks'
    },
    height: '100%',
    isStacked: true,
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      }
    },
    width: '100%'
  };

  var container = document.getElementById('chart');
  var chart = new google.charts.Bar(container);

  drawChart();
  window.addEventListener('resize', drawChart, false);
  function drawChart() {
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
});
    html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

    note: for material charts, you should always convert the options before drawing the chart, see above example...

    google.charts.Bar.convertOptions(options)