React Native Highcharts call method

Question

Hi I am using react native highcharts for chart. Everything is working fine. But I can't able to call a react method within the highcharts declaration.

Here is my component.

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading:false
    };
    this.getSingleData = this.getSingleData.bind(this);
  }

  getSingleData(x, y) {
    console.log(x, y)
  }

render() {
    var Highcharts='Highcharts';
    const configData = {
      chart: {
          type: 'areaspline',
          marginTop:80
      },
      plotOptions: {
        series: {
            point: {
                cursor: 'pointer',
                events: {
                    click: () => {
                        this.getSingleData(this.x, this.y);
                    }
                }
            }
        }
    },
    series: [{
        showInLegend: false,
        name: "Total",
        data: []
    }]
  }
  return (
    <ChartView style={{height:300}} config={configData}></ChartView>
  );
  }
}

When I try to call getSingleData the method is not calling.

It was works when using reactjs. But it is not working in React Native. Because I am declaring the click event inside render. I don't know how to call a class method.

I've tried with static method, but no luck.

Please give me some suggestions.

Nothing happend :( If I put alert it works, if I put console.log it is not working — Praveen Srinivasan
What do you expect to be 'this' inside the click callback? this.x will refers to the component's 'x' - because of arrow function binding. — morganfree
This answer may help you: stackoverflow.com/a/54858097/3770366 — Gaurav Rami

Manik Kumar Manik Kumar · Accepted Answer · 2020-09-18T05:58:38

Here is the code for your issue, it worked for me. Hopefully, it will work for you too.

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading:false
        };
        this.getSingleData = this.getSingleData.bind(this);
    }
    
    getSingleData(x, y) {
        console.log(x, y)
    }
    onMessage = (message)=>{
        /*
        ----
        Write your condition in this function on which basis you want to render the content by clicking on your graph
        ----
        */
    }
    
    render() {
        var Highcharts='Highcharts';
        const configData = {
            chart: {
                type: 'areaspline',
                marginTop:80
            },
            plotOptions: {
                useHTML:true
                series: {
                    point: {
                        cursor: 'pointer',
                        events: {
                            click: () => {
                                window.ReactNativeWebView.postMessage(this.y);
                                this.getSingleData(this.x, this.y);
                            }
                        }
                    }
                }
            },
            series: [{
                showInLegend: false,
                name: "Total",
                data: []
            }]
        }

        return (
        <ChartView style={{height:300}} config={configData} onMessage={m}></ChartView>
        );
    }
}

React Native Highcharts call method

1 Answers