Select weekdays data using range selectors for last two days

[nishikantparmariam2]

Hi,
My x-values contain only week days data and when I click last 2 days button, my intention is to see last two weekdays data.

Reproducer - https://jsfiddle.net/gyd2n6L3/

On clicking `2D` button, only single data point for Monday is shown, I want to change it to show Friday and Monday both. How do I achieve this?

Thanks!

[dawid.d]

Hello,

Thanks for this question!

This is all because you are using the xAxis.ordinal option here, which is enabled by default in stock. Therefore, there is more time between weekend ticks than between other ticks, despite equal visual distances. If you want the range selector to select more than 2 days when your right handle position is in a weekend, you can do it with a custom implementation, as in the demo below.

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

I hope it was helpful,
Best regards

[nishikantparmariam3]

Hi, thanks for the reply. I implemented a custom callback that chooses last X days from the given input series data instead of last X days of the calendar. But I am facing an issue that the buttons are not getting highlighted when I click them - seems to happen because Highcharts still thinks that - that button should not be highlighted due to the current range selected (in events.click).

Reproducer: https://jsfiddle.net/yfhgpu2s/
See this gif: https://i.postimg.cc/L5q4R5m3/select-behavior.gif

Is there a way to make the buttons highlighted when I click that button? It could also happen that some other button (due to default nature) gets highlighted when I clicked my custom button, in that case, how to prevent that also?

Thanks!

[dawid.d]

Hi,

A workaround I found is to call `setState` on an SVG element representing a button, with the first argument set to 2.

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

Best regards

[nishikantparmariam3]

Thanks, that worked!