Add bubble up of highcharts events to react-native level

[mobitinker]

It would be great to be able to receive events in React-Native via a bridge such as is found with react-native-webview-bridge. For example if I have a column chart, I'd like to be able to define an event for onPress for the data series and have the event be detectable at the app level.

[leogomesdev]

Please, I also need use this!

[ap050492]

@mobitinker & @leogomezzz have you found any solution ?

if i write below code into chart config then it's show alert dialog , but can't able to call React native function from config data

events: {
     click: function (event) {
         alert(
               event
	 );
	 // this.clickOnArea(event);
     }
}

@infinity0106 can you please help us ?

[Luke-Gurgel]

Hope this helps somebody...

// create your config object

const window = "window"

const config = {
  // all the other stuff...
  plotOptions: {
    series: {
      point: {
        events: {
          click: function (e) {
            const seriesName = e.point.series.name;
            window.postMessage(seriesName) // this will send data back up to the React Native component that's rendering the WebView
          }
        }
      }
    }
  }
}

// Pass the onMessage prop to the WebView and create a handler method for it

import { WebView } from "react-native-webview"

export default class ChartView extends Component {

  // all the other stuff...

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

  render() {
    return (
      <WebView {...this.props} onMessage={this.onMessage} />
    )
  }
}