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

Question

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?

Answer 1

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>