I use the Google Charts API to create this chart:
Chart #1:
But I have a problem: the order of the legend
is not correct .
According to the code, I have set this order:
- Loaded
- not loaded
- Budget
But, despite doing several tests, I can't order them legends
as needed; In addition, the colors that the graph has are the ones required.
The expected result should be like this:
Chart #2:
How can I modify the graph code to get the expected result?
NOTE: Chart #2 was made with DevExpress
dxChart
, but due to changes in requirements and browser compatibility, we chose to use the Google Charts API.
Here is the full code for chart #1 - using the Google Charts API :
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
/*var data = google.visualization.arrayToDataTable([
['SERIES', 'Cargado', 'No cargado', 'Presupuesto'],
['Afiliaciones', 100, 9, null],
['Presupuesto', null, null, 417]
]);*/
var data = new google.visualization.DataTable();
data.addColumn('string', 'SERIES');
data.addColumn('number', 'Cargado');
data.addColumn('number', 'No Cargado');
data.addColumn('number', 'Presupuesto');
data.addRows([
['Afiliaciones', 100, 9, 0],
['Presupuesto', 0, 0, 417]
]);
// Set chart options
var options = {
isStacked: true,
};
var options = {
legend: {
position: 'right'
},
chartArea: {
right: 180, // set this to adjust the legend width
left: 60, // set this to adjust the left margin
},
isStacked: true,
colors: [
'#FFA726',
'#EF5350',
'#6582ba'
]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 706px; height: 311px;"></div>
Unfortunately the ones
legends
in the graph cannot be sorted, since (according to the documentation ) , when the property is appliedisStacked: true
, thelegends
ones are inverted to better match the series.I quote:
A partial solution according to this source is:
However, the change does not seem to affect the order of the
legends
.In short, I did not find a better solution than to only establish the colors of the series/columns as requested and the order of them
legends
is acceptable for the fulfillment of the requirement.