CODEWITHSUNDEEP
highcharts
Amani Ben Azzouz
Amani Ben Azzouz

Reputation: 2565

Highcharts : how to display only days on xaxis?

I'am using highstock to display my data. The ticks on the xaxis have to show only days for a week range time. The problem I'am facing in this example (see fiddle) is that the first tick is presenting hours, I want only to show days and no hours in the xaxis, is there any way to achieve that ? I set startOnTick attribute to true

xAxis: {
   startOnTick: true,
}

So now the chart starts with a day but the first tick still an hour value is there a way to move the first tick to the chart origin (0,0) coordinates?

Upvotes: 0

Views: 1314

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

It is not enough to set the format for milliseconds. In API we can read:

For a datetime axis, the scale will automatically adjust to the appropriate unit. This member gives the default string representations used for each unit. For intermediate values, different units may be used, for example the day unit can be used on midnight and hour unit be used for intermediate values on the same axis.

You need to define dateTimeLabelFormats for more units or use formatter function for labels.

xAxis: {
  ...,
  dateTimeLabelFormats: {
    millisecond: '%b %e',
    second: '%b %e',
    minute: '%b %e',
    hour: '%b %e',
    day: '%b %e',
    week: '%b %e',
    month: '%b %e',
    year: '%b %e'
  }
}

Live demo: https://jsfiddle.net/BlackLabel/5r1v8tLo/

API Reference:

https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats

https://api.highcharts.com/highcharts/xAxis.labels.formatter

Upvotes: 1

Related Questions