Change series order in stacked charts

user_665967 0
Viewed 15389

When I use any of the stacking modes, suddenly series are not in their original order (values from the columns from left to right).

I have found this description on https://developers.google.com/chart/interactive/docs/gallery/barchart :

If set to true, stacks the elements for all series at each domain value. Note: In Column, Area, and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (E.g. series 0 will be the bottom-most legend item). This does not apply to Bar Charts.

Which is actually not true (or maybe I am doing something wrong here), because I am really interested in stacked bars. Please check the screenshot below.

Is there any way of changing the order in stacked charts?

No stacking, series are in the correct order:

No stacking, series are in correct order

Stacked. Series are out of order/reversed order:

Stacked. Series are out of order/reversed order

google-sheets google-visualization charts
2 Answers

strange, wanted to look at this question because never noticed legend being reversed before.

I realize this is the script version and not on a sheet,
but typically, both work the same.

however here,
the legend is reversed when in default position on the right, as expected.
but legend appears as desired when moved to the top.
see following working snippets...

legend at right

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var options = {
    isStacked: true,
    
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      left: 32,
      right: 128,
      bottom: 32
    },
    height: 400,
    width: '100%'    
  };
  var dataTable = google.visualization.arrayToDataTable([
    ['Date', 'Series 1', 'Series 2', 'Series 3'],
    ['04/01/2019', 40, 13, 20],
    ['16/01/2019', 50, 15, 33],
    ['28/01/2019', 60, 20, 10],
    ['09/02/2019', 43, 7, 6]
  ]);
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

legend at top 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var options = {
    isStacked: true,
    legend: {
      alignment: 'center',
      position: 'top'
    },
    
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      left: 32,
      right: 128,
      bottom: 32
    },
    height: 400,
    width: '100%'    
  };
  var dataTable = google.visualization.arrayToDataTable([
    ['Date', 'Series 1', 'Series 2', 'Series 3'],
    ['04/01/2019', 40, 13, 20],
    ['16/01/2019', 50, 15, 33],
    ['28/01/2019', 60, 20, 10],
    ['09/02/2019', 43, 7, 6]
  ]);
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

note: I checked previous, older versions of google charts, all worked the same.

user_50907710

Try putting data for the in reverse order that you want? This has helped me

user_141438490
Related