I'm implementing a Stacked Bar Google Chart. I have found that when my categories span more than one line and the legend is at the top, the legend will wrap to multiple lines, controlled by the maxLines option on the hAxis variable.
However, if I move the legend to the bottom, the legend no longer wraps, but gives a paged view of the categories. This is the same behavior when the legend is on the top and the maxLines option is set to 1.
Here's my fiddle. The top graph has the legend on the top, and the bottom one has the legend on the top... I did that to make it easy...
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 20, 30, 20, 15, 5, ''],
]);
var options = {
width: 550,
height: 160,
chartArea: {height: '45%' },
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '55%' },
hAxis: { maxValue: 100, ticks: [0, 25, 50, 75, 100] },
isStacked: true
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
var chart2 = new google.visualization.BarChart(document.getElementById('chart2_div'));
options.legend.position = "bottom";
chart2.draw(data, options);
}
The Legend is hidden by setting the legend property to none in the Google Chart Options. title: 'USA City Distribution', legend: 'none' // Hides the Legend.
The legend describes the data in the chart.
Use noData() method to enable "No data" label: chart. noData().
To change the colors assigned to data series in a specific chart: Select that chart, then on the right, open the STYLE tab. In the Color by section, select Series order, Bar order, or Slice order, depending on the type of chart. Click a color box to set the color for each series.
Ugh... Just found this on Google's site:
Maximum number of lines in the legend. Set this to a number greater than one to add lines to your legend. Note: The exact logic used to determine the actual number of lines rendered is still in flux.
This option currently works only when legend.position is 'top'.
Type: number Default: 1
https://developers.google.com/chart/interactive/docs/gallery/linechart
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