All geek questions in one place

Legends Google Chart Position Not Working

It drives me crazy. I can’t make the legend move at all. This creates a chart with the legend in it by default on the right.

I obviously have a legend position declared as "lower", but it does not work. But this is exactly what the documents 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>
Run codeHide result
+4
source share
2 answers

legend.position: ['top', 'bottom']- this is just a couple of many parameters that do not work on material diagrams

See Tracking problems for material specifications. Parity parameter # 2143 for an extensive list

however, these options will work on the base chart ...

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

→ google.charts.Bar - → packages: ['bar']

,

theme: 'material'

. , ...

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>
Hide result
+4

{position: 'left'} , : 'bottom' .

guthub , : https://github.com/google/google-visualization-issues/issues/1964

+1

Source: https://habr.com/ru/post/1659528/

More articles:


All Articles