Call a function from within highchart click event in reactjs

Question

I have a summary page in a separate js file. Inside another home js file, I am using highchart to show a graph for each service and on click of a bar in the chart I want to render the summary page. I am new to frontend development and posting this after lot of googling for the entire day. All links I visited suggests how to visit an external link or alert or call a component function within same file on click event. But not what I am looking for.

My highchart plot summary option on home page:

 plotOptions: {
                        bar : {
                          stacking: 'normal',
                          dataLabels: {
                            enabled: true,
                            format: '{point.y}',
                            color: 'black'
                          },
                            states: {
                              hover:{
                                enabled: true,
                                brightness: -0.3
                              }
                            },
                            cursor: 'pointer',

                              events:{
                                 alert(e.point.name) // works
                                 <Summary component={e.point.name}/> // doesn't work in loading the summary page

                                     }
                                    }
                        }

Just began frontend development and I don't how to render the summary page by passing respective the component on the event of clicking on its bar chart. Thanks for me helping out on this

Answer 1

You can use state to change the view. Full working example below:

class SomeComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      renderChart: true,
      pointName: ""
    };
  }

  render() {
    return (
      <div>
        {this.state.renderChart ? (
          <HighchartsReact
            highcharts={Highcharts}
            options={{
              series: [
                {
                  data: [["one", 1], ["two", 2], ["three", 3]],
                  point: {
                    events: {
                      click: (function(component) {
                        return function() {
                          component.setState({
                            renderChart: false,
                            pointName: this.name
                          });
                        };
                      })(this)
                    }
                  }
                }
              ]
            }}
          />
        ) : (
          <SomeComponent name={this.state.pointName} />
        )}
      </div>
    );
  }
}

---

Live demo: https://codesandbox.io/s/highcharts-react-demo-pjfvu