Abhinandan-Kushwaha / react-native-gifted-charts

The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
https://www.npmjs.com/package/react-native-gifted-charts
MIT License
772 stars 153 forks source link

How to add border radius to dognut chart item? #590

Closed farhan960 closed 7 months ago

farhan960 commented 7 months ago

How can i add rounded corners for the dognut chart sections?

Abhinandan-Kushwaha commented 7 months ago

Hi @CuriousProgramer Use the new <PieChartPro> component.

It supports curved edges using the the following properties inside the objects in the data array-

  1. isStartEdgeCurved
  2. isEndEdgeCurved
  3. startEdgeRadius
  4. endEdgeRadius

See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/554#issuecomment-2018958023

farhan960 commented 7 months ago
import React from "react";
import { View, SafeAreaView, StyleSheet } from "react-native";
import { PieChart, PieChartPro } from "react-native-gifted-charts";
import Text from "../atoms/Text";

export const PieChartComponent = ({}: any) => {
  const data = [
    {
      name: "A",
      value: 50,
      color: "#00C777",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "B",
      value: 30,
      color: "#9997EF",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "C",
      value: 20,
      color: "#FF934F",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "A",
      value: 50,
      color: "#95EB73",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "B",
      value: 30,
      color: "#FF6363",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "C",
      value: 20,
      color: "#FED97E",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
  ];
  return (
    <View className="flex-1 justify-center items-center my-6">
      <PieChartPro
        data={data}
        donut
        innerRadius={80}
        outerRadius={100}
        labelRadius={75}
        padAngle={0.02}
        animate={true}
        backgroundColor="#000"
      />
    </View>
  );
};
Screenshot 2024-04-01 at 8 26 06 PM

Hi @Abhinandan-Kushwaha , this is how it looks like with above properties. I'm looking to achieve something like this

Screenshot 2024-04-01 at 8 27 17 PM

,

ducsilva commented 6 months ago

i can't find PieChartPro. How do i get it?

PieChartPro

import React from "react";
import { View, SafeAreaView, StyleSheet } from "react-native";
import { PieChart, PieChartPro } from "react-native-gifted-charts";
import Text from "../atoms/Text";

export const PieChartComponent = ({}: any) => {
  const data = [
    {
      name: "A",
      value: 50,
      color: "#00C777",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "B",
      value: 30,
      color: "#9997EF",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "C",
      value: 20,
      color: "#FF934F",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "A",
      value: 50,
      color: "#95EB73",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "B",
      value: 30,
      color: "#FF6363",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
    {
      name: "C",
      value: 20,
      color: "#FED97E",
      isStartEdgeCurved: true,
      isEndEdgeCurved: true,
      startEdgeRadius: 4,
      endEdgeRadius: 4,
    },
  ];
  return (
    <View className="flex-1 justify-center items-center my-6">
      <PieChartPro
        data={data}
        donut
        innerRadius={80}
        outerRadius={100}
        labelRadius={75}
        padAngle={0.02}
        animate={true}
        backgroundColor="#000"
      />
    </View>
  );
};
Screenshot 2024-04-01 at 8 26 06 PM

Hi @Abhinandan-Kushwaha , this is how it looks like with above properties. I'm looking to achieve something like this Screenshot 2024-04-01 at 8 27 17 PM ,

Abhinandan-Kushwaha commented 6 months ago

Hi @CuriousProgramer Thanks for reporting this issue. I will fix it and release an update within 1 or 2 days. Thanks for your patience.

SimRunBot commented 6 months ago

got chart breaking behaviour as well from these options.

Abhinandan-Kushwaha commented 6 months ago

I will make the PieChartPro stable by this weekend.

SimRunBot commented 5 months ago

and?