RobertN
Posts: 2
Joined: Wed Mar 03, 2021 2:31 pm

Override YTD rangeSelector button behaviour

Hi,

I would like to override YTD button behaviour. Currently clicking on the button sets min date range to 01.01 of the year. However I would like to have 31.12 previous year.

I already tried to override on click event (2018 is hardcoded and perhaps could be changed to calculate it dynamically):

Code: Select all

      type: 'ytd',
      text: 'YTD',
      events: {
        click: function(e) {
          scope.chart.xAxis[0].setExtremes(Date.UTC(2018, 11, 31), Date.now());
          return false;
        }
      }

But there are two problems with such approach:
- YTD button is then not highlighted. As I understand it's perhaps because of "return false", but when returning true, the min date range is not adapted;
- it works only on click event, but there is still a problem with initial button selection which doesn't fire this callback.

I tried also definining xAxis events and override setExtremes or afterSetExtremes callbacks, however the results were nearly the same.

I tried also defining quite new button with providing different type, like 'day' and count = 1, but it also doesn't help.

I would appreciate any help.

Best regards,
Robert
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Override YTD rangeSelector button behaviour

Hello RobertN!

Welcome to our forum and thanks for contacting us with your question!

I suggest creating your own button and setting extremes you want on xAxis using setExtremes method. In the link below you can find an example of how it should be done. :)

API references:
https://api.highcharts.com/highstock/ra ... or.buttons
https://api.highcharts.com/class-refere ... etExtremes
https://api.highcharts.com/highstock/ra ... ents.click

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

Let me know if that was what you were looking for!
Best regards!
Dominik Chudy
Highcharts Developer
RobertN
Posts: 2
Joined: Wed Mar 03, 2021 2:31 pm

Re: Override YTD rangeSelector button behaviour

Hi Dominik,

thanks for your help.

The provided example doesn't exactly help me in my scenario. I need a button that will zoom the data to start of 2009-31-12. I cannot achieve that with your current code.

For this I've did:
- added 2009-12-31 data for both series, to have the data available,
- modified 5 years click callback to zoom at start date 2009-12-31. But as I said in my previous post - it doesn't provide the desired effect because it zooms again to 2009-01-01, not 2009-12-31.

I mentioned in my first post that when you "return true" from click callback and there is a custom date range to set, it's ignored.
Put "return false" then date range is well settled starting from 2009-12-31, but then the button is not highlighted as clicked.

In short - I see that setting extremes is limited to the type and count of the button you are using. I cannot create really custom button and set extremes I want which doesn't fit into predefined "years" or "ytd" in this case.

There is jsFiddle presenting my problem (modified from yours):
https://jsfiddle.net/fs974dvh/1/

Thanks for your time!
Robert
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Override YTD rangeSelector button behaviour

Hi again!

The key here is to set properly the count property and the extremes. In the demo below I've set count property to 9 (on the chart we will see 9 columns) and extremes from 2009 to 2019. I suggest experimenting a little while setting these values because it's tricky.

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

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Stock”