How to add border radius to dognut chart item?

[farhan960]

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

[Abhinandan-Kushwaha]

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]

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>
  );
};

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

,

[ducsilva]

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>
  );
};

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

[Abhinandan-Kushwaha]

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]

got chart breaking behaviour as well from these options.

[Abhinandan-Kushwaha]

I will make the PieChartPro stable by this weekend.

[SimRunBot]

and?