CODEWITHSUNDEEP
reactjshighchartsreact-highcharts
micronyks
micronyks

Reputation: 55443

Enable all range selector's options in stock highcharts

In range-selector, I have many options to select from (in reality) and in given demo, I initially load last 2 hours data.

In this scenario, last 1 hour option is enabled but other options are disabled.

I really don't know what is wrong. The requirement is to load last 2 hour data first and then from dropdown, you can select other options (eg. last 6 hours) and accordingly data will be loaded.

How to enable other options in range-selector ?

I tried setting

minRange:1

but I have no clue how to fix it.

DEMO : https://stackblitz.com/edit/js-2eyktg?file=index.js,chartOptions.js,mock-data%2Fi.js

Updates:

I tried using

 allButtonsEnabled: true,

It enables all options but when I click on 3 hours, 6 hours options, it doesn't make any BE call. I believed that it should automatically call afterSetExtremes functions with min & max value, fetch data from BE and update the chart but it doesn't happen.

DEMO : https://stackblitz.com/edit/js-jsxchg?file=index.js,chartOptions.js,backend.js

Upvotes: 0

Views: 576

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You can:

a) Set min property for an x-axis in a navigator:

  navigator: {
    xAxis: {
      min: currentTimestamp - 6 * 60 * 60 * 1000, // 6 hours
    }, 
    // adaptToUpdatedData: false,
    ...
  }

Live example: https://stackblitz.com/edit/js-m38td3?file=index.js

API Reference: https://api.highcharts.com/highstock/navigator.xAxis

b) Enable rangeSelector.allButtonsEnabled property and use afterBtnClick Highcharts event. The event afterSetExtremes is not called if the extremes are the same as the current one (they are because of initial min and max restriction).

chart: {
  zoomType: 'x',
  events: {
    load: function() {
      Highcharts.addEvent(
        this.rangeSelector,
        'afterBtnClick',
        function() {
          const button = this.buttonOptions[this.selected];
          const chart = this.chart;

          afterSetExtremes({
            target: {
              chart
            },
            min: chart.xAxis[0].dataMax - button._range,
            max: chart.xAxis[0].dataMax
          });
        });
    }
  }
}

Live demo: https://stackblitz.com/edit/js-tuzuuz?file=chartOptions.js,index.js,index.html

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Upvotes: 2

Related Questions