TradingPal / react-native-highcharts

📈 Add Highcharts charts to react-native app for IOS and Android
https://github.com/TradingPal/react-native-highcharts
255 stars 159 forks source link

the chart is not rendering in ios. #111

Open lkum11 opened 4 years ago

lkum11 commented 4 years ago

the chart is not rendering in ios ( showing just white space) but working fine in android. Please help

lkum11 commented 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 .

amauryeuzebio commented 4 years ago

I have the same problem :(

lkum11 commented 4 years ago

<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}

MohitDhingra0786 commented 3 years ago

@lkum11 I've update the source property and it works at my end. source={Platform.OS == 'ios' ? { html: concatHTML } : { html: concatHTML, baseUrl: 'web/' }}