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: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: () => {
                          alert("Clicked!");
                        }
                    }
                }
            }
          }
  

• I would like to setState on the click event to be able to display the elements of the clicked bar, but I cant even console.log() on it.

• I checked examples and all I saw was "alerts" inside the callback function.

Any ideas?

Thanks!

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)

   <ChartView style={{ height: 300 }} config={conf} onMessage={m => onMessage(m)} options={options}></ChartView>
   

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 ;)