Google chart increase the y axis width increase

2019-03-04 10:41发布

问题:

how to increase Google chart y axis width. pls find the image. left side full text was not comes properly. please guide me. how to increase Google chart y axis width

回答1:

need to adjust the size of the chart and chartArea in the options

to leave room for the y-axis labels on left, use chartArea.left

to leave room for the title on top, use chartArea.top

see following example, added colors to highlight each area...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Category', 'Score'],
      ['APPLYING LEADERSHIP TECHNIQUES', 40],
      ['ASSERTIVENESS', 30],
      ['COACHING, COUNSELING, TEACHING', 10],
      ['CONFLICT MANAGEMENT', 20]
    ]);

    var options = {
      // adjust chart size
      height: 600,
      width: 800,
      chartArea: {
        // adjust chart area size
        left: 300,
        top: 40,
        height: 500,
        width: 480,
        backgroundColor: 'magenta'
      },
      backgroundColor: 'cyan',
      colors: ['lime'],
      legend: {
        position: 'bottom'
      },
      title: 'Title'
    };

    var chart2 = new google.visualization.BarChart(document.getElementById('barchart_core'));
    chart2.draw(data, options);
  },
  packages: ['bar', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_core"></div>