javascript - Google Graphs: Unable to customize legend positions and chartArea for Line Graphs -

below link trying customize chartarea , legends position. unable change. point out went wrong?

[http://jsfiddle.net/2h7sp/488/][1]

google.load("visualization", "1", { packages: ["corechart", "line"] });  google.setonloadcallback(drawchart);  function drawchart() { var data = google.visualization.arraytodatatable([     ['year', 'sales', 'expenses'],     ['november', 1000, 400],     ['december', 1170, 460],     ['january', 660, 1120],     ['february', 690, 1120],     ['march', 780, 1120],     ['april', 820, 1120],     ['may', 660, 1120],     ['june', 1030, 540] ]);  var options = {     title: '',     backgroundcolor: 'none',     legend: { position: 'none' },     haxis: {         title: 'year',         titletextstyle: {             color: 'grey'         }     },     chartarea: {         left: 20,         top: 10,         width: 10,         height: 50     } };  var chart = new google.charts.line(document.getelementbyid('chart_div')); chart.draw(data, options); } 

there several options not work in material charts
google.charts.line

others work when convert options
google.charts.line.convertoptions
didn't seem make difference here

recommend using core chart
google.visualization.linechart

see following working snippet, draws both charts...

google.load("visualization", "1", { packages: ["corechart", "line"] });  google.setonloadcallback(drawchart);    function drawchart() {    var data = google.visualization.arraytodatatable([        ['year', 'sales', 'expenses'],        ['november', 1000, 400],        ['december', 1170, 460],        ['january', 660, 1120],        ['february', 690, 1120],        ['march', 780, 1120],        ['april', 820, 1120],        ['may', 660, 1120],        ['june', 1030, 540]    ]);      var options = {        title: '',        backgroundcolor: 'none',        legend: { position: 'none' },        haxis: {            title: 'year',            titletextstyle: {                color: 'grey'            }        },        chartarea: {            left: 20,            top: 10,            width: 10,            height: 50        }    };      // material    var chart = new google.charts.line(document.getelementbyid('chart_div'));    chart.draw(data, google.charts.line.convertoptions(options));      // core chart    var chart1 = new google.visualization.linechart(document.getelementbyid('chart_div1'));    chart1.draw(data, options);  }

<script src="https://www.google.com/jsapi"></script>  <div>material chart</div>  <div id="chart_div"></div>  <div>core chart</div>  <div id="chart_div1"></div>