CODEWITHSUNDEEP
react-nativepie-chartdonut-chartreact-native-gifted-chat
Yuva
Yuva

Reputation: 171

How do draw a pie chart in react native

How can I draw a donut chart? I tried using react-native-gifted-charts

i want some animation for fill the chart.Is there any library that can resolve this? someone is help me to do this i want exactly like this with animation

Upvotes: -1

Views: 1036

Answers (1)

Smarty
Smarty

Reputation: 823

You can use other libraries as well for animate the circular progrees of your donut chart you can custom define your animation and modify it as well.

use below libraries

import { View, StyleSheet, Dimensions, Animated, Easing } from 'react-native';
import Svg, { G, Circle } from 'react-native-svg';

and you can adjust the donut according to your need

const { width } = Dimensions.get('window');
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const DonutChart = ({ percentage }) => {
  const radius = width / 6;
  const strokeWidth = 40;
  const circumference = 2 * Math.PI * radius;
  const animation = useRef(new Animated.Value(0)).current;

  const animatedProps = {
    strokeDashoffset: animation.interpolate({
      inputRange: [0, 1],
      outputRange: [circumference, circumference - (circumference * percentage) / 100],
    }),
  };

  useEffect(() => {
    Animated.timing(animation, {
      toValue: 1,
      duration: 1500,
      easing: Easing.out(Easing.quad),
      useNativeDriver: true,
    }).start();
  }, [percentage]);

and adjust your svg with viewBox height and width

return (
    <View >
      <Svg width={radius * 2 + strokeWidth} height={radius * 2 + strokeWidth} viewBox={`0 0 ${radius * 2 + strokeWidth} ${radius * 2 + strokeWidth}`}>
        <G rotation="-90" origin={`${radius + strokeWidth / 2}, ${radius + strokeWidth / 2}`}>
          <Circle
            cx={radius + strokeWidth / 2}
            cy={radius + strokeWidth / 2}
            r={radius}
            stroke="#e6e6e6"
            strokeWidth={strokeWidth}
            fill="none"
          />
          <AnimatedCircle
            cx={radius + strokeWidth / 2}
            cy={radius + strokeWidth / 2}
            r={radius}
            stroke="green"
            strokeWidth={strokeWidth}
            fill="none"
            strokeDasharray={circumference}
            {...animatedProps}
          />
        </G>
      </Svg>
    </View>
  );

after that set your percentage of progress

<View style={{ flex: 1 }}>
      <DonutChart percentage={90} />
    </View>

also i have share the full code of expo snack link below and modify it as per your need

Expo Pie chart Link

Upvotes: 2

Related Questions