mayag
Posts: 23
Joined: Thu Dec 15, 2022 9:58 am

customize X axis

Hi,

I would like to know if there is a way to customize the X axis for my needs which include
- The position of the X axis will be at the top
- in X axis instead of assigning an exact date, display the name of the month
- For each point in I would like to add an icon


https://jsfiddle.net/zkujeysa/9/

Thanks, Maya.
jakub.s
Posts: 1167
Joined: Fri Dec 16, 2022 11:45 am

Re: customize X axis

Hi Maya,

Welcome to our forum and thanks for the question!

Sure, you can achieve the first two steps by using xAxis.opposite and the xAxis.labels.formatter properties.

API Reference:
- https://api.highcharts.com/highcharts/xAxis.opposite
- https://api.highcharts.com/highcharts/x ... .formatter

Demo: https://jsfiddle.net/jakubSzuminski/stw2udjm/

If you want to set custom icons for each point, see the demo here: https://jsfiddle.net/jakubSzuminski/uatbjn51/1/

Feel free to contact us if you have any more questions!

Jakub
Jakub
Highcharts Developer
mayag
Posts: 23
Joined: Thu Dec 15, 2022 9:58 am

Re: customize X axis

Thank you for your answer!

I have following question:
- how can i call 'reset zoom' btn from outside?
- can i enter customs html between the x axis (opposite) and the chart itself?
- is it possible that as the user zoom in the date will also zoom in, instead of showing the month name it will also show the day date?


Thanks, Maya.
jakub.s
Posts: 1167
Joined: Fri Dec 16, 2022 11:45 am

Re: customize X axis

Hi Maya,

1. You can use the chart.zoomOut() method. See the demo here: https://jsfiddle.net/jakubSzuminski/dpwk5y0h/
API Reference: https://api.highcharts.com/class-refere ... rt#zoomOut

2. There are a few ways you can achieve this:

- You can set an xAxis.offset which will create distance between the xAxis and the plot. Then, you can create an HTML element with your content and position it manually to be in the empty space. For this solution see this demo: https://jsfiddle.net/jakubSzuminski/y4bsx6e2/

- You can use the chart.renderer.text with useHTML flag to render HTML code in the chart. For this solution see this demo: https://jsfiddle.net/jakubSzuminski/9h5wL87b/

3. Zooming in or out causes xAxis.events.afterSetExtremes event to run. In this event, you have access to the chart object and you can update the xAxis.labels.formatter to a function which displays not only months but also days. See the demo here: https://jsfiddle.net/jakubSzuminski/y2uq0e98/1/

Do not hesitate to contact us if you have any more questions!

Best regards,
Jakub

Return to “Highcharts Stock”