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:
Stacked. Series are out of order/reversed order:
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With