I am using highcharts in my projects and it shows me date twice in the x-axis, How can I remove it and get only 1 Date in the x-axis.
Here is the snapshot of how it looks like right now
How can I get rid of the double date display.
EDIT: Adding the options for the chart
These are the options I am using
chart: {
renderTo: divId,
type: 'column'
},
title: {
text: chartTitle
},
tooltip: {
shared: true
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y-%m-%d}',
rotation: 45,
align: 'left'
},
title: {
text: 'Date'
}
},
yAxis: {
min: 0,
title: {
text: ''
},
max: 1440,
stackLabels: {
enabled: false
}
},
legend: {
backgroundColor: 'rgba(211,223,181,0.6)',
layout: 'vertical',
align: 'left', verticalAlign: 'top',
floating: true,
borderWidth: 0, x: 70
}
This usually happens when you have multiple dates or multiple ticks within the same day/week/month etc, and the formatter is set to return only the day/week/month etc. Try specifying a
tickInterval
value and thedateTimeLabelFormats
object in your x-axis options:Bear in mind that if you are telling the chart to return the day on the x axis, and your
tickInterval
is hourly, all of the ticks within that day are going to have identical labels.