Empty zone at chart area

[maksymozymok]

Hello, I develop a few buttons, which are connected to HighchartsAPI and placed on the chart area.
I need to reserve an empty zone at the right (40px for example) to place there my buttons and allow the user to fully interact with the chart.

These buttons are placed absolutely on the right side, the chart doesn't know about existing of these buttons.
Sometimes the chart line is under buttons, it's a bad user experience.

The solution to add nullable points is bad because this wrapper will be reused for different charts with different data.
Here you can check the screenshot https://postimg.cc/Y4PHMDnC
NOTE: ma

It's important to make it in a clear and stable way. Also, I have a Panning button, after panning the empty right zone should be like the initial (40px).

Does Higcharts provide API to make it work? Do you have any ideas on how to achieve the expected result?

[jakub.j]

Thanks for contacting us with your question!

To reserve space on the right side of the xAxis, you can use xAxis.maxPadding. The space is set relatively to length of the xAxis, so for it to be responsive you can change it in responsive.

I prepared a chart with all those properties, please check it out:
Demo: https://jsfiddle.net/BlackLabel/q9or1gfn/

Let me know if you have any further questions!
Best regards
Jakub

[maksymozymok]

Partially maxPadding helped me.
On the initial screen it's OK, after zoom in/zoom out it's OK, but after Panning it's NOT OK.

It's because panning takes min-max values of the data and doesn't include our padding.
I provide a video here https://www.veed.io/view/8c1993ee-1a0e- ... anel=share. Can we somehow fix it?

[jakub.j]

Hey!

Max padding only works for the initial state.
If you want it to work with panning, there is a solution, but it's not perfect, so we can call it a workaround, see:

Demo: https://jsfiddle.net/BlackLabel/bjfma0qn/

I hope you will find it useful
Best regards
Jakub

[graphicequaliser]

You could try setting the CSS style property z-index to a high number to keep your buttons on top of the chart. There's also support for zIndex in the JSON of HighCharts, certainly on plotLines.

[jakub.j]

Thanks for contacting graphicequaliser!

I think Maksym has already set his zIndex and that's not what he wants to do now, because the requirement is to have blank space for the buttons.

Otherwise, thanks for sharing your thoughts!
Best regards
Jakub

[maksymozymok]

Jakub, I checked the workaround, and it won't help me. Basically, it's what I need, but there are issues with Zoom, after our "custom" panning, my charts don't have any animation, and when I use a workaround there are some blinks in panning and Zoom. There are no more options, how to process it?

[jakub.j]

Hey!

A more simple way to create the space would be to set chart.marginRight.

Demo: https://jsfiddle.net/BlackLabel/0b7o3knz/

I hope you will find it useful
Best regards
Jakub

[maksymozymok]

Thank you, I will take a look

[jakub.j]

You're welcome.

Let me know if you have any further questions!
Regards
Jakub