How to make highchart points redirect to another component with value in React?

Question

In highcharts, by clicking on the data points, I need to redirect to another page by passing the points values in react. I'm using reach/router. Is there any by which we can make a point like a react/router Link.

 plotOptions :{
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                console.log(this);
                                // want to redirect to other component like Link in Reach/router.
                            }
                        }
                    }
                }
            }

Answer 1

You need to get access to a component and use a history object to push new route into a component's props.history:

options: {
    series: [{
        data: [1, 2, 3],
        point: {
            events: {
                click: function() {
                    this.props.history.push("/");
                }.bind(this)
            }
        }
    }]
}

Live demo: https://codesandbox.io/s/848vly9pn8

Docs: https://reacttraining.com/react-router/web/api/history