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

Only alert supports since Highcharts is rendering inside Webview. so for this

let data = "ClickedWebView" ;

• Any message it could be * Note : window.postMessage will not work . WebView version > 5 gives us this modified function,

write the following code in config as

plotOptions: {
      series: {
          point: {
              events: {
                  click: function() {
                   window.ReactNativeWebView.postMessage(data);
                  }
              }
          }
      }
    }

in ChartView Code Code would be

<ChartView style={{ height: 400 }} config={confi} onMessage={m => this.onMessage(m)} options={options}></ChartView>

can write custom message function as

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

Answer 2

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