Google Charts Legend Position Not Working

Asked 1/11, 2016 at 14:37 Answered 1/11, 2016 at 19:5

Solved javascript charts google-visualization

This is driving me nuts. I can't get the legend to move at all. This produces a chart with the legend in it's default location on the right.

I clearly have legend position declared as "bottom" but it's not working. Yet this is exactly what the docs say.

google.charts.load('current',{'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
  ['Smith',		35,		{v: -.1126,   f: '-11.26%'} ],
  ['Chalk',		53,		{v: -.0126,   f: '-1.26%'}  ],
  ['Hank',		84,		{v: -.0252,   f: '-2.52%'}  ],
  ['Jordan',	46, 	{v: .0688,    f: '6.88%'}   ],
  ['Bernie',	1,  	{v: 0,        f: '-'}       ],
  ['Ralph',		105,	{v: -.0548,   f: '-5.48%'}  ]
]);

var options = {
  series: {
    0: {axis: 'Quotes'},
    1: {axis: 'Percent'}
  },
  axes: {
    y: {
      Quotes: {label: 'Subdmission Count'},
      Percent: {label: '% Percent'}
    }
  },
  legend: { 
    position : 'bottom'
  }
};

var table = new google.charts.Bar(document.getElementById('table1'));

table.draw(data, options);
}

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id='table1'></div>
</body>

</html>

Boaten answered 1/11, 2016 at 14:37 Comment(0)

legend.position: ['top', 'bottom'] -- are just a couple of the many options that don't work on material charts

see Tracking Issue for Material Chart Feature Parity #2143 for an extensive list

however, these options will work on a core chart...

core --> google.visualization.ColumnChart -- using --> packages: ['corechart']

material --> google.charts.Bar -- using --> packages: ['bar']

there is also an option to get a core chart close to the look & feel of material

theme: 'material'

see following working snippet using core chart instead...

google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
  ['Smith',		35,		{v: -.1126,   f: '-11.26%'} ],
  ['Chalk',		53,		{v: -.0126,   f: '-1.26%'}  ],
  ['Hank',		84,		{v: -.0252,   f: '-2.52%'}  ],
  ['Jordan',	46, 	{v: .0688,    f: '6.88%'}   ],
  ['Bernie',	1,  	{v: 0,        f: '-'}       ],
  ['Ralph',		105,	{v: -.0548,   f: '-5.48%'}  ]
]);

var options = {
  chartArea: {
    height: '56%'
  },
  series: {
    1: {
      targetAxisIndex: 1
    }
  },
  hAxis: {
    title: 'Name'
  },
  vAxes: {
    0: {
      title: 'Submission Count'
    },
    1: {
      title: '% Percent'
    }
  },
  theme: 'material',
  legend: { 
    position : 'bottom'
  }
};

var table = new google.visualization.ColumnChart(document.getElementById('table1'));

table.draw(data, options);
}

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id='table1'></div>
</body>

</html>

Spencerianism answered 1/11, 2016 at 19:5 Comment(0)

{position: 'left'} works fine in your example, so the only option left is that 'bottom' this is not supported.

Similar discussion on guthub mentions that it is not supported for another chart type and not planned to be implemented: https://github.com/google/google-visualization-issues/issues/1964

Edra answered 1/11, 2016 at 14:50 Comment(0)

Recommended topics

Hot tags