Search code examples
chartsgoogle-sheetsgoogle-visualization

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


Solution

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