0
  • 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!

bar chart

Diego Leonvendagar
  • 140
  • 3
  • 15
  • Have you tried `click: () => { console.log("Clicked!"); }` or `click: () => { this.setState({yourKey: yourValue}); }` and neither of them worked? – Andrew Feb 17 '19 at 07:55
  • @Andrew that's right, I tried both and just nothing happens. The only thing that works is the alert. – Diego Leonvendagar Feb 17 '19 at 12:13
  • Hi @Diego Leonvendagar, the behavior you describe seems very strange. Do you use any wrapper for Highcharts? – ppotaczek Feb 21 '19 at 10:52
  • @ppotaczek I'm doing exactly this: https://github.com/TradingPal/react-native-highcharts – Diego Leonvendagar Feb 22 '19 at 05:18
  • @Diego Leonvendagar, I would advise you to contact the author directly by creating an issue: https://github.com/TradingPal/react-native-highcharts/issues – ppotaczek Feb 22 '19 at 06:46

2 Answers2

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

Diego Leonvendagar
  • 140
  • 3
  • 15
  • I am having a hard time using the `window.postMessage()` part. What exactly do you send there, exactly a JSON? – fedorqui Mar 28 '19 at 19:56
  • @fedorqui you can send anything. I just send a string representing the key of the clicked bar. It doesn't have to be necessarily a JSON at all. You can do something like window.postMessage('hello'). – Diego Leonvendagar Mar 29 '19 at 07:44
  • Oh, cool! I had something similar in [How can I add links in a Highcharts tooltip that will open on mobile's browser?](https://stackoverflow.com/q/55358659/1983854) and ended up using a similar approach. It does work on iOS, but not in Android though. Did you experience the same problem? – fedorqui Apr 08 '19 at 13:42
  • Yeah I got that problem recently when I updated the Expo version to 32. I fixed it by adding the following props to the ChartView component: 1. originWhitelist={['*']} 2. useWebKit={true} These comment really helped me: https://github.com/expo/expo/issues/3168#issuecomment-473727850 And there's more info here: https://facebook.github.io/react-native/blog/2018/08/27/wkwebview https://facebook.github.io/react-native/docs/webview#originwhitelist Let me know if it worked! – Diego Leonvendagar Apr 09 '19 at 15:14
  • onMessage(m)} originWhitelist={['*']} useWebKit={true} > – Diego Leonvendagar Apr 09 '19 at 15:15
  • No, it did not work :( As I posted in [How can I make React Native in Android aware of a click event in a tooltip in a Highcharts chart?](https://stackoverflow.com/q/55589594/1983854) it looks as if Android needs some timeout before sending the message, but my attempts were not successful. – fedorqui Apr 10 '19 at 08:11
  • 1
    I managed to solve it using `window.__REACT_WEB_VIEW_BRIDGE.postMessage` instead of `window.postMessage` on Android. Many thanks for your help in this issue, I wish I could upvote more than once :) – fedorqui Apr 18 '19 at 12:00
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)
}
deva11
  • 881
  • 10
  • 25