Unable to do any other action than “alert” when triggering the click event on Highcharts (React Native)

Question

• Im using Highcharts in React Native

• For a bar chart I have the following click event defined:

  plotOptions: {
            series: {
                         
  
  
          

Answer 1

It's working now! The problem was the following (as I understand it):

• Highcharts for React Native renders the chart within a WebView. For this reason only alerts can be made.
• If you try to console.log directly (or call a method or anything else) it won't work because it's not getting to React Native, it's in the webview.
• So the question was: how to pass data from the webview to React Native? And the answer iiiiis... window.postMessage()

Like this:

1. In the config object (passed to the chart):

   plotOptions: {
         series: {
             point: {
                 events: {
                     click: function() {
                       window.postMessage( //data you want to send to react native )
                     }
                 }
             }
         }
       }
   

2. Pass the onMessage method as prop to the ChartView such as you would pass it to a WebView (https://facebook.github.io/react-native/docs/webview#onmessage)

    onMessage(m)} options={options}>
   

3. Just now you can console.log, setState, or do anything in your react native onMessage function

   onMessage = (m) => { 
      console.log(m.nativeEvent.data)
   }
   

And that's it, now I can click a bar and change the state of my component ;)