Open lkum11 opened 4 years ago
import React from 'react'; import { ScrollView, Platform } from 'react-native'; import ChartView from 'react-native-highcharts'; import { Ionicons } from '@expo/vector-icons';
const Graph = () => { const Highcharts = 'Highcharts'; const conf = { chart: { type: 'spline', backgroundColor: '#fefefe', marginRight: 10 }, title: { text: 'Random Data' }, xAxis: { type: 'date', tickPixelInterval: 80, }, yAxis: { // To remove grid lines from background gridLineWidth: 0, title: { text: 'Value' }, labels: { enabled: false }, // TO get cut of lines plotLines: [{ value: 50000, dashStyle: 'dash', width: 1, color: '#AB966C', label: { text: 'Total Goal' } }] }, tooltip: { shared: true, crosshairs: true }, legend: { enabled: false }, // To remove the various exporting options exporting: { enabled: false }, series: [{ name: 'Installation', data: [11744, 43934, 52503, 57177, 69658, 97031] }, { name: 'Manufacturing', data: [11744, 24916, 24064, 29742, 29851, 32490] }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377] }],
plotOptions: {
series: {
allowPointSelect: true,
}
},
// To remove highcharts.com credit
credits: {
enabled: false
},
};
return (
<ScrollView>
<ChartView
style={{ height: 300, marginTop: 40 }}
config={conf}
originWhitelist={[""]}
javaScriptEnabled={true}
domStorageEnabled={true}
/>
</ScrollView>
);
};
export default Graph;
The above code is rendering find in android but not in IOS. Any help would be highly appreciated .
I have the same problem :(
<ChartView
style={{ height: 270, marginTop: 5}}
config={conf}
originWhitelist={[""]}
useWebKit={true}
scalesPageToFit={undefined}
/>
You may try by adding below properties, It worked for me. originWhitelist={[""]} useWebKit={true} scalesPageToFit={undefined}
@lkum11 I've update the source property and it works at my end. source={Platform.OS == 'ios' ? { html: concatHTML } : { html: concatHTML, baseUrl: 'web/' }}
the chart is not rendering in ios ( showing just white space) but working fine in android. Please help