Adding Event on RangeSelector.Button is not working

[mwubgadeashish]

            ```<RangeSelector selected={1}>
                <RangeSelector.Button count={24} type="hour" onClick={this.handleClick}>P</RangeSelector.Button>
                <RangeSelector.Button count={1} type="day">1d</RangeSelector.Button>
                <RangeSelector.Button count={2} type="day">2d</RangeSelector.Button>
                <RangeSelector.Button count={1} type="week">1w</RangeSelector.Button>
                <RangeSelector.Button count={1} type="month">1m</RangeSelector.Button>
                <RangeSelector.Button type="all">all</RangeSelector.Button>
            </RangeSelector>```

I am trying to add a click event on button and seems its not working. I have also added following line:

// In constructor
this.handleClick = this.handleClick.bind(this);
//added method
handleClick  = (e) => {
        console.log('Click');
    }

[mwubgadeashish]

I am not sure but does it has something to do with events in

adding events in RangeSelectorButton.js

componentDidMount () {
const button = this.getButtonIndex();
if (button > -1) return; // Button already present

const { count, type, children } = this.props;
const buttons = [
  ...this.getButtons(),
  {
    count,
    type,
    text: children
  }
];
this.updateRangeSelectorButtons(buttons);

}

[mwubgadeashish]

@whawker can you please help me on this?

[whawker]

Hi sorry, was not aware RangeSelector buttons supported click events.

I've just published react-jsx-highstock@2.2.1 which adds support for this use case, which works in the way you assumed

<RangeSelector selected={1}>
  <RangeSelector.Button count={24} type="hour" onClick={this.handleClick}>P</RangeSelector.Button>
  <RangeSelector.Button count={1} type="day">1d</RangeSelector.Button>
  <RangeSelector.Button count={2} type="day">2d</RangeSelector.Button>
  <RangeSelector.Button count={1} type="week">1w</RangeSelector.Button>
  <RangeSelector.Button count={1} type="month">1m</RangeSelector.Button>
  <RangeSelector.Button type="all">all</RangeSelector.Button>
</RangeSelector>

[mwubgadeashish]

@whawker I have update react-jsx-highstock@2.2.1 and i can see the changes but unfortunately I can not see the event has been called. On my side i have not done any changes in my code.
Please let me know if i need to make any changes on my side.

Thanks,
Ashish

[mwubgadeashish]

[whawker]

Hi @mwubgadeashish here is an example of Range Selector buttons with onClick events.

[mwubgadeashish]

@whawker this is really helpful and i have a last question, how does other properties works with range selector ex: verticalAlign (bottom), size of button and etc.
I have tried it using Options and adding direct property but did not worked (see below sample)

https://www.highcharts.com/docs/chart-concepts/range-selector

[mwubgadeashish]

I am not sure what can be the issue but things works well with your example (above) and does not work with my code: Ex: range selector shows at bottom of chart.

<RangeSelector.Button count={1} type="day">1 day</RangeSelector.Button>
<RangeSelector.Button count={1} type="week">1 week</RangeSelector.Button>
<RangeSelector.Button count={1} type="month">1 month</RangeSelector.Button>
<RangeSelector.Button type="all">All Time</RangeSelector.Button>

[mwubgadeashish]

@whawker
PredictionFullChart.txt