You can increase tickInterval parameter
Highcharts line charts not displaying all the dates
-
09-07-2023 - |
Question
I have a line chart that displays the data from a Google Spreadsheet, the datetime data is being updated every 3 to 4 seconds and I want the chart to only display some of it, like the hour for example. I can't use any of the highstocks funcionalities because it doesn't support the Google Spreadsheet service, at least that I know and feeding the CSV or JSON to highchart doesnt update automatically. Again, as far as I know.
So I'm stuck with Highcharts line chart, but I dont want the X axis to look so crowded. Take a look at the fiddle. http://jsfiddle.net/AYYCv/167/light/ And there's only little data.
Highcharts.setOptions({
chart: {
zoomType: 'x'
},
plotOptions: {
series: {
visible: false,
}
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FFFFFF',
borderColor: 'white',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
},
title: {
text: 'Produccion de Energía Solar'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Magnitud'
}
}
});
$('#container4').highcharts({
data: {
googleSpreadsheetKey: '0Aj8kPfvDA7mOdHpVMDVFbktmM0E4YjFIUkVUVC1RYlE'
},
plotOptions: {
series: {
visible: false
}
}
function(chart) {
chart.series[0].show();
});`
Solution
OTHER TIPS
Change the XAxis like this... It will rotate labels to specified degrees
xAxis: {
type: 'datetime', labels:{rotation: -40}
},
Thisl link helps for date formating http://api.highcharts.com/highstock#xAxis.dateTimeLabelFormats