dynamic formatting of dates in x-axis based on view

[dizzy]

Hi,
is it possible to format dates in the x-axis based on who much data im viewing (i.e. multi-year, vs year, vs month)

For example, if im viewing data that spans multiple years, i'd like to see something like this:

chart1.png (38.57 KiB) Viewed 1562 times

On the other hand, if im viewing less data such that i can see individual day series points, then i'd like this view:

chart2.png (10.36 KiB) Viewed 1562 times

returns.png (25.92 KiB) Viewed 1562 times

any assistance or guidance would be appreciated.

[hubert.k]

Hello dizzy!
Thanks for contacting us with your question!

To control date time labels format you can use a property xAxis.dateTimeLabelFormats. If you set it as you would like, the scale will automatically adjust to the appropriate unit, check the very simple demo below to see an example.

Demo: https://jsfiddle.net/BlackLabel/c7k31pjw/
API Reference: https://api.highcharts.com/highcharts/x ... belFormats

Regards!

[dizzy]

Thanks. i will try this

[hubert.k]

You're welcome! In case of any further questions, feel free to contact us again.

[dizzy]

what i would like to here is this logic.
1. if the chart is displaying days and months, display days only (%e), EXCEPT for the first date of the month being rendered- in that case display the month in bold (<b>%b%</b>)
2. if the chart is displaying years and month, display months as %b, except for January(or first month of the year being displayed), which i would display as <b>%y</b>

This requires some logic it feels like. i think we could write a customformatter and assign that to dateTimeLabelFormats..but how would i pass data to it to know
1. what is he current x-axis date being rendered
2. is the chart currently printing days + months or months + years

[hubert.k]

dizzy, yes, you can use a labels.formatter callback function to add some more text to labels based on conditions.

1) You can get it from this.value object inside labels.formatter callback function, it is a number, so you will have to format it to the date format.
2) I think, the easiest way is to check the this.dateTimeLabelFormat if it match a specific string.

Demo: https://jsfiddle.net/BlackLabel/5yLbhqck/
https://api.highcharts.com/highcharts/x ... .formatter

Let me know if that was what you were looking for.
Regards!

[dizzy]

thanks. i will try this callback.

[hubert.k]

You're welcome! In case of any further questions, feel free to contact us again.