Thank's to TradingPal but got blanck screen on our project.
đź“ŠImplementation of Highcharts in React Native via WebView API.
npm i -S highcharts-react-native
import React from 'react';
import HighchartsWebView from 'highcharts-react-native';
export default class App extends React.PureComponent {
render() {
const configuration = {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
};
return (
<HighchartsWebView
style={{ height: 300 }}
config={configuration} />
);
}
}
Name | Required | Type |
---|---|---|
config | true | Object |
options | false | Object |
style | false | Object |
debug | false | boolean |
- Why did that happens ?
Blank screen appears when injected Javascript is invalid. Usually due to new Javascript features not supported by JSON.stringify, also due to babel compiler.
- How to solve this ?
- Code directly into ES5.
- Put your code into string.
- Add the
'debug'
prop (the debug's prop allow you to know how injected JS looks like, if previous steps resolve blank screen, remove it).
- Example :
const configuration = {
tooltip: {
formatter() {
return `
<table style="width:100px;">
<tr><td style="color:#bc9c69;">
$${Math.round(this.y)}
</td></tr>
<tr><td style="text-align:center;color:#bc9c69;">
${Highcharts.dateFormat('%y/%m/%d', this.x)}
</td></tr>
</table>
`;
},
positioner(a, b, point) {
return {
y: 0,
x: point.plotX,
};
},
},
// ...
};
const my_variable = 'something';
const configuration = `{
tooltip: {
formatter: function() {
return (
'<table style="width:100px;">'
+ '<tr><td style="color:#bc9c69;">'
+ '$' + Math.round(this.y)
+ '</td></tr>'
+ '<tr><td style="text-align:center;color:#bc9c69;">'
+ Highcharts.dateFormat('%y/%m/%d', this.x)
+ '</td></tr>'
+ '</table>'
);
},
positioner: function (a, b, point) {
return {
y: 0,
x: point.plotX,
};
},
},
// ...
}`;