Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

the chart is not rendering in ios. #111

Open
lkum11 opened this issue Oct 24, 2019 · 4 comments
Open

the chart is not rendering in ios. #111

lkum11 opened this issue Oct 24, 2019 · 4 comments

Comments

@lkum11
Copy link

lkum11 commented Oct 24, 2019

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

@lkum11
Copy link
Author

lkum11 commented Oct 24, 2019

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
Copy link

I have the same problem :(

@lkum11
Copy link
Author

lkum11 commented Nov 1, 2019

<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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants