Feature: Add circleSweepDegrees, startAngle props to PieChart (#307)

.changeset/quiet-tigers-promise.md

@@ -0,0 +1,6 @@
+---
+"example": patch
+"victory-native": patch
+---
+
+Add circleSweepDegrees and startAngle props to PieChart

example/app/pie-and-donut-charts.tsx

@@ -290,6 +290,35 @@ const PieChartSimpleCustomLegend = () => {
   );
 };
 
+const HalfDonutChart = () => {
+  const [data] = useState(DATA(2));
+
+  return (
+    <PolarChart
+      data={data}
+      labelKey={"label"}
+      valueKey={"value"}
+      colorKey={"color"}
+    >
+      <Pie.Chart innerRadius={"50%"} circleSweepDegrees={180} startAngle={180}>
+        {() => {
+          return (
+            <>
+              <Pie.Slice />
+              <Pie.SliceAngularInset
+                angularInset={{
+                  angularStrokeWidth: 5,
+                  angularStrokeColor: "white",
+                }}
+              />
+            </>
+          );
+        }}
+      </Pie.Chart>
+    </PolarChart>
+  );
+};
+
 export default function PieAndDonutCharts(props: { segment: string }) {
   const description = descriptionForRoute(props.segment);
 
@@ -328,6 +357,10 @@ export default function PieAndDonutCharts(props: { segment: string }) {
           <Text style={styles.title}>Pie Chart with Custom Legend</Text>
           <PieChartSimpleCustomLegend />
         </View>
+        <View style={[styles.chartContainer]}>
+          <Text style={styles.title}>Half Donut Chart</Text>
+          <HalfDonutChart />
+        </View>
       </ScrollView>
     </SafeAreaView>
   );

lib/src/pie/PieChart.tsx

@@ -10,10 +10,17 @@ const CIRCLE_SWEEP_DEGREES = 360;
 type PieChartProps = {
   children?: (args: { slice: PieSliceData }) => React.ReactNode;
   innerRadius?: number | string;
+  circleSweepDegrees?: number;
+  startAngle?: number;
 };
 
 export const PieChart = (props: PieChartProps) => {
-  const { innerRadius = 0, children } = props;
+  const {
+    innerRadius = 0,
+    circleSweepDegrees = CIRCLE_SWEEP_DEGREES,
+    startAngle: _startAngle = 0,
+    children,
+  } = props;
   const {
     canvasSize,
     data: _data,
@@ -33,15 +40,15 @@ export const PieChart = (props: PieChartProps) => {
   const center = vec(width / 2, height / 2);
 
   const data = React.useMemo(() => {
-    let startAngle = 0; // Initialize the start angle for the first slice
+    let startAngle = _startAngle; // Initialize the start angle for the first slice
 
     const enhanced = _data.map((datum): PieSliceData => {
       const sliceValue = datum[valueKey] as number;
       const sliceLabel = datum[labelKey] as string;
       const sliceColor = datum[colorKey] as Color;
 
       const initialStartAngle = startAngle; // grab the initial start angle
-      const sweepAngle = (sliceValue / totalCircleValue) * CIRCLE_SWEEP_DEGREES; // Calculate the sweep angle for the slice as a part of the entire pie
+      const sweepAngle = (sliceValue / totalCircleValue) * circleSweepDegrees; // Calculate the sweep angle for the slice as a part of the entire pie
       const endAngle = initialStartAngle + sweepAngle; // the sum of sweep + start
 
       startAngle += sweepAngle; // the next startAngle is the accumulation of each sweep
@@ -70,6 +77,8 @@ export const PieChart = (props: PieChartProps) => {
     radius,
     center,
     innerRadius,
+    circleSweepDegrees,
+    _startAngle,
   ]);
 
   return data.map((slice, index) => {

website/docs/polar/pie/pie-charts.md

@@ -62,6 +62,14 @@ A `number` or `string` (as a percentage) which turns the `Pie` chart into a `Don
 The `innerRadius` prop must be a `number` or a `string` like `50%`.
 :::
 
+### `circleSweepDegrees`
+
+A `number` which defines how many degrees of the chart should be drawn. The default is `360` which will draw a full circle. If you want to draw a partial circle, you can set this prop to a value between `0` and `360`.
+
+### `startAngle`
+
+A `number` which defines the starting angle of the chart. Changing this prop will rotate the chart.
+
 ### `children`
 
 The `children` prop is a render function which maps through the data and whose sole argument is each individual `slice` of the pie, allowing you to customize each slice as needed. E.g. this slice will have all the data needed to render a `Pie.Slice />`.