How to force day grouping on dropdown select

[DoumiLo]

Hi,

I have an Highcharts Stock graph with 4 different grouping buttons: by Day, by Week, by Month and by Year.

I have also a dropdown list outside of Highcharts that allows to determine different periods on the graph with SetExtremes.

When the user is selecting one of the options, the graph should always be on Day grouping. How can I achieve that?

My code for the dropdown looks like this so far:

Code: Select all

select1_2.change(function() {

          // How to start by forcing day grouping?

          chart1_2.xAxis[0].setExtremes();

          switch(select1_2.val()) {
            case 'option1':
              chart1_2.xAxis[0].setExtremes(period1[0], period1[1]);
              break;
            case 'option2':
              chart1_2.xAxis[0].setExtremes(period2[0], period2[1]);
              break;
            case 'option3':
              chart1_2.xAxis[0].setExtremes(period3[0], period3[1]);
              break;
            case 'option4':
              chart1_2.xAxis[0].setExtremes(period4[0], chart1_2.xAxis[0].getExtremes().max);
              break;
            case 'option99':
              chart1_2.xAxis[0].setExtremes(chart1_2.xAxis[0].getExtremes().min, chart1_2.xAxis[0].getExtremes().max);
              break;
            default:
              //...
          }

          chart1_2.reflow();

        });

I have tried with this, but it's not working as expected:

Code: Select all

chart1_2.rangeSelector.options.selected = 0;

Any idea how to do this?

Thanks for your help!

[michal.f]

Hello,

Thanks for contacting us with your question!

You can use chart.rangeSelector.clickButton() method to achieve this.

Demo: https://jsfiddle.net/BlackLabel/3g1k06bt/

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

[DoumiLo]

This is perfect! Exactly what I needed...
why we can't find this info in the doc under range selector?

Thanks Michal!

[michal.f]

I'm glad I could help.

GitHub issues thread about this: https://github.com/highcharts/highcharts/issues/5908

But there is an official supported solution to achieve this:

Code: Select all

chart.update({ rangeSelector: { selected: 1 }});

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

Feel free to ask any further questions!
Best regards!