Pie chart is not showing properly

[prashant4dev]

Please can any one help me on this ?

[zedlen]

I'm facing the same problem, any solutions?

This is hot it looks.

This is the code i usisng

import React from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,   
  View,
  Platform,
  Linking
} from 'react-native';
 import PureChart from 'react-native-pure-chart';
 import ActionButton from 'react-native-action-button';
 import Icon from 'react-native-vector-icons/dist/FontAwesome';

 import Colors from '../constants/Colors'

 const lineChartData = [ 
  {x: 'January', y: 30},
  {x: 'February', y: 200},
  {x: 'March', y: 170},
  {x: 'April', y: 250},
  {x: 'May', y: 10}
 ]

 const barChartData = [    
  {
    seriesName: 'series1', 
    data:[
      {x:'Theft',y:parseInt(Math.random() * 100)},
      {x:'Suspects',y: parseInt(Math.random() * 100)},
      {x: 'Burglary',y:parseInt(Math.random() * 100)},
      {x: 'Pickpocket',y:parseInt(Math.random() * 100)},                    
      {x:'Robbery',y:parseInt(Math.random() * 100)}  
    ],
    color: '#297AB1'
  },                     
 ]
 const pieData = [{label: 'Closed', value: 145, color: 'red'}, {label: 'Open', value: 55, color: 'green'} ]
 class DashboardScreen extends React.Component {
    static navigationOptions = {
      title: 'Dashboard',
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: Colors.tintColor,
        color: '#fff',
      },
    };
  
    render() {
      return (
        <View style = {{flex:1}}>
        <ScrollView >            
          <View style = {styles.container}>
            <Text>
              Events per month
            </Text>
            <PureChart data={lineChartData} type='line' />
          </View>

          <View style = {styles.container}>
            <Text>
              Events per Category
            </Text>
            <PureChart data={barChartData} type='bar' />
          </View>
          <View style = {styles.container}>
            <Text>
              Events Open vs Closed
            </Text>            
              <PureChart data={pieData} type='pie' />            
          </View>           
        </ScrollView>
        <ActionButton
        buttonColor="rgba(231,76,60,1)"
        onPress={this.onPressCall.bind(this)}
        renderIcon={()=>{
          return(
            <View >
              <Icon
                name="warning"
                color="#fff"
                size={24}
            />   
            <Text style={{color:"#fff"}}>SOS</Text>
          </View>     
          )
        }}
      /> 
      </View>
      );
    }

    onPressCall() {
      let url = 'tel:911';
      console.log(Platform.OS)
      if (Platform.OS !== 'android'){
        url = 'telprompt:911';
      }
      Linking.canOpenURL(url)
        .then((supported) => {
          if (supported) {
            return Linking.openURL(url)
              .catch(() => null);
          } else {
            console.log(supported)
          }
        });
    }

}
const styles = StyleSheet.create({
  container: {
   flex: 1,
   padding:15,
  justifyContent: 'center',
   alignItems: 'center', 
 }, 
});

export default DashboardScreen;

[prashant4dev]

Run it on the device it works fine.

[zedlen]

I run it on device, on android works perfectly, but in ios it doesnt work

[Susmitha-Bogala]

same issue. android works fine,but in ios device and simulatore not showing properly. anyone fixed this.

thanks in advance

[yasarozg]

same here :(

[georgeCts]

same issue on ios device

[duyquangg]

any body help this issue?

[vish2595]

Same issue in ios

[TienNguyenanh]

@vish2595 , @bkwilcox100 @duyquangg @georgeCts @yasarozg @Susmitha-Bogala @Prashant-Mutnale This library was not supported for very long. You should try the same library: react-native-chart-kit

[cederom]

+1 Pie Chart quality is not really production ready please improve :-(