Change google charts options not working

Question

I've created a google chart and the data is pulled from a database and structured to meet the requirements of the chart, however, for some reason, whenever I try change the options for the chart it just wont work. I need to move the legend to below the chart and make the point size on the chart 30 pixels.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['line']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Aspect');
      data.addColumn('number', 'Leaner');
      data.addColumn('number', 'Norm');
      data.addColumn('number', 'Grade');

      data.addRows([['Agility ', 11.5, 10, 11.5]]);
      var options = 
      {
        legend: { position: 'bottom' },
        chart: {title: 'Student Results'},
        legend:{position: 'bottom', textStyle: {color: 'black', fontSize: 16}},
        pointSize:30,
      };

      var chart = new google.charts.Line(document.getElementById('line_chart'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
</script>

<div id="line_chart" style='width:calc(100% - 80px); height:400px; margin:auto;'></div>

Any suggestions on why the legend wont move or point size wont change, the chart data can have many aspects (x axis value), I need to point-size to change so that it wont look blank with just a aspect (x axis value)

Answer 1

there are several options that simply don't work in Material charts

and it appears Line requires two data points per series before drawing anything

I would recommend using 'corechart' instead

there is an option for theme: 'material' to get the base look and feel close to a Material chart

see following working snippet...

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('string', 'Aspect'); data.addColumn('number', 'Leaner'); data.addColumn('number', 'Norm'); data.addColumn('number', 'Grade'); data.addRows([['Agility 1', 11.5, 10, 11.5]]); var options = { chartArea: { width: '90%' }, height: 600, legend: { position: 'bottom', textStyle: { color: 'black', fontSize: 16 } }, pointSize: 30, theme: 'material', title: 'Student Results', vAxis: { viewWindow: { min: 0, max: 15 } }, width: '100%' }; var chart = new google.charts.Line(document.getElementById('line_chart')); chart.draw(data, google.charts.Line.convertOptions(options)); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }, packages:['line', 'corechart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div>Core Chart</div> <div id="chart_div"></div> <div>Material Chart</div> <div id="line_chart"></div>