CODEWITHSUNDEEP
highcharts
amit sijaria
amit sijaria

Reputation: 23

Highchart Date time interval in x-Axis

I have line chart as shown in below image enter image description here I'm using below code to set x-Axis label: 

xAxis: [ 
{
type: 'datetime',
dateTimeLabelFormats:{
day: '%d %b %Y'    //ex- 01 Jan 2016
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
labels: {
rotation: -45
}
}
]

Is there any way to show Date along with Time interval in x-Axis? Currently it is showing only time in x-Axis.

Upvotes: 1

Views: 3001

Answers (1)

Ouss
Ouss

Reputation: 3855

For a datetime axis, the scale will automatically adjust to the appropriate unit. dateTimeLabelFormats only defines how the chart will represent that scale.

If you want to force the xAxis to show the entire date, you have to specify the format of the labels of the xAxis that in the labels as following:

xAxis: [{
 type: 'datetime',
 dateTimeLabelFormats:{
  day: '%d %b %Y'    //ex- 01 Jan 2016
 },
 startOnTick: true,
 endOnTick: true,
 showLastLabel: true,
 labels: {
  rotation: -45,
  //Specify the formatting of xAxis labels:
  format: '{value:%Y-%m-%d %H:%M}'},

 }
}]

You can read more here: https://api.highcharts.com/highcharts/xAxis.labels.format

You can also test it here (add format: '{value:%Y-%m-%d}') for example): https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/datetimelabelformats/

Upvotes: 4

Related Questions