Chartjs-React Native Chart not showing data

by

0👍

You should close tag for Chart

                <Chart
                style={styles.chart}
                data={data}
                verticalGridStep={1}
                type="line"
                showsDataPoint={true}
      axisColor='blue'> </Chart>

Should work

0👍

import React, { Component } from 'react'

import {
    PieChart,
} from 'react-native-chart-kit'

import { Dimensions } from 'react-native'

const screenWidth = Dimensions.get('window').width

const data = [

    { name:'Return Rate', Amount: 200, color: 'blue', legendFontColor: '#7F7F7F', legendFontSize: 12},

    { name:'Duration', Amount: 100, color: 'black', legendFontColor: '#7F7F7F', legendFontSize: 12,},
]

import { View, Text, TouchableOpacity, TextInput, StyleSheet, StatusBar } from 'react-native'

class chart extends Component {

    render() {

        return (

            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

                <Text style={{ fontSize: 14, textAlign: 'center', marginBottom: 20 }}>SIP 
                Calculator Chart </Text>

                <View >

                    <PieChart

                        width={screenWidth}

               height={220}

               accessor="Amount"

               backgroundColor="transparent"

               paddingLeft="1"

        // absolute

                        chartConfig={{

                            backgroundColor: '#e26a00',

                   backgroundGradientFrom: '#fb8c00',

                   backgroundGradientTo: '#ffa726',

                            decimalPlaces: 1, // optional, defaults to 2dp

                   color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,

      style: {         
                       borderRadius: 16

                            }
                        }}

                        width={Dimensions.get('window').width}

                        height={200}

                        yAxisLabel={'$'}

                        bezier

                        style={{

                            marginVertical: 4,

                            borderRadius: 16

                        }}
                        data={data}
                    />
                </View>

            </View>

        )
    }

}

export default chart

Leave a comment