CODEWITHSUNDEEP
reactjstypescriptchartsgoogle-visualizationreact-google-charts
ghostrider
ghostrider

Reputation: 5259

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.

Upvotes: 1

Views: 1368

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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)

Upvotes: 1

Related Questions