Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does the maxLines option not apply for the legend on a Stacked Bar Google Chart at the bottom?

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);
    }
like image 862
John Pasquet Avatar asked Aug 03 '15 19:08

John Pasquet


People also ask

How do I hide the legend in my Google chart?

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.

What is legend in Google Chart?

The legend describes the data in the chart.

How do you show no data available on Google chart?

Use noData() method to enable "No data" label: chart. noData().

How do I change the color of my Google bar graph?

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.


1 Answers

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

like image 186
John Pasquet Avatar answered Sep 22 '22 09:09

John Pasquet