1

I am testing the package react-native-chart-kit, I follow the tutorial just to see how it could look like but I can't get it work correctly. I tried with piechart and barchart also but still the same mistake. Could you guide me to check what's wrong with :

import React from 'react'
import { Text, View, TouchableOpacity, Dimensions } from 'react-native'
import LineChart from 'react-native-chart-kit'

const screenWidth = Dimensions.get("window").width;
const linedata = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June'],
      datasets: [
        {
          data: [20, 45, 28, 80, 99, 43],
          strokeWidth: 2, // optional
        },
      ],
    };

export default function Linechart() {
  return (
    <View>
  <Text>
    Bezier Line Chart
  </Text>
  <LineChart
    data={linedata}
    width={Dimensions.get('window').width} // from react-native
    height={220}
    yAxisLabel={'$'}
    chartConfig={{
      backgroundColor: '#e26a00',
      backgroundGradientFrom: '#fb8c00',
      backgroundGradientTo: '#ffa726',
      decimalPlaces: 2, // optional, defaults to 2dp
      color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      style: {
        borderRadius: 16
      }
    }}
    bezier
    style={{
      marginVertical: 8,
      borderRadius: 16
    }}
  />
</View>
  );
}

enter image description here

Kimako
  • 615
  • 2
  • 11
  • 26

1 Answers1

1

Just import it inside the curly brackets.

import { LineChart } from 'react-native-chart-kit';

Anytime you see this error message, it is better to suspect an existence of a wrong import statement first.

Nostromo
  • 959
  • 2
  • 7
  • 25