android - Is it possible to add corner radius to donut chart in victory-native-xl? - Stack Overflow

admin管理员组

文章数量:1353284

I want to do this kind of chart in React Native using victory-native-xl but I have no idea how to add corner radius to the pie chart. I can only find the tutorial with normal Victory, not victory-native-xl. Or I have to use legacy version of victory-native, instead of the xl one? Example chart

I want to do this kind of chart in React Native using victory-native-xl but I have no idea how to add corner radius to the pie chart. I can only find the tutorial with normal Victory, not victory-native-xl. Or I have to use legacy version of victory-native, instead of the xl one? Example chart

• android
• react-native
• victory-charts
• victory-native

Share Improve this question Follow edited Apr 1 at 7:43 Thuận Dương Minh asked Apr 1 at 7:43 Thuận Dương MinhThuận Dương Minh 1122 bronze badges New contributor Thuận Dương Minh is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 1

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Apr 1 at 12:41

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can do this by react-native-circular-chart. Then you to customize it a bit and you are done. Here I have attached a sample code.

import {StyleSheet, useWindowDimensions, View} from 'react-native';
import React from 'react';
import {DonutChart} from 'react-native-circular-chart';

const BottomSheet = () => {
  const DATA: any = [
    {
      value: 75,
      color: '#5B8FFF',
    },
    {
      value: 25,
      color: '#98F5F9',
    },
  ];
  return (
    <View style={styles.sectionWrapper}>
      <DonutChart
        data={DATA}
        strokeWidth={15}
        radius={90}
        containerWidth={useWindowDimensions().width - 10 * 2}
        containerHeight={105 * 2}
        type="round"
        startAngle={0}
        endAngle={360}
        animationType="slide"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  sectionWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    flex: 1,
    borderRadius: 8,
    borderColor: 'lightgray',
    backgroundColor: '#ffffff',
    marginVertical: 8,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
  },
});
export default BottomSheet;

Now You just just need to make few changes to disable the text in the center for that you need to go DonutChart class and do this

 return (
              <AnimatedPath
                key={`item-${i}`}
                ref={(el: any) => (pathRefs.current[i] = el)}
                onPress={() => onUpdateDisplayValue(data[i], i)}
                onPressIn={() => onPressIn(data[i], i)}
                onPressOut={() => onPressOut(i)}
                strokeLinecap={type}
                d={drawPath}
                opacity={animateContainerOpacity}
                fill="none"
                stroke={data[i].color}
                strokeWidth={animatedStrokeWidths[i]}
              />
            );
          })}
        </Svg>

          //remove this part if you dont need nane

          // <Animated.View style={_getLabelWrapperStyle()}>
          //<Text style={_getLabelValueStyle(displayValue?.color)}>
          //  {displayValue?.value}
          //</Text>
          //<Text style={_getLabelTitleStyle(displayValue?.color)}>
          //  {displayValue?.name}
          //</Text>
          //</Animated.View> 

      </View>
    </Fragment>

Then also customize the listener in that file too

  const addListener = ({
    element,
    animatedValue,
    startValue,
  }: {
    element: any;
    animatedValue: Animated.Value;
    startValue: number;
  }) => {
    animatedValue.addListener((angle) => {
      const arcParams: ArcParams = {
        coordX: viewBox.getCenterCoord().x,
        coordY: viewBox.getCenterCoord().y,
        radius: radius,
        startAngle: startValue,
        endAngle: angle.value -10,  // subtract angle according to your usage to have that gap.
      };
      const drawPath = new Arc(arcParams).getDrawPath();

      if (element) {
        element.setNativeProps({ d: drawPath });
      }
    });
  };

Then you will get somethinhg like this

本文标签： androidIs it possible to add corner radius to donut chart in victorynativexlStack Overflow