I am developing a React Native app with expo. One of the screens contains a graphic created with Highcharts. All points have an associated tooltip with some text, to which I would like to add a link that would open the URL in the browser (that is, outside the app).
Very basically, the app code looks like this:
import ChartView from 'react-native-highcharts';
render() {
let Highcharts = "Highcharts";
let config ={
chart: {
type: "line",
animation: Highcharts.svg,
...
tooltip: {
followTouchMove: false,
useHTML: true,
formatter: function () {
return `<div class="text">bla bla bla
<a href="http://www.google.cat">my link here/a>
</div>`;
}
},
};
That gets rendered in:
return(
<View style={styles.container}>
<ChartView
config={config}
/>
</View>
Checkin Link inside of a Highcharts tooltip I saw interesting ideas like adding this info inside the charts
key:
events: {
click: function (event) {
var url = 'http://www.google.cat';
window.open(url, '_blank');
}
}
Which works, but it opens the link inside the ChartView
of React Native. That is, the space with the graph shows the given URL. However, I want the URL to open in the browser.
Is there a way to open the links in the browser? React Native's Linking.openURL(url);
is the way to do so, but I cannot see how can I bing Linking.openURL
from within the config
settings.