Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change series order in stacked charts

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

like image 896
meso_2600 Avatar asked Jul 01 '19 10:07

meso_2600


People also ask

How do I change the order of a stacked chart in Excel?

Under Chart Tools, on the Design tab, in the Data group, click Select Data. In the Select Data Source dialog box, in the Legend Entries (Series) box, click the data series that you want to change the order of. Click the Move Up or Move Down arrows to move the data series to the position that you want.


1 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.

like image 170
WhiteHat Avatar answered Nov 15 '22 09:11

WhiteHat