I've a line chart with 3 lines where I'm displaying daily wise data. When I've more data say I've data from October 2019 (for all days) till today, the h-axis labels are getting removed/disappearing. Initially I can see the h-axis labels and as the chart continues drawing further the labels are disappearing.
Below given is my chart code:
google.charts.load('current', {
packages: ['corechart']
});
google.setOnLoadCallback(prepareChartData);
function prepareChartData(){
var chartData = new google.visualization.DataTable();
chartData.addColumn('date', 'Date');
chartData.addColumn('number', 'Total');
chartData.addColumn('number', 'Dogs');
chartData.addColumn('number', 'Cats');
title = 'My Chart';
var options = {
title: title,
curveType: 'function',
legend: {position: 'bottom', alignment: 'start'},
colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],
annotations: {
alwaysOutside: true,
textStyle: {
color: 'black',
fontSize: 11
},
},
hAxis: {
format: 'MMM yy',
viewWindowMode: "explicit",
},
vAxis: {
minValue: 0,
viewWindowMode: "explicit",
viewWindow: { min: 0 },
title: ''
},
titleTextStyle: {
color:'#3a3a3a',
fontSize:24,
bold:false
// fontName: "Segoe UI"
},
bar: {groupWidth: '95%'},
bars: 'horizontal'
};
var chartDivId = "chart_div";
var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
var rawData =[];
var chart_object = { "Dec 19": {monthLabel: "Dec", chartArray:[{'date': "2019-12-31", 'total': "5", 'cats': "10", 'dogs': "10"}]},"Jan 20": {monthLabel: "Jan", chartArray:[{'date': "2020-1-01", 'total': "5", 'cats': "10", 'dogs': "10"}]},"Feb 20": {monthLabel: "Feb", chartArray:[{'date': "2020-2-29", 'total': "5", 'cats': "10", 'dogs': "10"}]}, "Mar 20": {monthLabel: "Mar", chartArray:[{'date': "2020-3-01", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-03-12", 'total': "15", 'cats': "30", 'dogs': "30"}]}};
$.each(chart_object, function(i, chartobject) {
$.each( chartobject.chartArray, function( chartIndex , chartValue ){
date = chartValue['date'];
total = parseInt(chartValue['total']);
catscount = parseInt(chartValue['cats']);
dogscount = parseInt(chartValue['dogs']);
catspercentage = 0;
catspercentageAnnotation = catscount+", percent "+catspercentage+"%";
dogsspercentage = 0;
dogsspercentageAnnotation = dogscount+", percent "+dogsspercentage+"%";
rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);
});
});
var counter = 0;
drawChart();
function drawChart() {
if(counter < rawData.length){
chartData.addRow(rawData[counter]);
// build x-axis ticks to prevent repeated labels
var dateFormat = new google.visualization.DateFormat({
pattern: 'yyyy-MM-dd'
});
var dateRange = chartData.getColumnRange(0);
var ticks = [];
var dateTick = dateRange.min;
while (dateTick.getTime() <= dateRange.max.getTime()) {
if (ticks.length === 0) {
// format first tick
ticks.push({
v: dateTick,
f: dateFormat.formatValue(dateTick)
});
} else {
ticks.push(dateTick);
}
dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);
}
options.hAxis.ticks = ticks;
chart.draw(chartData, options);
counter++;
window.setTimeout(drawChart, 1000);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm adding chart images. In the images you can see the h-axis labels getting disappearing.
I think the labels are disappearing as there is no space. How can I add minimum width for haxis labels?
Can anyone help me to find the issue? Thanks in advance.
try using the following option to increase the space at the bottom of the chart.
chartArea: {
bottom: 80
},
this should allow the labels to print on two lines...