CODEWITHSUNDEEP
google-visualization
전원표
전원표

Reputation: 170

How can I set the number of hAxis text in google chart?

I am drawing the line chart which has date type hAxis. drawing small chart which has many rows(data) make hAxis texts to '...'. I can not explicitly display hAxis text now. How can I solve this problem?

enter image description here

Upvotes: 0

Views: 187

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

when there are many data the text becomes slanted

reduce chartArea.height to provide enough room to display the labels

chartArea.left may need to be adjusted as well, to fully display the first label

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {id: 'Date', type: 'date'},
        {id: 'A', type: 'number'},
        {id: 'B', type: 'number'},
        {id: 'C', type: 'number'},
        {id: 'D', type: 'number'}
      ],
      rows: [
        {c:[{v: new Date(2016, 0, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 0}]},
        {c:[{v: new Date(2016, 1, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 24}]},
        {c:[{v: new Date(2016, 2, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 20}]},
        {c:[{v: new Date(2016, 3, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 48}]},
        {c:[{v: new Date(2016, 4, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 53}]},
        {c:[{v: new Date(2016, 5, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 61}]},
        {c:[{v: new Date(2016, 6, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 63}]},
        {c:[{v: new Date(2016, 7, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 66}]},
        {c:[{v: new Date(2016, 8, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 70}]},
        {c:[{v: new Date(2016, 9, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 75}]},
        {c:[{v: new Date(2016, 10, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 78}]},
        {c:[{v: new Date(2016, 11, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 80}]},
        {c:[{v: new Date(2017, 0, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 85}]},
        {c:[{v: new Date(2017, 1, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 90}]}
      ]
    });

    var options = {
      chartArea: {
        left: 52,
        height: '50%'
      },
      hAxis: {
        format: 'MMM dd, yyyy'
      },
      height: 200,
      legend: 'none',
      title: 'Example',
      width: 240
    };

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

Upvotes: 1

Related Questions