From bbafc32cf8a3b4369a2ca3858426fafbc5512900 Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Tue, 6 Feb 2024 13:48:50 -0800
Subject: [PATCH 01/15] feat: pie chart

This is a v1 pie chart implementation that renders pie charts, without labels and without gestures.

It sort of only has one option beyond the pie chart, which is to render an inset inside the chart, which is like a border of each slice.

No docs yet either, beside the example page, which only renders in dev mode currently.
---
 example/app/consts/routes.ts           |   6 ++
 example/app/pie-chart.tsx              | 122 +++++++++++++++++++++++++
 lib/src/index.ts                       |   9 ++
 lib/src/pie/PieChart.tsx               |  93 +++++++++++++++++++
 lib/src/pie/PieSlice.tsx               |  27 ++++++
 lib/src/pie/PieSliceInset.tsx          |  24 +++++
 lib/src/pie/hooks/useSliceInsetPath.ts |  53 +++++++++++
 lib/src/pie/hooks/useSlicePath.ts      |  71 ++++++++++++++
 lib/src/pie/utils/radians.ts           |  16 ++++
 lib/src/types.ts                       |   3 +
 10 files changed, 424 insertions(+)
 create mode 100644 example/app/pie-chart.tsx
 create mode 100644 lib/src/pie/PieChart.tsx
 create mode 100644 lib/src/pie/PieSlice.tsx
 create mode 100644 lib/src/pie/PieSliceInset.tsx
 create mode 100644 lib/src/pie/hooks/useSliceInsetPath.ts
 create mode 100644 lib/src/pie/hooks/useSlicePath.ts
 create mode 100644 lib/src/pie/utils/radians.ts

diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts
index 6c00c8cd..401ac9d2 100644
--- a/example/app/consts/routes.ts
+++ b/example/app/consts/routes.ts
@@ -85,6 +85,12 @@ if (__DEV__) {
         "This page shows multiple charts with gestures inside a scrollview to ensure both platforms allow for this behavior.",
       path: "/scrollview-charts",
     },
+    {
+      title: "Pie Chart (in progres)",
+      description:
+        "This is a simple Pie chart in Victory that supports insets between each slice. No labels, no gestures...yet!! (coming soon ™️)",
+      path: "/pie-chart",
+    },
   );
 }
 
diff --git a/example/app/pie-chart.tsx b/example/app/pie-chart.tsx
new file mode 100644
index 00000000..7c99283e
--- /dev/null
+++ b/example/app/pie-chart.tsx
@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import { PieChart, PieSlice, PieSliceInset } from "victory-native";
+import { InfoCard } from "example/components/InfoCard";
+import { Button } from "example/components/Button";
+import { InputSlider } from "example/components/InputSlider";
+import { InputColor } from "example/components/InputColor";
+import { appColors } from "./consts/colors";
+import { descriptionForRoute } from "./consts/routes";
+
+const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 25;
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: index % 2 ? "Even Label" : "Odd Label",
+  }));
+
+export default function PieChartPlayground(props: { segment: string }) {
+  const description = descriptionForRoute(props.segment);
+  const [data, setData] = useState(DATA(5));
+  const [insetWidth, setInsetWidth] = useState(4);
+  const [insetColor, setInsetColor] = useState<string>("#fafafa");
+
+  return (
+    <SafeAreaView style={styles.safeView}>
+      <ScrollView>
+        <View style={styles.chart}>
+          <PieChart
+            data={data}
+            labelKey={"label"}
+            valueKey={"value"}
+            colorKey={"color"}
+          >
+            {({ slice, size }) => {
+              return (
+                <>
+                  <PieSlice slice={slice} size={size} />
+                  <PieSliceInset
+                    size={size}
+                    slice={slice}
+                    inset={{ width: insetWidth, color: insetColor }}
+                  />
+                </>
+              );
+            }}
+          </PieChart>
+        </View>
+
+        <ScrollView
+          style={styles.optionsScrollView}
+          contentContainerStyle={styles.options}
+        >
+          <InfoCard style={{ marginBottom: 16 }}>{description}</InfoCard>
+          <View
+            style={{
+              flexDirection: "row",
+              gap: 12,
+              marginTop: 10,
+              marginBottom: 16,
+            }}
+          >
+            <Button
+              style={{ flex: 1 }}
+              onPress={() => setData((data) => DATA(data.length))}
+              title="Shuffle Data"
+            />
+          </View>
+          <InputSlider
+            label="Inset width"
+            maxValue={8}
+            minValue={3}
+            step={1}
+            value={insetWidth}
+            onChange={setInsetWidth}
+          />
+          <InputColor
+            label="Inset color"
+            color={insetColor}
+            onChange={setInsetColor}
+          />
+        </ScrollView>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeView: {
+    flex: 1,
+    backgroundColor: appColors.viewBackground.light,
+    $dark: {
+      backgroundColor: appColors.viewBackground.dark,
+    },
+  },
+  chart: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginVertical: 20,
+  },
+  optionsScrollView: {
+    flex: 1,
+    backgroundColor: appColors.cardBackground.light,
+    $dark: {
+      backgroundColor: appColors.cardBackground.dark,
+    },
+  },
+  options: {
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+  },
+});
diff --git a/lib/src/index.ts b/lib/src/index.ts
index 2c961d76..e2049217 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -45,3 +45,12 @@ export { Scatter, type ScatterShape } from "./cartesian/components/Scatter";
 
 // Grid and Axis
 export { CartesianAxis } from "./cartesian/components/CartesianAxis";
+
+/**
+ * Pie chart exports (including useful types)
+ */
+export { PieChart } from "./pie/PieChart";
+export { PieSlice } from "./pie/PieSlice";
+export { PieSliceInset } from "./pie/PieSliceInset";
+export { useSlicePath } from "./pie/hooks/useSlicePath";
+export { useSliceInsetPath } from "./pie/hooks/useSliceInsetPath";
diff --git a/lib/src/pie/PieChart.tsx b/lib/src/pie/PieChart.tsx
new file mode 100644
index 00000000..23a09726
--- /dev/null
+++ b/lib/src/pie/PieChart.tsx
@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Canvas, type Color } from "@shopify/react-native-skia";
+import { StyleSheet, useWindowDimensions } from "react-native";
+import type { ColorFields, InputFields, NumericalFields } from "../types";
+import { type PieSliceData } from "./PieSlice";
+
+const CIRCLE_SWEEP_DEGREES = 360;
+
+type PieChartProps<
+  RawData extends Record<string, unknown>,
+  LabelKey extends keyof InputFields<RawData>,
+  ValueKey extends keyof NumericalFields<RawData>,
+  ColorKey extends keyof ColorFields<RawData>,
+> = {
+  data: RawData[];
+  labelKey: LabelKey;
+  valueKey: ValueKey;
+  colorKey: ColorKey;
+  size?: number;
+  children: (args: { slice: PieSliceData; size: number }) => React.ReactNode;
+};
+
+export const PieChart = <
+  RawData extends Record<string, unknown>,
+  LabelKey extends keyof InputFields<RawData>,
+  ValueKey extends keyof NumericalFields<RawData>,
+  ColorKey extends keyof ColorFields<RawData>,
+>(
+  props: PieChartProps<RawData, LabelKey, ValueKey, ColorKey>,
+) => {
+  const { width } = useWindowDimensions();
+
+  const {
+    size = width * 0.8,
+    data: _data,
+    labelKey,
+    valueKey,
+    colorKey,
+    children,
+  } = props;
+
+  const label = labelKey as keyof RawData;
+
+  const totalCircleValue = _data.reduce(
+    (sum, entry) => sum + Number(entry[valueKey]),
+    0,
+  ); // The sum all the slices' values
+
+  const data = React.useMemo(() => {
+    let startAngle = 0; // Initialize the start angle for the first slice
+
+    const enhanced: PieSliceData[] = _data.map((datum) => {
+      const sliceValue = datum[valueKey] as number;
+      const sliceLabel = datum[label] 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 endAngle = initialStartAngle + sweepAngle; // the sum of sweep + start
+
+      startAngle += sweepAngle; // the next startAngle is the accumulation of each sweep
+      return {
+        value: sliceValue,
+        label: sliceLabel,
+        color: sliceColor,
+        startAngle: initialStartAngle,
+        endAngle: endAngle,
+        sweepAngle,
+        sliceIsEntireCircle: _data.length === 1,
+      };
+    });
+
+    return enhanced;
+  }, [valueKey, _data, totalCircleValue, colorKey, label]);
+
+  return (
+    <Canvas style={[styles.container, { width: size, height: size }]}>
+      {data.map((slice, index) => {
+        return (
+          <React.Fragment key={index}>
+            {children({ size, slice })}
+          </React.Fragment>
+        );
+      })}
+    </Canvas>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
diff --git a/lib/src/pie/PieSlice.tsx b/lib/src/pie/PieSlice.tsx
new file mode 100644
index 00000000..f1df9340
--- /dev/null
+++ b/lib/src/pie/PieSlice.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { type Color, Path, type PathProps } from "@shopify/react-native-skia";
+import { useSlicePath } from "./hooks/useSlicePath";
+
+export type PieSliceData = {
+  value: number;
+  label: string;
+  color: Color;
+  startAngle: number;
+  endAngle: number;
+  sweepAngle: number;
+  sliceIsEntireCircle: boolean;
+};
+
+type AdditionalPathProps = Partial<Omit<PathProps, "color" | "path">>;
+
+type PieSliceProps = {
+  slice: PieSliceData;
+  size: number;
+} & AdditionalPathProps;
+
+export const PieSlice = (props: PieSliceProps) => {
+  const { size, slice, ...rest } = props;
+  const path = useSlicePath({ size, slice });
+
+  return <Path path={path} color={slice.color} style="fill" {...rest} />;
+};
diff --git a/lib/src/pie/PieSliceInset.tsx b/lib/src/pie/PieSliceInset.tsx
new file mode 100644
index 00000000..1c945e89
--- /dev/null
+++ b/lib/src/pie/PieSliceInset.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { type Color, Path, type PathProps } from "@shopify/react-native-skia";
+import type { PieSliceData } from "./PieSlice";
+import { useSliceInsetPath } from "./hooks/useSliceInsetPath";
+
+export type PieSliceInsetData = {
+  width: number;
+  color: Color;
+};
+
+type AdditionalPathProps = Partial<Omit<PathProps, "color" | "path">>;
+
+type PieSliceInsetProps = {
+  slice: PieSliceData;
+  size: number;
+  inset: PieSliceInsetData;
+} & AdditionalPathProps;
+
+export const PieSliceInset = (props: PieSliceInsetProps) => {
+  const { size, slice, inset, ...rest } = props;
+  const [path, insetPaint] = useSliceInsetPath({ size, slice, inset });
+
+  return <Path path={path} paint={insetPaint} {...rest} />;
+};
diff --git a/lib/src/pie/hooks/useSliceInsetPath.ts b/lib/src/pie/hooks/useSliceInsetPath.ts
new file mode 100644
index 00000000..d59df406
--- /dev/null
+++ b/lib/src/pie/hooks/useSliceInsetPath.ts
@@ -0,0 +1,53 @@
+import { Skia, vec, PaintStyle } from "@shopify/react-native-skia";
+import { useMemo } from "react";
+import {
+  calculatePointOnCircumference,
+  degreesToRadians,
+} from "../utils/radians";
+import type { PieSliceData } from "../PieSlice";
+import type { PieSliceInsetData } from "../PieSliceInset";
+
+type SliceInsetPathArgs = {
+  size: number;
+  slice: PieSliceData;
+  inset: PieSliceInsetData;
+};
+export const useSliceInsetPath = ({
+  inset,
+  slice,
+  size,
+}: SliceInsetPathArgs) => {
+  const [path, paint] = useMemo(() => {
+    const radius = size / 2;
+    const center = vec(radius, radius);
+
+    const path = Skia.Path.Make();
+
+    // Convert angles to radians for calculation
+    const startRadians = degreesToRadians(slice.startAngle);
+    const endRadians = degreesToRadians(slice.endAngle);
+
+    // Calculate start and end points on the circumference
+    const startPoint = calculatePointOnCircumference(
+      center,
+      radius,
+      startRadians,
+    );
+    const endPoint = calculatePointOnCircumference(center, radius, endRadians);
+
+    // Move to center, draw line to start point, move to center, draw line to end point
+    path.moveTo(center.x, center.y);
+    path.lineTo(startPoint.x, startPoint.y);
+    path.moveTo(center.x, center.y);
+    path.lineTo(endPoint.x, endPoint.y);
+
+    // Create Paint for inset
+    const insetPaint = Skia.Paint();
+    insetPaint.setColor(Skia.Color(inset.color));
+    insetPaint.setStyle(PaintStyle.Stroke);
+    insetPaint.setStrokeWidth(inset.width);
+
+    return [path, insetPaint] as const;
+  }, [slice, inset, size]);
+  return [path, paint] as const;
+};
diff --git a/lib/src/pie/hooks/useSlicePath.ts b/lib/src/pie/hooks/useSlicePath.ts
new file mode 100644
index 00000000..72f02fa5
--- /dev/null
+++ b/lib/src/pie/hooks/useSlicePath.ts
@@ -0,0 +1,71 @@
+import { Skia, vec, type SkPath } from "@shopify/react-native-skia";
+import { useMemo } from "react";
+import {
+  calculatePointOnCircumference,
+  degreesToRadians,
+} from "../utils/radians";
+import type { PieSliceData } from "../PieSlice";
+
+type SlicePathArgs = {
+  size: number;
+  inset?: number;
+  slice: PieSliceData;
+};
+export const useSlicePath = ({ slice, size }: SlicePathArgs): SkPath => {
+  const path = useMemo(() => {
+    const radius = size / 2;
+    const center = vec(radius, radius);
+
+    const path = Skia.Path.Make();
+
+    // Convert angles to radians
+    const startRadians = degreesToRadians(slice.startAngle);
+
+    // Calculate the points on the circumference for the start and end angles
+    const startPoint = calculatePointOnCircumference(
+      center,
+      radius,
+      startRadians,
+    );
+
+    if (slice.sliceIsEntireCircle) {
+      // If there's only one data point, draw the entire circle
+      path.addOval(
+        Skia.XYWHRect(
+          center.x - radius,
+          center.y - radius,
+          radius * 2,
+          radius * 2,
+        ),
+      );
+    } else {
+      // Move to the center of the pie
+      path.moveTo(center.x, center.y);
+
+      // Line to the start point
+      path.lineTo(startPoint.x, startPoint.y);
+
+      // Draw the arc
+      path.arcToOval(
+        Skia.XYWHRect(
+          center.x - radius,
+          center.y - radius,
+          radius * 2,
+          radius * 2,
+        ),
+        slice.startAngle,
+        slice.endAngle - slice.startAngle,
+        false,
+      );
+
+      // Line back to the center
+      path.lineTo(center.x, center.y);
+    }
+
+    // Close the path
+    path.close();
+    return path;
+  }, [slice, size]);
+
+  return path;
+};
diff --git a/lib/src/pie/utils/radians.ts b/lib/src/pie/utils/radians.ts
new file mode 100644
index 00000000..980118c0
--- /dev/null
+++ b/lib/src/pie/utils/radians.ts
@@ -0,0 +1,16 @@
+import type { SkPoint } from "@shopify/react-native-skia";
+
+export function degreesToRadians(degrees: number): number {
+  return (degrees * Math.PI) / 180;
+}
+
+export function calculatePointOnCircumference(
+  center: SkPoint,
+  radius: number,
+  angleInRadians: number,
+): SkPoint {
+  return {
+    x: center.x + radius * Math.cos(angleInRadians),
+    y: center.y + radius * Math.sin(angleInRadians),
+  };
+}
diff --git a/lib/src/types.ts b/lib/src/types.ts
index 640494cc..d865db71 100644
--- a/lib/src/types.ts
+++ b/lib/src/types.ts
@@ -86,6 +86,9 @@ export type InputFields<T> = {
 export type NumericalFields<T> = {
   [K in keyof T as T[K] extends MaybeNumber ? K : never]: T[K];
 };
+export type ColorFields<T> = {
+  [K in keyof T as T[K] extends Color ? K : never]: T[K];
+};
 
 export type AxisProps<
   RawData extends Record<string, unknown>,

From 7f1ff62e8eb9c01b24eb2dbcc58fc3eb60ee5176 Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Thu, 22 Feb 2024 14:12:19 -0800
Subject: [PATCH 02/15] feat: pie chart legend

- adds pie chart legend support
- adds contexts to consume slices/set legend position, and probably more later.
- readjusts exports/implementation
- adds label, but not exported yet (wip)
---
 example/app/consts/routes.ts             |   4 +-
 example/app/pie-chart.tsx                |  72 +++++++--------
 example/components/InfoCard.tsx          |   1 -
 lib/src/index.ts                         |   4 +-
 lib/src/pie/PieChart.tsx                 | 112 ++++++++++++++++++-----
 lib/src/pie/PieChartLegend.tsx           |  50 ++++++++++
 lib/src/pie/PieChartLegendItem.tsx       |  51 +++++++++++
 lib/src/pie/PieSlice.tsx                 |  28 ++++--
 lib/src/pie/PieSliceInset.tsx            |  15 +--
 lib/src/pie/PieSliceLabel.tsx            |  49 ++++++++++
 lib/src/pie/contexts/PieChartContext.tsx |  40 ++++++++
 lib/src/pie/contexts/PieSliceContext.tsx |  39 ++++++++
 lib/src/pie/hooks/useSliceInsetPath.ts   |  15 +--
 lib/src/pie/hooks/useSlicePath.ts        |  10 +-
 lib/src/pie/index.ts                     |  19 ++++
 15 files changed, 411 insertions(+), 98 deletions(-)
 create mode 100644 lib/src/pie/PieChartLegend.tsx
 create mode 100644 lib/src/pie/PieChartLegendItem.tsx
 create mode 100644 lib/src/pie/PieSliceLabel.tsx
 create mode 100644 lib/src/pie/contexts/PieChartContext.tsx
 create mode 100644 lib/src/pie/contexts/PieSliceContext.tsx
 create mode 100644 lib/src/pie/index.ts

diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts
index 401ac9d2..ff238567 100644
--- a/example/app/consts/routes.ts
+++ b/example/app/consts/routes.ts
@@ -86,9 +86,9 @@ if (__DEV__) {
       path: "/scrollview-charts",
     },
     {
-      title: "Pie Chart (in progres)",
+      title: "Pie Chart (in progress)",
       description:
-        "This is a simple Pie chart in Victory that supports insets between each slice. No labels, no gestures...yet!! (coming soon ™️)",
+        "This is a simple Pie chart in Victory. It has support for a displaying a legend, and customizing each slice. No gestures are supported yet. This is a work in progress.",
       path: "/pie-chart",
     },
   );
diff --git a/example/app/pie-chart.tsx b/example/app/pie-chart.tsx
index 7c99283e..fb2b3d7a 100644
--- a/example/app/pie-chart.tsx
+++ b/example/app/pie-chart.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
-import { PieChart, PieSlice, PieSliceInset } from "victory-native";
+import { Pie } from "victory-native";
 import { InfoCard } from "example/components/InfoCard";
 import { Button } from "example/components/Button";
 import { InputSlider } from "example/components/InputSlider";
@@ -8,7 +8,7 @@ import { InputColor } from "example/components/InputColor";
 import { appColors } from "./consts/colors";
 import { descriptionForRoute } from "./consts/routes";
 
-const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 25;
+const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 125;
 function generateRandomColor(): string {
   // Generating a random number between 0 and 0xFFFFFF
   const randomColor = Math.floor(Math.random() * 0xffffff);
@@ -20,7 +20,7 @@ const DATA = (numberPoints = 5) =>
   Array.from({ length: numberPoints }, (_, index) => ({
     value: randomNumber(),
     color: generateRandomColor(),
-    label: index % 2 ? "Even Label" : "Odd Label",
+    label: `Label ${index + 1}`,
   }));
 
 export default function PieChartPlayground(props: { segment: string }) {
@@ -32,33 +32,44 @@ export default function PieChartPlayground(props: { segment: string }) {
   return (
     <SafeAreaView style={styles.safeView}>
       <ScrollView>
-        <View style={styles.chart}>
-          <PieChart
+        <View
+          style={{
+            height: "45%",
+          }}
+        >
+          <Pie.Chart
             data={data}
             labelKey={"label"}
             valueKey={"value"}
             colorKey={"color"}
+            renderLegend={(data) => (
+              <Pie.ChartLegend
+                containerStyle={{ alignSelf: "center" }}
+                position="bottom"
+                data={data}
+              >
+                {({ slice }) => <Pie.ChartLegendItem slice={slice} />}
+              </Pie.ChartLegend>
+            )}
           >
-            {({ slice, size }) => {
+            {({ slice }) => {
               return (
-                <>
-                  <PieSlice slice={slice} size={size} />
-                  <PieSliceInset
-                    size={size}
-                    slice={slice}
+                <Pie.SliceProvider slice={slice}>
+                  <Pie.Slice />
+                  <Pie.SliceInset
                     inset={{ width: insetWidth, color: insetColor }}
                   />
-                </>
+                </Pie.SliceProvider>
               );
             }}
-          </PieChart>
+          </Pie.Chart>
         </View>
 
-        <ScrollView
-          style={styles.optionsScrollView}
-          contentContainerStyle={styles.options}
-        >
-          <InfoCard style={{ marginBottom: 16 }}>{description}</InfoCard>
+        <View style={{ flexGrow: 1, padding: 15 }}>
+          <InfoCard style={{ flex: 0, marginBottom: 16 }}>
+            {description}
+          </InfoCard>
+
           <View
             style={{
               flexDirection: "row",
@@ -75,8 +86,8 @@ export default function PieChartPlayground(props: { segment: string }) {
           </View>
           <InputSlider
             label="Inset width"
-            maxValue={8}
-            minValue={3}
+            maxValue={6}
+            minValue={0}
             step={1}
             value={insetWidth}
             onChange={setInsetWidth}
@@ -86,7 +97,7 @@ export default function PieChartPlayground(props: { segment: string }) {
             color={insetColor}
             onChange={setInsetColor}
           />
-        </ScrollView>
+        </View>
       </ScrollView>
     </SafeAreaView>
   );
@@ -100,23 +111,4 @@ const styles = StyleSheet.create({
       backgroundColor: appColors.viewBackground.dark,
     },
   },
-  chart: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    marginVertical: 20,
-  },
-  optionsScrollView: {
-    flex: 1,
-    backgroundColor: appColors.cardBackground.light,
-    $dark: {
-      backgroundColor: appColors.cardBackground.dark,
-    },
-  },
-  options: {
-    paddingHorizontal: 20,
-    paddingVertical: 15,
-    alignItems: "flex-start",
-    justifyContent: "flex-start",
-  },
 });
diff --git a/example/components/InfoCard.tsx b/example/components/InfoCard.tsx
index 0cc464c1..df06d6a6 100644
--- a/example/components/InfoCard.tsx
+++ b/example/components/InfoCard.tsx
@@ -45,7 +45,6 @@ const styles = StyleSheet.create({
     },
   },
   content: {
-    flex: 1,
     flexDirection: "row",
     alignItems: "flex-start",
     justifyContent: "flex-start",
diff --git a/lib/src/index.ts b/lib/src/index.ts
index e2049217..778a7f2a 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -49,8 +49,6 @@ export { CartesianAxis } from "./cartesian/components/CartesianAxis";
 /**
  * Pie chart exports (including useful types)
  */
-export { PieChart } from "./pie/PieChart";
-export { PieSlice } from "./pie/PieSlice";
-export { PieSliceInset } from "./pie/PieSliceInset";
+export { Pie } from "./pie";
 export { useSlicePath } from "./pie/hooks/useSlicePath";
 export { useSliceInsetPath } from "./pie/hooks/useSliceInsetPath";
diff --git a/lib/src/pie/PieChart.tsx b/lib/src/pie/PieChart.tsx
index 23a09726..16a7cdb3 100644
--- a/lib/src/pie/PieChart.tsx
+++ b/lib/src/pie/PieChart.tsx
@@ -1,8 +1,18 @@
 import * as React from "react";
-import { Canvas, type Color } from "@shopify/react-native-skia";
-import { StyleSheet, useWindowDimensions } from "react-native";
+import { Canvas, vec, type Color } from "@shopify/react-native-skia";
+import {
+  StyleSheet,
+  View,
+  type ViewStyle,
+  type LayoutChangeEvent,
+  type StyleProp,
+} from "react-native";
 import type { ColorFields, InputFields, NumericalFields } from "../types";
 import { type PieSliceData } from "./PieSlice";
+import {
+  PieChartProvider,
+  usePieChartContext,
+} from "./contexts/PieChartContext";
 
 const CIRCLE_SWEEP_DEGREES = 360;
 
@@ -12,15 +22,17 @@ type PieChartProps<
   ValueKey extends keyof NumericalFields<RawData>,
   ColorKey extends keyof ColorFields<RawData>,
 > = {
+  children: (args: { slice: PieSliceData }) => React.ReactNode;
+  colorKey: ColorKey;
+  containerStyle?: StyleProp<ViewStyle>;
+  canvasStyle?: StyleProp<ViewStyle>;
   data: RawData[];
   labelKey: LabelKey;
+  renderLegend?: (data: PieSliceData[]) => React.ReactNode;
   valueKey: ValueKey;
-  colorKey: ColorKey;
-  size?: number;
-  children: (args: { slice: PieSliceData; size: number }) => React.ReactNode;
 };
 
-export const PieChart = <
+const PieChartBase = <
   RawData extends Record<string, unknown>,
   LabelKey extends keyof InputFields<RawData>,
   ValueKey extends keyof NumericalFields<RawData>,
@@ -28,23 +40,43 @@ export const PieChart = <
 >(
   props: PieChartProps<RawData, LabelKey, ValueKey, ColorKey>,
 ) => {
-  const { width } = useWindowDimensions();
-
   const {
-    size = width * 0.8,
+    containerStyle,
     data: _data,
     labelKey,
     valueKey,
     colorKey,
+    canvasStyle,
+    renderLegend,
     children,
   } = props;
 
+  const { position: legendPosition } = usePieChartContext();
+
   const label = labelKey as keyof RawData;
 
+  // The sum all the slices' values
   const totalCircleValue = _data.reduce(
     (sum, entry) => sum + Number(entry[valueKey]),
     0,
-  ); // The sum all the slices' values
+  );
+
+  const [canvasSize, setCanvasSize] = React.useState({ width: 0, height: 0 });
+
+  const [hasMeasuredLayoutSize, setHasMeasuredLayoutSize] =
+    React.useState(false);
+
+  const onLayout = React.useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      setHasMeasuredLayoutSize(true);
+      setCanvasSize(layout);
+    },
+    [],
+  );
+
+  const { width, height } = canvasSize; // Get the dynamic canvas size
+  const radius = Math.min(width, height) / 2; // Calculate the radius based on canvas size
+  const center = vec(width / 2, height / 2);
 
   const data = React.useMemo(() => {
     let startAngle = 0; // Initialize the start angle for the first slice
@@ -67,27 +99,65 @@ export const PieChart = <
         endAngle: endAngle,
         sweepAngle,
         sliceIsEntireCircle: _data.length === 1,
+        radius,
+        center,
       };
     });
 
     return enhanced;
-  }, [valueKey, _data, totalCircleValue, colorKey, label]);
+  }, [valueKey, _data, totalCircleValue, colorKey, label, radius, center]);
+
+  // Determine the container's flexDirection based on the legend's position prop
+  const baseFlexDirection =
+    legendPosition === "left" || legendPosition === "right" ? "row" : "column";
+  const isReverse = legendPosition === "left" || legendPosition === "top";
+  const dynamicStyle: ViewStyle = {
+    flexDirection: isReverse
+      ? `${baseFlexDirection}-reverse`
+      : baseFlexDirection,
+  };
+
+  return (
+    <View style={[styles.baseContainer, dynamicStyle, containerStyle]}>
+      <Canvas
+        onLayout={onLayout}
+        style={[
+          styles.canvasContainer,
+          hasMeasuredLayoutSize ? { width, height } : null,
+          canvasStyle,
+        ]}
+      >
+        {data.map((slice, index) => {
+          return (
+            <React.Fragment key={index}>{children({ slice })}</React.Fragment>
+          );
+        })}
+      </Canvas>
+      {renderLegend?.(data)}
+    </View>
+  );
+};
 
+export const PieChart = <
+  RawData extends Record<string, unknown>,
+  LabelKey extends keyof InputFields<RawData>,
+  ValueKey extends keyof NumericalFields<RawData>,
+  ColorKey extends keyof ColorFields<RawData>,
+>(
+  props: PieChartProps<RawData, LabelKey, ValueKey, ColorKey>,
+) => {
   return (
-    <Canvas style={[styles.container, { width: size, height: size }]}>
-      {data.map((slice, index) => {
-        return (
-          <React.Fragment key={index}>
-            {children({ size, slice })}
-          </React.Fragment>
-        );
-      })}
-    </Canvas>
+    <PieChartProvider>
+      <PieChartBase {...props} />
+    </PieChartProvider>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
+  baseContainer: {
+    flex: 1,
+  },
+  canvasContainer: {
     flex: 1,
   },
 });
diff --git a/lib/src/pie/PieChartLegend.tsx b/lib/src/pie/PieChartLegend.tsx
new file mode 100644
index 00000000..2d2620a4
--- /dev/null
+++ b/lib/src/pie/PieChartLegend.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import type { PieSliceData } from "./PieSlice";
+import { usePieChartContext } from "./contexts/PieChartContext";
+
+export type PieLegendPosition = "top" | "bottom" | "left" | "right";
+type PieChartLegendProps = {
+  data: PieSliceData[];
+  position?: PieLegendPosition;
+  containerStyle?: StyleProp<ViewStyle>;
+  children: (args: { slice: PieSliceData }) => React.ReactNode;
+};
+
+export const PieChartLegend = (props: PieChartLegendProps) => {
+  const { data, position = "bottom", containerStyle, children } = props;
+
+  const { setPosition } = usePieChartContext();
+  React.useLayoutEffect(() => {
+    setPosition(position);
+    return () => {};
+  }, [position, setPosition]);
+
+  const isHorizontal = position === "top" || position === "bottom";
+  const baseContainerStyle = isHorizontal
+    ? styles.containerRow
+    : styles.containerColumn;
+
+  return (
+    <View style={[baseContainerStyle, containerStyle]}>
+      {data.map((slice, index) => {
+        return (
+          <React.Fragment key={index}>{children({ slice })}</React.Fragment>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    overflow: "hidden",
+  },
+  containerColumn: {
+    justifyContent: "center",
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+});
diff --git a/lib/src/pie/PieChartLegendItem.tsx b/lib/src/pie/PieChartLegendItem.tsx
new file mode 100644
index 00000000..7d038a88
--- /dev/null
+++ b/lib/src/pie/PieChartLegendItem.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import {
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from "react-native";
+import { Canvas, Circle, vec } from "@shopify/react-native-skia";
+import { Text } from "example/components/Text";
+import type { PieSliceData } from "./PieSlice";
+
+type PieChartLegendItemProps = {
+  slice: PieSliceData;
+  formatLabel?: (label: string) => string;
+  containerStyle?: StyleProp<ViewStyle>;
+  canvasStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+};
+
+export const PieChartLegendItem = (props: PieChartLegendItemProps) => {
+  const { slice, formatLabel, containerStyle, canvasStyle, textStyle } = props;
+  const { color, label } = slice;
+  const displayLabel = formatLabel ? formatLabel(label) : label;
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <Canvas style={[styles.canvas, canvasStyle]}>
+        <Circle
+          c={vec(styles.canvas.height / 2, styles.canvas.height / 2)}
+          r={styles.canvas.height / 2}
+          color={color}
+        />
+      </Canvas>
+      <Text style={[textStyle]}>{displayLabel}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    margin: 5,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  canvas: {
+    height: 10,
+    width: 10,
+    marginRight: 5,
+  },
+});
diff --git a/lib/src/pie/PieSlice.tsx b/lib/src/pie/PieSlice.tsx
index f1df9340..756feefe 100644
--- a/lib/src/pie/PieSlice.tsx
+++ b/lib/src/pie/PieSlice.tsx
@@ -1,6 +1,12 @@
 import React from "react";
-import { type Color, Path, type PathProps } from "@shopify/react-native-skia";
+import {
+  type Color,
+  Path,
+  type PathProps,
+  type SkPoint,
+} from "@shopify/react-native-skia";
 import { useSlicePath } from "./hooks/useSlicePath";
+import { usePieSliceContext } from "./contexts/PieSliceContext";
 
 export type PieSliceData = {
   value: number;
@@ -10,18 +16,22 @@ export type PieSliceData = {
   endAngle: number;
   sweepAngle: number;
   sliceIsEntireCircle: boolean;
+  radius: number;
+  center: SkPoint;
 };
 
 type AdditionalPathProps = Partial<Omit<PathProps, "color" | "path">>;
-
-type PieSliceProps = {
-  slice: PieSliceData;
-  size: number;
-} & AdditionalPathProps;
+type PieSliceProps = AdditionalPathProps;
 
 export const PieSlice = (props: PieSliceProps) => {
-  const { size, slice, ...rest } = props;
-  const path = useSlicePath({ size, slice });
+  const { children, ...rest } = props;
+  const { slice } = usePieSliceContext();
+
+  const path = useSlicePath({ slice });
 
-  return <Path path={path} color={slice.color} style="fill" {...rest} />;
+  return (
+    <Path path={path} color={slice.color} style="fill" {...rest}>
+      {children}
+    </Path>
+  );
 };
diff --git a/lib/src/pie/PieSliceInset.tsx b/lib/src/pie/PieSliceInset.tsx
index 1c945e89..29a80223 100644
--- a/lib/src/pie/PieSliceInset.tsx
+++ b/lib/src/pie/PieSliceInset.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { type Color, Path, type PathProps } from "@shopify/react-native-skia";
-import type { PieSliceData } from "./PieSlice";
 import { useSliceInsetPath } from "./hooks/useSliceInsetPath";
+import { usePieSliceContext } from "./contexts/PieSliceContext";
 
 export type PieSliceInsetData = {
   width: number;
@@ -11,14 +11,17 @@ export type PieSliceInsetData = {
 type AdditionalPathProps = Partial<Omit<PathProps, "color" | "path">>;
 
 type PieSliceInsetProps = {
-  slice: PieSliceData;
-  size: number;
   inset: PieSliceInsetData;
 } & AdditionalPathProps;
 
 export const PieSliceInset = (props: PieSliceInsetProps) => {
-  const { size, slice, inset, ...rest } = props;
-  const [path, insetPaint] = useSliceInsetPath({ size, slice, inset });
+  const { inset, children, ...rest } = props;
+  const { slice } = usePieSliceContext();
+  const [path, insetPaint] = useSliceInsetPath({ slice, inset });
 
-  return <Path path={path} paint={insetPaint} {...rest} />;
+  return (
+    <Path path={path} paint={insetPaint} {...rest}>
+      {children}
+    </Path>
+  );
 };
diff --git a/lib/src/pie/PieSliceLabel.tsx b/lib/src/pie/PieSliceLabel.tsx
new file mode 100644
index 00000000..fb41ea0a
--- /dev/null
+++ b/lib/src/pie/PieSliceLabel.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  Text,
+  Skia,
+  type TextProps,
+  type SkFont,
+} from "@shopify/react-native-skia";
+import {
+  calculatePointOnCircumference,
+  degreesToRadians,
+} from "./utils/radians";
+import { usePieSliceContext } from "./contexts/PieSliceContext";
+
+type AdditionalPathProps = Partial<Omit<TextProps, "font">>;
+
+type PieSliceLabelDataProps = {
+  font: SkFont | null;
+} & AdditionalPathProps;
+
+export const PieSliceLabel = ({ font }: PieSliceLabelDataProps) => {
+  const { slice } = usePieSliceContext();
+  const { startAngle, endAngle, label, radius, center } = slice;
+
+  // Create a paint object for the text
+  const textPaint = Skia.Paint();
+  textPaint.setAntiAlias(true);
+  textPaint.setColor(Skia.Color("black"));
+
+  // Calculate the midpoint angle of the slice
+  const midAngleRadians = degreesToRadians((startAngle + endAngle) / 2);
+
+  // Position the label halfway between the center of the pie and the edge of the slice
+  const labelRadius2 = radius / 2;
+  const labelPosition = calculatePointOnCircumference(
+    center,
+    labelRadius2,
+    midAngleRadians,
+  );
+
+  return (
+    <Text
+      font={font}
+      x={labelPosition.x}
+      y={labelPosition.y}
+      text={label}
+      paint={textPaint}
+    />
+  );
+};
diff --git a/lib/src/pie/contexts/PieChartContext.tsx b/lib/src/pie/contexts/PieChartContext.tsx
new file mode 100644
index 00000000..c1f2b04c
--- /dev/null
+++ b/lib/src/pie/contexts/PieChartContext.tsx
@@ -0,0 +1,40 @@
+import React, {
+  useContext,
+  createContext,
+  useState,
+  type PropsWithChildren,
+} from "react";
+import type { PieLegendPosition } from "../PieChartLegend";
+
+interface PieChartContext {
+  position: PieLegendPosition;
+  setPosition: React.Dispatch<React.SetStateAction<PieLegendPosition>>;
+}
+
+const PieChartContext = createContext<PieChartContext | undefined>(undefined);
+
+interface PieChartProviderProps {}
+
+export const PieChartProvider = ({
+  children,
+}: PropsWithChildren<PieChartProviderProps>) => {
+  const [position, setPosition] = useState<PieLegendPosition>("bottom");
+
+  return (
+    <PieChartContext.Provider value={{ position, setPosition }}>
+      {children}
+    </PieChartContext.Provider>
+  );
+};
+
+export const usePieChartContext = () => {
+  const context = useContext(PieChartContext);
+
+  if (context === undefined) {
+    throw new Error(
+      "usePieChartContext must be used within a PieChartProvider",
+    );
+  }
+
+  return context;
+};
diff --git a/lib/src/pie/contexts/PieSliceContext.tsx b/lib/src/pie/contexts/PieSliceContext.tsx
new file mode 100644
index 00000000..c6fce9bc
--- /dev/null
+++ b/lib/src/pie/contexts/PieSliceContext.tsx
@@ -0,0 +1,39 @@
+import React, {
+  useContext,
+  createContext,
+  type PropsWithChildren,
+} from "react";
+import type { PieSliceData } from "../PieSlice";
+
+interface PieSliceContext {
+  slice: PieSliceData;
+}
+
+const PieSliceContext = createContext<PieSliceContext | undefined>(undefined);
+
+interface PieSliceProviderProps {
+  slice: PieSliceData;
+}
+
+export const PieSliceProvider = ({
+  children,
+  slice: _slice,
+}: PropsWithChildren<PieSliceProviderProps>) => {
+  return (
+    <PieSliceContext.Provider value={{ slice: _slice }}>
+      {children}
+    </PieSliceContext.Provider>
+  );
+};
+
+export const usePieSliceContext = () => {
+  const context = useContext(PieSliceContext);
+
+  if (context === undefined) {
+    throw new Error(
+      "usePieSliceContext must be used within a PieSliceProvider",
+    );
+  }
+
+  return context;
+};
diff --git a/lib/src/pie/hooks/useSliceInsetPath.ts b/lib/src/pie/hooks/useSliceInsetPath.ts
index d59df406..e88f27cd 100644
--- a/lib/src/pie/hooks/useSliceInsetPath.ts
+++ b/lib/src/pie/hooks/useSliceInsetPath.ts
@@ -1,4 +1,4 @@
-import { Skia, vec, PaintStyle } from "@shopify/react-native-skia";
+import { Skia, PaintStyle } from "@shopify/react-native-skia";
 import { useMemo } from "react";
 import {
   calculatePointOnCircumference,
@@ -8,18 +8,12 @@ import type { PieSliceData } from "../PieSlice";
 import type { PieSliceInsetData } from "../PieSliceInset";
 
 type SliceInsetPathArgs = {
-  size: number;
   slice: PieSliceData;
   inset: PieSliceInsetData;
 };
-export const useSliceInsetPath = ({
-  inset,
-  slice,
-  size,
-}: SliceInsetPathArgs) => {
+export const useSliceInsetPath = ({ inset, slice }: SliceInsetPathArgs) => {
   const [path, paint] = useMemo(() => {
-    const radius = size / 2;
-    const center = vec(radius, radius);
+    const { radius, center } = slice;
 
     const path = Skia.Path.Make();
 
@@ -48,6 +42,7 @@ export const useSliceInsetPath = ({
     insetPaint.setStrokeWidth(inset.width);
 
     return [path, insetPaint] as const;
-  }, [slice, inset, size]);
+  }, [slice, inset]);
+
   return [path, paint] as const;
 };
diff --git a/lib/src/pie/hooks/useSlicePath.ts b/lib/src/pie/hooks/useSlicePath.ts
index 72f02fa5..eb954910 100644
--- a/lib/src/pie/hooks/useSlicePath.ts
+++ b/lib/src/pie/hooks/useSlicePath.ts
@@ -1,4 +1,4 @@
-import { Skia, vec, type SkPath } from "@shopify/react-native-skia";
+import { Skia, type SkPath } from "@shopify/react-native-skia";
 import { useMemo } from "react";
 import {
   calculatePointOnCircumference,
@@ -7,14 +7,12 @@ import {
 import type { PieSliceData } from "../PieSlice";
 
 type SlicePathArgs = {
-  size: number;
   inset?: number;
   slice: PieSliceData;
 };
-export const useSlicePath = ({ slice, size }: SlicePathArgs): SkPath => {
+export const useSlicePath = ({ slice }: SlicePathArgs): SkPath => {
   const path = useMemo(() => {
-    const radius = size / 2;
-    const center = vec(radius, radius);
+    const { radius, center } = slice;
 
     const path = Skia.Path.Make();
 
@@ -65,7 +63,7 @@ export const useSlicePath = ({ slice, size }: SlicePathArgs): SkPath => {
     // Close the path
     path.close();
     return path;
-  }, [slice, size]);
+  }, [slice]);
 
   return path;
 };
diff --git a/lib/src/pie/index.ts b/lib/src/pie/index.ts
new file mode 100644
index 00000000..cdfaec34
--- /dev/null
+++ b/lib/src/pie/index.ts
@@ -0,0 +1,19 @@
+import { PieChart } from "./PieChart";
+import { PieChartLegend } from "./PieChartLegend";
+import { PieChartLegendItem } from "./PieChartLegendItem";
+import { PieSlice } from "./PieSlice";
+import { PieSliceInset } from "./PieSliceInset";
+// import { PieSliceLabel } from "./PieSliceLabel";
+import { PieSliceProvider } from "./contexts/PieSliceContext";
+
+const Pie = {
+  Chart: PieChart,
+  Slice: PieSlice,
+  SliceProvider: PieSliceProvider,
+  SliceInset: PieSliceInset,
+  // SliceLabel: PieSliceLabel,
+  ChartLegend: PieChartLegend,
+  ChartLegendItem: PieChartLegendItem,
+};
+
+export { Pie };

From 46ec4b7ae256ef820616ae2499db0225ca1eedd4 Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Fri, 23 Feb 2024 14:05:58 -0800
Subject: [PATCH 03/15] small legend improvements

fixes some clipping that was happening since the canvas is a bit tight
---
 lib/src/pie/PieChartLegend.tsx     |  2 --
 lib/src/pie/PieChartLegendItem.tsx | 10 +++++-----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/lib/src/pie/PieChartLegend.tsx b/lib/src/pie/PieChartLegend.tsx
index 2d2620a4..504b2fa8 100644
--- a/lib/src/pie/PieChartLegend.tsx
+++ b/lib/src/pie/PieChartLegend.tsx
@@ -40,11 +40,9 @@ const styles = StyleSheet.create({
   containerRow: {
     flexDirection: "row",
     flexWrap: "wrap",
-    overflow: "hidden",
   },
   containerColumn: {
     justifyContent: "center",
     flexDirection: "column",
-    overflow: "hidden",
   },
 });
diff --git a/lib/src/pie/PieChartLegendItem.tsx b/lib/src/pie/PieChartLegendItem.tsx
index 7d038a88..80cd4071 100644
--- a/lib/src/pie/PieChartLegendItem.tsx
+++ b/lib/src/pie/PieChartLegendItem.tsx
@@ -27,7 +27,7 @@ export const PieChartLegendItem = (props: PieChartLegendItemProps) => {
       <Canvas style={[styles.canvas, canvasStyle]}>
         <Circle
           c={vec(styles.canvas.height / 2, styles.canvas.height / 2)}
-          r={styles.canvas.height / 2}
+          r={styles.canvas.height / 2 - 1} // - 1 to prevent clipping
           color={color}
         />
       </Canvas>
@@ -39,13 +39,13 @@ export const PieChartLegendItem = (props: PieChartLegendItemProps) => {
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
-    margin: 5,
+    padding: 5,
     justifyContent: "center",
     alignItems: "center",
   },
   canvas: {
-    height: 10,
-    width: 10,
-    marginRight: 5,
+    height: 12,
+    width: 12,
+    marginRight: 2,
   },
 });

From 610894fd15e80c58bcb4d0816e4f37832eca812c Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Mon, 26 Feb 2024 10:48:54 -0800
Subject: [PATCH 04/15] add Donut chart/"innerRadius"

This adds an `innerRadius` prop that allows the Pie chart to function as a donut chart.
---
 example/app/consts/routes.ts           |  10 +-
 example/app/donut-chart.tsx            | 151 +++++++++++++++++++++++++
 lib/src/pie/PieChart.tsx               |  17 ++-
 lib/src/pie/PieSlice.tsx               |  13 ++-
 lib/src/pie/PieSliceInset.tsx          |   4 +
 lib/src/pie/hooks/useSliceInsetPath.ts |  64 ++++++++---
 lib/src/pie/hooks/useSlicePath.ts      |  79 ++++++-------
 lib/src/pie/utils/innerRadius.ts       |  17 +++
 8 files changed, 292 insertions(+), 63 deletions(-)
 create mode 100644 example/app/donut-chart.tsx
 create mode 100644 lib/src/pie/utils/innerRadius.ts

diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts
index ff238567..057ceb79 100644
--- a/example/app/consts/routes.ts
+++ b/example/app/consts/routes.ts
@@ -86,11 +86,17 @@ if (__DEV__) {
       path: "/scrollview-charts",
     },
     {
-      title: "Pie Chart (in progress)",
+      title: "Pie Chart",
       description:
-        "This is a simple Pie chart in Victory. It has support for a displaying a legend, and customizing each slice. No gestures are supported yet. This is a work in progress.",
+        "This is a Pie chart in Victory. It has support for a displaying a legend, customizing each slice and adding insets.",
       path: "/pie-chart",
     },
+    {
+      title: "Donut Chart",
+      description:
+        "This is how to make a Donut chart in Victory. It is built off of the Pie chart using the `innerRadius` prop.",
+      path: "/donut-chart",
+    },
   );
 }
 
diff --git a/example/app/donut-chart.tsx b/example/app/donut-chart.tsx
new file mode 100644
index 00000000..5fc08adc
--- /dev/null
+++ b/example/app/donut-chart.tsx
@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import { LinearGradient, vec } from "@shopify/react-native-skia";
+import { Pie } from "victory-native";
+import { InfoCard } from "example/components/InfoCard";
+import { Button } from "example/components/Button";
+import { appColors } from "./consts/colors";
+import { descriptionForRoute } from "./consts/routes";
+
+function calculateGradientPoints(
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+  centerX: number,
+  centerY: number,
+) {
+  // Calculate the midpoint angle of the slice for a central gradient effect
+  const midAngle = (startAngle + endAngle) / 2;
+
+  // Convert angles from degrees to radians
+  const startRad = (Math.PI / 180) * startAngle;
+  const midRad = (Math.PI / 180) * midAngle;
+
+  // Calculate start point (inner edge near the pie's center)
+  const startX = centerX + radius * 0.5 * Math.cos(startRad);
+  const startY = centerY + radius * 0.5 * Math.sin(startRad);
+
+  // Calculate end point (outer edge of the slice)
+  const endX = centerX + radius * Math.cos(midRad);
+  const endY = centerY + radius * Math.sin(midRad);
+
+  return { startX, startY, endX, endY };
+}
+
+const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 125;
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: `Label ${index + 1}`,
+  }));
+
+export default function PieChartPlayground(props: { segment: string }) {
+  const description = descriptionForRoute(props.segment);
+  const [data, setData] = useState(DATA(5));
+
+  return (
+    <SafeAreaView style={styles.safeView}>
+      <ScrollView>
+        <View style={styles.chartContainer}>
+          <Pie.Chart
+            data={data}
+            labelKey={"label"}
+            valueKey={"value"}
+            colorKey={"color"}
+            innerRadius={"50%"}
+            renderLegend={(data) => (
+              <Pie.ChartLegend
+                containerStyle={{
+                  justifyContent: "center",
+                }}
+                position="bottom"
+                data={data}
+              >
+                {({ slice }) => (
+                  <Pie.ChartLegendItem
+                    slice={slice}
+                    formatLabel={(label) =>
+                      `${label} - ${Math.round(slice.value)}`
+                    }
+                  />
+                )}
+              </Pie.ChartLegend>
+            )}
+          >
+            {({ slice }) => {
+              const { startX, startY, endX, endY } = calculateGradientPoints(
+                slice.radius,
+                slice.startAngle,
+                slice.endAngle,
+                slice.center.x,
+                slice.center.y,
+              );
+
+              return (
+                <Pie.SliceProvider slice={slice}>
+                  <Pie.Slice>
+                    <LinearGradient
+                      start={vec(startX, startY)}
+                      end={vec(endX, endY)}
+                      colors={[slice.color, `${slice.color}50`]}
+                      positions={[0, 1]}
+                    />
+                  </Pie.Slice>
+                  <Pie.SliceInset
+                    inset={{
+                      width: 5,
+                      color: "white",
+                    }}
+                  />
+                </Pie.SliceProvider>
+              );
+            }}
+          </Pie.Chart>
+        </View>
+
+        <View style={{ flexGrow: 1, padding: 15 }}>
+          <InfoCard style={{ flex: 0, marginBottom: 16 }}>
+            {description}
+          </InfoCard>
+
+          <View
+            style={{
+              flexDirection: "row",
+              gap: 12,
+              marginTop: 10,
+              marginBottom: 16,
+            }}
+          >
+            <Button
+              style={{ flex: 1 }}
+              onPress={() => setData((data) => DATA(data.length))}
+              title="Shuffle Data"
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeView: {
+    flex: 1,
+    backgroundColor: appColors.viewBackground.light,
+    $dark: {
+      backgroundColor: appColors.viewBackground.dark,
+    },
+  },
+  chartContainer: {
+    height: 400,
+    padding: 25,
+  },
+});
diff --git a/lib/src/pie/PieChart.tsx b/lib/src/pie/PieChart.tsx
index 16a7cdb3..586e5b91 100644
--- a/lib/src/pie/PieChart.tsx
+++ b/lib/src/pie/PieChart.tsx
@@ -13,6 +13,7 @@ import {
   PieChartProvider,
   usePieChartContext,
 } from "./contexts/PieChartContext";
+import { handleTranslateInnerRadius } from "./utils/innerRadius";
 
 const CIRCLE_SWEEP_DEGREES = 360;
 
@@ -30,6 +31,7 @@ type PieChartProps<
   labelKey: LabelKey;
   renderLegend?: (data: PieSliceData[]) => React.ReactNode;
   valueKey: ValueKey;
+  innerRadius?: number | string;
 };
 
 const PieChartBase = <
@@ -47,6 +49,7 @@ const PieChartBase = <
     valueKey,
     colorKey,
     canvasStyle,
+    innerRadius = 0,
     renderLegend,
     children,
   } = props;
@@ -81,7 +84,7 @@ const PieChartBase = <
   const data = React.useMemo(() => {
     let startAngle = 0; // Initialize the start angle for the first slice
 
-    const enhanced: PieSliceData[] = _data.map((datum) => {
+    const enhanced = _data.map((datum): PieSliceData => {
       const sliceValue = datum[valueKey] as number;
       const sliceLabel = datum[label] as string;
       const sliceColor = datum[colorKey] as Color;
@@ -95,6 +98,7 @@ const PieChartBase = <
         value: sliceValue,
         label: sliceLabel,
         color: sliceColor,
+        innerRadius: handleTranslateInnerRadius(innerRadius, radius),
         startAngle: initialStartAngle,
         endAngle: endAngle,
         sweepAngle,
@@ -105,7 +109,16 @@ const PieChartBase = <
     });
 
     return enhanced;
-  }, [valueKey, _data, totalCircleValue, colorKey, label, radius, center]);
+  }, [
+    valueKey,
+    _data,
+    totalCircleValue,
+    colorKey,
+    label,
+    radius,
+    center,
+    innerRadius,
+  ]);
 
   // Determine the container's flexDirection based on the legend's position prop
   const baseFlexDirection =
diff --git a/lib/src/pie/PieSlice.tsx b/lib/src/pie/PieSlice.tsx
index 756feefe..b11c988b 100644
--- a/lib/src/pie/PieSlice.tsx
+++ b/lib/src/pie/PieSlice.tsx
@@ -9,15 +9,16 @@ import { useSlicePath } from "./hooks/useSlicePath";
 import { usePieSliceContext } from "./contexts/PieSliceContext";
 
 export type PieSliceData = {
-  value: number;
-  label: string;
+  center: SkPoint;
   color: Color;
-  startAngle: number;
   endAngle: number;
-  sweepAngle: number;
-  sliceIsEntireCircle: boolean;
+  innerRadius: number;
+  label: string;
   radius: number;
-  center: SkPoint;
+  sliceIsEntireCircle: boolean;
+  startAngle: number;
+  sweepAngle: number;
+  value: number;
 };
 
 type AdditionalPathProps = Partial<Omit<PathProps, "color" | "path">>;
diff --git a/lib/src/pie/PieSliceInset.tsx b/lib/src/pie/PieSliceInset.tsx
index 29a80223..83a690c9 100644
--- a/lib/src/pie/PieSliceInset.tsx
+++ b/lib/src/pie/PieSliceInset.tsx
@@ -19,6 +19,10 @@ export const PieSliceInset = (props: PieSliceInsetProps) => {
   const { slice } = usePieSliceContext();
   const [path, insetPaint] = useSliceInsetPath({ slice, inset });
 
+  if (inset.width === 0) {
+    return null;
+  }
+
   return (
     <Path path={path} paint={insetPaint} {...rest}>
       {children}
diff --git a/lib/src/pie/hooks/useSliceInsetPath.ts b/lib/src/pie/hooks/useSliceInsetPath.ts
index e88f27cd..f7549228 100644
--- a/lib/src/pie/hooks/useSliceInsetPath.ts
+++ b/lib/src/pie/hooks/useSliceInsetPath.ts
@@ -13,34 +13,68 @@ type SliceInsetPathArgs = {
 };
 export const useSliceInsetPath = ({ inset, slice }: SliceInsetPathArgs) => {
   const [path, paint] = useMemo(() => {
-    const { radius, center } = slice;
+    const { radius, center, innerRadius } = slice;
 
     const path = Skia.Path.Make();
 
-    // Convert angles to radians for calculation
+    // Convert angles to radians for calculations
     const startRadians = degreesToRadians(slice.startAngle);
     const endRadians = degreesToRadians(slice.endAngle);
 
-    // Calculate start and end points on the circumference
-    const startPoint = calculatePointOnCircumference(
-      center,
-      radius,
-      startRadians,
-    );
-    const endPoint = calculatePointOnCircumference(center, radius, endRadians);
+    if (innerRadius > 0) {
+      // Calculate start and end points on the inner circumference
+      const startPointInnerRadius = calculatePointOnCircumference(
+        center,
+        innerRadius,
+        startRadians,
+      );
+      const endPointInnerRadius = calculatePointOnCircumference(
+        center,
+        innerRadius,
+        endRadians,
+      );
+      //  Calculate start and end points on the outer circumference
+      const startPointOuterRadius = calculatePointOnCircumference(
+        center,
+        radius,
+        startRadians,
+      );
+      const endPointOuterRadius = calculatePointOnCircumference(
+        center,
+        radius,
+        endRadians,
+      );
 
-    // Move to center, draw line to start point, move to center, draw line to end point
-    path.moveTo(center.x, center.y);
-    path.lineTo(startPoint.x, startPoint.y);
-    path.moveTo(center.x, center.y);
-    path.lineTo(endPoint.x, endPoint.y);
+      // Move to center, draw line to start point, move to center, draw line to end point
+      path.moveTo(startPointInnerRadius.x, startPointInnerRadius.y);
+      path.lineTo(startPointOuterRadius.x, startPointOuterRadius.y);
+      path.moveTo(endPointInnerRadius.x, endPointInnerRadius.y);
+      path.lineTo(endPointOuterRadius.x, endPointOuterRadius.y);
+    } else {
+      // Calculate start and end points on the circumference
+      const startPoint = calculatePointOnCircumference(
+        center,
+        radius,
+        startRadians,
+      );
+      const endPoint = calculatePointOnCircumference(
+        center,
+        radius,
+        endRadians,
+      );
+
+      // Move to center, draw line to start point, move to center, draw line to end point
+      path.moveTo(center.x, center.y);
+      path.lineTo(startPoint.x, startPoint.y);
+      path.moveTo(center.x, center.y);
+      path.lineTo(endPoint.x, endPoint.y);
+    }
 
     // Create Paint for inset
     const insetPaint = Skia.Paint();
     insetPaint.setColor(Skia.Color(inset.color));
     insetPaint.setStyle(PaintStyle.Stroke);
     insetPaint.setStrokeWidth(inset.width);
-
     return [path, insetPaint] as const;
   }, [slice, inset]);
 
diff --git a/lib/src/pie/hooks/useSlicePath.ts b/lib/src/pie/hooks/useSlicePath.ts
index eb954910..a5c8d533 100644
--- a/lib/src/pie/hooks/useSlicePath.ts
+++ b/lib/src/pie/hooks/useSlicePath.ts
@@ -1,31 +1,28 @@
-import { Skia, type SkPath } from "@shopify/react-native-skia";
+import { FillType, Skia, type SkPath } from "@shopify/react-native-skia";
 import { useMemo } from "react";
-import {
-  calculatePointOnCircumference,
-  degreesToRadians,
-} from "../utils/radians";
 import type { PieSliceData } from "../PieSlice";
 
 type SlicePathArgs = {
-  inset?: number;
   slice: PieSliceData;
 };
 export const useSlicePath = ({ slice }: SlicePathArgs): SkPath => {
   const path = useMemo(() => {
-    const { radius, center } = slice;
+    const { radius, center, startAngle, endAngle, innerRadius } = slice;
 
     const path = Skia.Path.Make();
 
-    // Convert angles to radians
-    const startRadians = degreesToRadians(slice.startAngle);
-
-    // Calculate the points on the circumference for the start and end angles
-    const startPoint = calculatePointOnCircumference(
-      center,
-      radius,
-      startRadians,
+    // Draw the outer arc
+    path.arcToOval(
+      Skia.XYWHRect(
+        center.x - radius,
+        center.y - radius,
+        radius * 2,
+        radius * 2,
+      ),
+      startAngle,
+      endAngle - startAngle,
+      false,
     );
-
     if (slice.sliceIsEntireCircle) {
       // If there's only one data point, draw the entire circle
       path.addOval(
@@ -36,32 +33,38 @@ export const useSlicePath = ({ slice }: SlicePathArgs): SkPath => {
           radius * 2,
         ),
       );
-    } else {
-      // Move to the center of the pie
-      path.moveTo(center.x, center.y);
-
-      // Line to the start point
-      path.lineTo(startPoint.x, startPoint.y);
-
-      // Draw the arc
-      path.arcToOval(
-        Skia.XYWHRect(
-          center.x - radius,
-          center.y - radius,
-          radius * 2,
-          radius * 2,
-        ),
-        slice.startAngle,
-        slice.endAngle - slice.startAngle,
-        false,
-      );
+    }
 
-      // Line back to the center
+    if (innerRadius > 0) {
+      if (slice.sliceIsEntireCircle) {
+        path.addOval(
+          Skia.XYWHRect(
+            center.x - innerRadius,
+            center.y - innerRadius,
+            innerRadius * 2,
+            innerRadius * 2,
+          ),
+        );
+        path.setFillType(FillType.EvenOdd);
+      } else {
+        // Draw the inner arc in reverse
+        path.arcToOval(
+          Skia.XYWHRect(
+            center.x - innerRadius,
+            center.y - innerRadius,
+            innerRadius * 2,
+            innerRadius * 2,
+          ),
+          endAngle,
+          startAngle - endAngle,
+          false,
+        );
+      }
+    } else {
+      // If no inner radius, just draw a line back to the center (traditional pie slice)
       path.lineTo(center.x, center.y);
     }
 
-    // Close the path
-    path.close();
     return path;
   }, [slice]);
 
diff --git a/lib/src/pie/utils/innerRadius.ts b/lib/src/pie/utils/innerRadius.ts
new file mode 100644
index 00000000..225150ea
--- /dev/null
+++ b/lib/src/pie/utils/innerRadius.ts
@@ -0,0 +1,17 @@
+// Inner radius can be supplied as a number (px) or a percentage string
+export const handleTranslateInnerRadius = (
+  innerRadius: string | number,
+  radius: number,
+) => {
+  if (typeof innerRadius === "string") {
+    try {
+      innerRadius = parseFloat(innerRadius.replace("%", ""));
+      innerRadius = (innerRadius / 100) * radius;
+    } catch (error) {
+      console.warn(`Error parsing innerRadius as a number: ${innerRadius}`);
+      innerRadius = 0;
+    }
+  }
+  // prevent inversion, don't let the inner radius be greater than the actual radius
+  return innerRadius >= radius ? 0 : innerRadius;
+};

From d9c063f3863c6eb7592d8c41f869190e6443adac Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Mon, 26 Feb 2024 11:34:40 -0800
Subject: [PATCH 05/15] add some more examples

adds pie and donut chart example screen that covers a few edge cases/examples to ensure things are working
---
 example/app/consts/routes.ts         |   6 +
 example/app/donut-chart.tsx          |   2 +-
 example/app/pie-and-donut-charts.tsx | 344 +++++++++++++++++++++++++++
 example/app/pie-chart.tsx            |   2 +-
 4 files changed, 352 insertions(+), 2 deletions(-)
 create mode 100644 example/app/pie-and-donut-charts.tsx

diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts
index 057ceb79..4043a1f9 100644
--- a/example/app/consts/routes.ts
+++ b/example/app/consts/routes.ts
@@ -97,6 +97,12 @@ if (__DEV__) {
         "This is how to make a Donut chart in Victory. It is built off of the Pie chart using the `innerRadius` prop.",
       path: "/donut-chart",
     },
+    {
+      title: "Pie and Donut Assortment",
+      description:
+        "This is mixture of Pie and Donut charts, showing off the different ways to customize the charts.",
+      path: "/pie-and-donut-charts",
+    },
   );
 }
 
diff --git a/example/app/donut-chart.tsx b/example/app/donut-chart.tsx
index 5fc08adc..c7649b46 100644
--- a/example/app/donut-chart.tsx
+++ b/example/app/donut-chart.tsx
@@ -47,7 +47,7 @@ const DATA = (numberPoints = 5) =>
     label: `Label ${index + 1}`,
   }));
 
-export default function PieChartPlayground(props: { segment: string }) {
+export default function DonutChart(props: { segment: string }) {
   const description = descriptionForRoute(props.segment);
   const [data, setData] = useState(DATA(5));
 
diff --git a/example/app/pie-and-donut-charts.tsx b/example/app/pie-and-donut-charts.tsx
new file mode 100644
index 00000000..4935daa3
--- /dev/null
+++ b/example/app/pie-and-donut-charts.tsx
@@ -0,0 +1,344 @@
+import React, { useState } from "react";
+import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import { LinearGradient, vec } from "@shopify/react-native-skia";
+import { Pie } from "victory-native";
+import { InfoCard } from "example/components/InfoCard";
+import { Text } from "example/components/Text";
+import { appColors } from "./consts/colors";
+import { descriptionForRoute } from "./consts/routes";
+
+function calculateGradientPoints(
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+  centerX: number,
+  centerY: number,
+) {
+  // Calculate the midpoint angle of the slice for a central gradient effect
+  const midAngle = (startAngle + endAngle) / 2;
+
+  // Convert angles from degrees to radians
+  const startRad = (Math.PI / 180) * startAngle;
+  const midRad = (Math.PI / 180) * midAngle;
+
+  // Calculate start point (inner edge near the pie's center)
+  const startX = centerX + radius * 0.5 * Math.cos(startRad);
+  const startY = centerY + radius * 0.5 * Math.sin(startRad);
+
+  // Calculate end point (outer edge of the slice)
+  const endX = centerX + radius * Math.cos(midRad);
+  const endY = centerY + radius * Math.sin(midRad);
+
+  return { startX, startY, endX, endY };
+}
+
+const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 125;
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: `Label ${index + 1}`,
+  }));
+
+const DonutChartSingleDataPoint = () => {
+  const [data] = useState(DATA(1));
+  return (
+    <Pie.Chart
+      data={data}
+      labelKey={"label"}
+      valueKey={"value"}
+      colorKey={"color"}
+      innerRadius={"50%"}
+      renderLegend={(data) => (
+        <Pie.ChartLegend
+          containerStyle={{
+            justifyContent: "center",
+          }}
+          position="top"
+          data={data}
+        >
+          {({ slice }) => (
+            <Pie.ChartLegendItem
+              slice={slice}
+              formatLabel={(label) => `${label} - ${Math.round(slice.value)}`}
+            />
+          )}
+        </Pie.ChartLegend>
+      )}
+    >
+      {({ slice }) => {
+        const { startX, startY, endX, endY } = calculateGradientPoints(
+          slice.radius,
+          slice.startAngle,
+          slice.endAngle,
+          slice.center.x,
+          slice.center.y,
+        );
+
+        return (
+          <Pie.SliceProvider slice={slice}>
+            <Pie.Slice>
+              <LinearGradient
+                start={vec(startX, startY)}
+                end={vec(endX, endY)}
+                colors={[slice.color, `${slice.color}50`]}
+                positions={[0, 1]}
+              />
+            </Pie.Slice>
+          </Pie.SliceProvider>
+        );
+      }}
+    </Pie.Chart>
+  );
+};
+
+const PieChartSingleDataPoint = () => {
+  const [data] = useState(DATA(1));
+  return (
+    <Pie.Chart
+      data={data}
+      labelKey={"label"}
+      valueKey={"value"}
+      colorKey={"color"}
+      renderLegend={(data) => (
+        <Pie.ChartLegend
+          containerStyle={{
+            justifyContent: "center",
+          }}
+          position="bottom"
+          data={data}
+        >
+          {({ slice }) => (
+            <Pie.ChartLegendItem
+              slice={slice}
+              formatLabel={(label) => `${label} - ${Math.round(slice.value)}`}
+            />
+          )}
+        </Pie.ChartLegend>
+      )}
+    >
+      {({ slice }) => {
+        return (
+          <Pie.SliceProvider slice={slice}>
+            <Pie.Slice />
+          </Pie.SliceProvider>
+        );
+      }}
+    </Pie.Chart>
+  );
+};
+const PieChartMultipleDataPoints = () => {
+  const [data] = useState(DATA(10));
+  return (
+    <Pie.Chart
+      data={data}
+      labelKey={"label"}
+      valueKey={"value"}
+      colorKey={"color"}
+      containerStyle={{}}
+      renderLegend={(data) => (
+        <Pie.ChartLegend
+          containerStyle={{
+            marginLeft: 25,
+
+            justifyContent: "center",
+          }}
+          position="right"
+          data={data}
+        >
+          {({ slice }) => <Pie.ChartLegendItem slice={slice} />}
+        </Pie.ChartLegend>
+      )}
+    >
+      {({ slice }) => {
+        const { startX, startY, endX, endY } = calculateGradientPoints(
+          slice.radius,
+          slice.startAngle,
+          slice.endAngle,
+          slice.center.x,
+          slice.center.y,
+        );
+
+        return (
+          <Pie.SliceProvider slice={slice}>
+            <Pie.Slice>
+              <LinearGradient
+                start={vec(startX, startY)}
+                end={vec(endX, endY)}
+                colors={[slice.color, `${slice.color}50`]}
+                positions={[0, 1]}
+              />
+            </Pie.Slice>
+          </Pie.SliceProvider>
+        );
+      }}
+    </Pie.Chart>
+  );
+};
+const PieChartWithInsets = () => {
+  const [data] = useState(DATA(6));
+  return (
+    <Pie.Chart
+      data={data}
+      labelKey={"label"}
+      valueKey={"value"}
+      colorKey={"color"}
+      containerStyle={{}}
+      renderLegend={(data) => (
+        <Pie.ChartLegend
+          containerStyle={{
+            marginRight: 25,
+            justifyContent: "center",
+          }}
+          position="left"
+          data={data}
+        >
+          {({ slice }) => <Pie.ChartLegendItem slice={slice} />}
+        </Pie.ChartLegend>
+      )}
+    >
+      {({ slice }) => {
+        const { startX, startY, endX, endY } = calculateGradientPoints(
+          slice.radius,
+          slice.startAngle,
+          slice.endAngle,
+          slice.center.x,
+          slice.center.y,
+        );
+
+        return (
+          <Pie.SliceProvider slice={slice}>
+            <Pie.Slice>
+              <LinearGradient
+                start={vec(startX, startY)}
+                end={vec(endX, endY)}
+                colors={[slice.color, `${slice.color}50`]}
+                positions={[0, 1]}
+              />
+            </Pie.Slice>
+            <Pie.SliceInset inset={{ width: 4, color: "white" }} />
+          </Pie.SliceProvider>
+        );
+      }}
+    </Pie.Chart>
+  );
+};
+const DonutChartWithInsets = () => {
+  const [data] = useState(DATA(5));
+  return (
+    <Pie.Chart
+      data={data}
+      labelKey={"label"}
+      valueKey={"value"}
+      colorKey={"color"}
+      innerRadius={"50%"}
+      renderLegend={(data) => (
+        <Pie.ChartLegend
+          containerStyle={{
+            justifyContent: "center",
+          }}
+          position="bottom"
+          data={data}
+        >
+          {({ slice }) => (
+            <Pie.ChartLegendItem
+              slice={slice}
+              formatLabel={(label) => `${label} - ${Math.round(slice.value)}`}
+            />
+          )}
+        </Pie.ChartLegend>
+      )}
+    >
+      {({ slice }) => {
+        const { startX, startY, endX, endY } = calculateGradientPoints(
+          slice.radius,
+          slice.startAngle,
+          slice.endAngle,
+          slice.center.x,
+          slice.center.y,
+        );
+
+        return (
+          <Pie.SliceProvider slice={slice}>
+            <Pie.Slice>
+              <LinearGradient
+                start={vec(startX, startY)}
+                end={vec(endX, endY)}
+                colors={[slice.color, `${slice.color}50`]}
+                positions={[0, 1]}
+              />
+            </Pie.Slice>
+            <Pie.SliceInset
+              inset={{
+                width: 5,
+                color: "white",
+              }}
+            />
+          </Pie.SliceProvider>
+        );
+      }}
+    </Pie.Chart>
+  );
+};
+
+export default function PieAndDonutCharts(props: { segment: string }) {
+  const description = descriptionForRoute(props.segment);
+
+  return (
+    <SafeAreaView style={styles.safeView}>
+      <ScrollView>
+        <View style={{ flexGrow: 1, paddingHorizontal: 15 }}>
+          <InfoCard style={{ flex: 0 }}>{description}</InfoCard>
+        </View>
+        <View style={styles.chartContainer}>
+          <Text style={styles.title}>Donut Chart with Insets</Text>
+          <DonutChartWithInsets />
+        </View>
+        <View style={styles.chartContainer}>
+          <Text style={styles.title}>Donut Chart with Single Data Point</Text>
+          <DonutChartSingleDataPoint />
+        </View>
+        <View style={styles.chartContainer}>
+          <Text style={styles.title}>Pie Chart with Single Data Point</Text>
+          <PieChartSingleDataPoint />
+        </View>
+        <View style={[styles.chartContainer]}>
+          <Text style={styles.title}>Pie Chart with Multiple Data Points</Text>
+          <PieChartMultipleDataPoints />
+        </View>
+
+        <View style={[styles.chartContainer]}>
+          <Text style={styles.title}>Pie Chart with Insets</Text>
+          <PieChartWithInsets />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeView: {
+    flex: 1,
+    backgroundColor: appColors.viewBackground.light,
+    $dark: {
+      backgroundColor: appColors.viewBackground.dark,
+    },
+  },
+  chartContainer: {
+    height: 400,
+    padding: 25,
+    borderBottomWidth: 1,
+    borderBottomColor: appColors.cardBorder.light,
+    $dark: {
+      borderBottomColor: appColors.cardBorder.dark,
+    },
+  },
+  title: { marginBottom: 10, fontSize: 16, fontWeight: "bold" },
+});
diff --git a/example/app/pie-chart.tsx b/example/app/pie-chart.tsx
index fb2b3d7a..0db1369e 100644
--- a/example/app/pie-chart.tsx
+++ b/example/app/pie-chart.tsx
@@ -23,7 +23,7 @@ const DATA = (numberPoints = 5) =>
     label: `Label ${index + 1}`,
   }));
 
-export default function PieChartPlayground(props: { segment: string }) {
+export default function PieChart(props: { segment: string }) {
   const description = descriptionForRoute(props.segment);
   const [data, setData] = useState(DATA(5));
   const [insetWidth, setInsetWidth] = useState(4);

From b3175aadd330275d9e6d73e2e9644d7e28c0ece4 Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Tue, 27 Feb 2024 15:18:25 -0800
Subject: [PATCH 06/15] remove labels for now

---
 lib/src/pie/PieSliceLabel.tsx | 49 -----------------------------------
 lib/src/pie/index.ts          |  2 --
 2 files changed, 51 deletions(-)
 delete mode 100644 lib/src/pie/PieSliceLabel.tsx

diff --git a/lib/src/pie/PieSliceLabel.tsx b/lib/src/pie/PieSliceLabel.tsx
deleted file mode 100644
index fb41ea0a..00000000
--- a/lib/src/pie/PieSliceLabel.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import {
-  Text,
-  Skia,
-  type TextProps,
-  type SkFont,
-} from "@shopify/react-native-skia";
-import {
-  calculatePointOnCircumference,
-  degreesToRadians,
-} from "./utils/radians";
-import { usePieSliceContext } from "./contexts/PieSliceContext";
-
-type AdditionalPathProps = Partial<Omit<TextProps, "font">>;
-
-type PieSliceLabelDataProps = {
-  font: SkFont | null;
-} & AdditionalPathProps;
-
-export const PieSliceLabel = ({ font }: PieSliceLabelDataProps) => {
-  const { slice } = usePieSliceContext();
-  const { startAngle, endAngle, label, radius, center } = slice;
-
-  // Create a paint object for the text
-  const textPaint = Skia.Paint();
-  textPaint.setAntiAlias(true);
-  textPaint.setColor(Skia.Color("black"));
-
-  // Calculate the midpoint angle of the slice
-  const midAngleRadians = degreesToRadians((startAngle + endAngle) / 2);
-
-  // Position the label halfway between the center of the pie and the edge of the slice
-  const labelRadius2 = radius / 2;
-  const labelPosition = calculatePointOnCircumference(
-    center,
-    labelRadius2,
-    midAngleRadians,
-  );
-
-  return (
-    <Text
-      font={font}
-      x={labelPosition.x}
-      y={labelPosition.y}
-      text={label}
-      paint={textPaint}
-    />
-  );
-};
diff --git a/lib/src/pie/index.ts b/lib/src/pie/index.ts
index cdfaec34..55b425b6 100644
--- a/lib/src/pie/index.ts
+++ b/lib/src/pie/index.ts
@@ -3,7 +3,6 @@ import { PieChartLegend } from "./PieChartLegend";
 import { PieChartLegendItem } from "./PieChartLegendItem";
 import { PieSlice } from "./PieSlice";
 import { PieSliceInset } from "./PieSliceInset";
-// import { PieSliceLabel } from "./PieSliceLabel";
 import { PieSliceProvider } from "./contexts/PieSliceContext";
 
 const Pie = {
@@ -11,7 +10,6 @@ const Pie = {
   Slice: PieSlice,
   SliceProvider: PieSliceProvider,
   SliceInset: PieSliceInset,
-  // SliceLabel: PieSliceLabel,
   ChartLegend: PieChartLegend,
   ChartLegendItem: PieChartLegendItem,
 };

From e2fff2059e065ce4e0f9709fbaa0b1aa2203b32f Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Wed, 28 Feb 2024 08:38:17 -0800
Subject: [PATCH 07/15] feat: simplify usage for pie/donut

- removes need to import provider for rendering slices
- removes need to pass data prop to legend
- adds data to pie chart context so legend can consume it
- make render props optional and render defaults unless otherwise passed in
- updates examples
---
 example/app/donut-chart.tsx              |   7 +-
 example/app/pie-and-donut-charts.tsx     | 141 ++++++++++++++---------
 example/app/pie-chart.tsx                |  25 ++--
 lib/src/pie/PieChart.tsx                 | 109 ++++++++++--------
 lib/src/pie/PieChartLegend.tsx           |  12 +-
 lib/src/pie/contexts/PieChartContext.tsx |  15 ++-
 6 files changed, 180 insertions(+), 129 deletions(-)

diff --git a/example/app/donut-chart.tsx b/example/app/donut-chart.tsx
index c7649b46..a5e4dbc0 100644
--- a/example/app/donut-chart.tsx
+++ b/example/app/donut-chart.tsx
@@ -61,13 +61,12 @@ export default function DonutChart(props: { segment: string }) {
             valueKey={"value"}
             colorKey={"color"}
             innerRadius={"50%"}
-            renderLegend={(data) => (
+            renderLegend={() => (
               <Pie.ChartLegend
                 containerStyle={{
                   justifyContent: "center",
                 }}
                 position="bottom"
-                data={data}
               >
                 {({ slice }) => (
                   <Pie.ChartLegendItem
@@ -90,7 +89,7 @@ export default function DonutChart(props: { segment: string }) {
               );
 
               return (
-                <Pie.SliceProvider slice={slice}>
+                <>
                   <Pie.Slice>
                     <LinearGradient
                       start={vec(startX, startY)}
@@ -105,7 +104,7 @@ export default function DonutChart(props: { segment: string }) {
                       color: "white",
                     }}
                   />
-                </Pie.SliceProvider>
+                </>
               );
             }}
           </Pie.Chart>
diff --git a/example/app/pie-and-donut-charts.tsx b/example/app/pie-and-donut-charts.tsx
index 4935daa3..f6ba943e 100644
--- a/example/app/pie-and-donut-charts.tsx
+++ b/example/app/pie-and-donut-charts.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
-import { LinearGradient, vec } from "@shopify/react-native-skia";
+import { Canvas, LinearGradient, Rect, vec } from "@shopify/react-native-skia";
 import { Pie } from "victory-native";
 import { InfoCard } from "example/components/InfoCard";
 import { Text } from "example/components/Text";
@@ -56,13 +56,12 @@ const DonutChartSingleDataPoint = () => {
       valueKey={"value"}
       colorKey={"color"}
       innerRadius={"50%"}
-      renderLegend={(data) => (
+      renderLegend={() => (
         <Pie.ChartLegend
           containerStyle={{
             justifyContent: "center",
           }}
           position="top"
-          data={data}
         >
           {({ slice }) => (
             <Pie.ChartLegendItem
@@ -83,16 +82,14 @@ const DonutChartSingleDataPoint = () => {
         );
 
         return (
-          <Pie.SliceProvider slice={slice}>
-            <Pie.Slice>
-              <LinearGradient
-                start={vec(startX, startY)}
-                end={vec(endX, endY)}
-                colors={[slice.color, `${slice.color}50`]}
-                positions={[0, 1]}
-              />
-            </Pie.Slice>
-          </Pie.SliceProvider>
+          <Pie.Slice>
+            <LinearGradient
+              start={vec(startX, startY)}
+              end={vec(endX, endY)}
+              colors={[slice.color, `${slice.color}50`]}
+              positions={[0, 1]}
+            />
+          </Pie.Slice>
         );
       }}
     </Pie.Chart>
@@ -107,13 +104,12 @@ const PieChartSingleDataPoint = () => {
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-      renderLegend={(data) => (
+      renderLegend={() => (
         <Pie.ChartLegend
           containerStyle={{
             justifyContent: "center",
           }}
           position="bottom"
-          data={data}
         >
           {({ slice }) => (
             <Pie.ChartLegendItem
@@ -123,15 +119,7 @@ const PieChartSingleDataPoint = () => {
           )}
         </Pie.ChartLegend>
       )}
-    >
-      {({ slice }) => {
-        return (
-          <Pie.SliceProvider slice={slice}>
-            <Pie.Slice />
-          </Pie.SliceProvider>
-        );
-      }}
-    </Pie.Chart>
+    />
   );
 };
 const PieChartMultipleDataPoints = () => {
@@ -142,19 +130,14 @@ const PieChartMultipleDataPoints = () => {
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-      containerStyle={{}}
-      renderLegend={(data) => (
+      renderLegend={() => (
         <Pie.ChartLegend
           containerStyle={{
             marginLeft: 25,
-
             justifyContent: "center",
           }}
           position="right"
-          data={data}
-        >
-          {({ slice }) => <Pie.ChartLegendItem slice={slice} />}
-        </Pie.ChartLegend>
+        />
       )}
     >
       {({ slice }) => {
@@ -167,16 +150,14 @@ const PieChartMultipleDataPoints = () => {
         );
 
         return (
-          <Pie.SliceProvider slice={slice}>
-            <Pie.Slice>
-              <LinearGradient
-                start={vec(startX, startY)}
-                end={vec(endX, endY)}
-                colors={[slice.color, `${slice.color}50`]}
-                positions={[0, 1]}
-              />
-            </Pie.Slice>
-          </Pie.SliceProvider>
+          <Pie.Slice>
+            <LinearGradient
+              start={vec(startX, startY)}
+              end={vec(endX, endY)}
+              colors={[slice.color, `${slice.color}50`]}
+              positions={[0, 1]}
+            />
+          </Pie.Slice>
         );
       }}
     </Pie.Chart>
@@ -190,18 +171,14 @@ const PieChartWithInsets = () => {
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-      containerStyle={{}}
-      renderLegend={(data) => (
+      renderLegend={() => (
         <Pie.ChartLegend
           containerStyle={{
             marginRight: 25,
             justifyContent: "center",
           }}
           position="left"
-          data={data}
-        >
-          {({ slice }) => <Pie.ChartLegendItem slice={slice} />}
-        </Pie.ChartLegend>
+        />
       )}
     >
       {({ slice }) => {
@@ -214,7 +191,7 @@ const PieChartWithInsets = () => {
         );
 
         return (
-          <Pie.SliceProvider slice={slice}>
+          <>
             <Pie.Slice>
               <LinearGradient
                 start={vec(startX, startY)}
@@ -224,7 +201,7 @@ const PieChartWithInsets = () => {
               />
             </Pie.Slice>
             <Pie.SliceInset inset={{ width: 4, color: "white" }} />
-          </Pie.SliceProvider>
+          </>
         );
       }}
     </Pie.Chart>
@@ -239,13 +216,12 @@ const DonutChartWithInsets = () => {
       valueKey={"value"}
       colorKey={"color"}
       innerRadius={"50%"}
-      renderLegend={(data) => (
+      renderLegend={() => (
         <Pie.ChartLegend
           containerStyle={{
             justifyContent: "center",
           }}
           position="bottom"
-          data={data}
         >
           {({ slice }) => (
             <Pie.ChartLegendItem
@@ -266,7 +242,7 @@ const DonutChartWithInsets = () => {
         );
 
         return (
-          <Pie.SliceProvider slice={slice}>
+          <>
             <Pie.Slice>
               <LinearGradient
                 start={vec(startX, startY)}
@@ -281,13 +257,62 @@ const DonutChartWithInsets = () => {
                 color: "white",
               }}
             />
-          </Pie.SliceProvider>
+          </>
         );
       }}
     </Pie.Chart>
   );
 };
 
+const PieChartSimpleNoLegendNoRenderProps = () => {
+  const [data] = useState(DATA(5));
+  return (
+    <Pie.Chart
+      data={data}
+      labelKey={"label"}
+      valueKey={"value"}
+      colorKey={"color"}
+    />
+  );
+};
+const PieChartSimpleCustomLegend = () => {
+  const [data] = useState(DATA(5));
+  return (
+    <Pie.Chart
+      data={data}
+      labelKey={"label"}
+      valueKey={"value"}
+      colorKey={"color"}
+      renderLegend={() => (
+        <Pie.ChartLegend
+          containerStyle={{
+            justifyContent: "center",
+          }}
+          position="bottom"
+        >
+          {({ slice }) => (
+            <View
+              style={{
+                marginRight: 8,
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Canvas style={[{ height: 12, width: 12, marginRight: 4 }]}>
+                <Rect
+                  rect={{ x: 0, y: 0, width: 12, height: 12 }}
+                  color={slice.color}
+                />
+              </Canvas>
+              <Text style={{}}>{slice.label}</Text>
+            </View>
+          )}
+        </Pie.ChartLegend>
+      )}
+    />
+  );
+};
+
 export default function PieAndDonutCharts(props: { segment: string }) {
   const description = descriptionForRoute(props.segment);
 
@@ -297,6 +322,12 @@ export default function PieAndDonutCharts(props: { segment: string }) {
         <View style={{ flexGrow: 1, paddingHorizontal: 15 }}>
           <InfoCard style={{ flex: 0 }}>{description}</InfoCard>
         </View>
+        <View style={styles.chartContainer}>
+          <Text style={styles.title}>
+            Pie Chart with No Legend or Render Props
+          </Text>
+          <PieChartSimpleNoLegendNoRenderProps />
+        </View>
         <View style={styles.chartContainer}>
           <Text style={styles.title}>Donut Chart with Insets</Text>
           <DonutChartWithInsets />
@@ -318,6 +349,10 @@ export default function PieAndDonutCharts(props: { segment: string }) {
           <Text style={styles.title}>Pie Chart with Insets</Text>
           <PieChartWithInsets />
         </View>
+        <View style={[styles.chartContainer]}>
+          <Text style={styles.title}>Pie Chart with Custom Legend</Text>
+          <PieChartSimpleCustomLegend />
+        </View>
       </ScrollView>
     </SafeAreaView>
   );
diff --git a/example/app/pie-chart.tsx b/example/app/pie-chart.tsx
index 0db1369e..6792728e 100644
--- a/example/app/pie-chart.tsx
+++ b/example/app/pie-chart.tsx
@@ -42,26 +42,21 @@ export default function PieChart(props: { segment: string }) {
             labelKey={"label"}
             valueKey={"value"}
             colorKey={"color"}
-            renderLegend={(data) => (
+            renderLegend={() => (
               <Pie.ChartLegend
                 containerStyle={{ alignSelf: "center" }}
                 position="bottom"
-                data={data}
-              >
-                {({ slice }) => <Pie.ChartLegendItem slice={slice} />}
-              </Pie.ChartLegend>
+              />
             )}
           >
-            {({ slice }) => {
-              return (
-                <Pie.SliceProvider slice={slice}>
-                  <Pie.Slice />
-                  <Pie.SliceInset
-                    inset={{ width: insetWidth, color: insetColor }}
-                  />
-                </Pie.SliceProvider>
-              );
-            }}
+            {() => (
+              <>
+                <Pie.Slice />
+                <Pie.SliceInset
+                  inset={{ width: insetWidth, color: insetColor }}
+                />
+              </>
+            )}
           </Pie.Chart>
         </View>
 
diff --git a/lib/src/pie/PieChart.tsx b/lib/src/pie/PieChart.tsx
index 586e5b91..c31c74bb 100644
--- a/lib/src/pie/PieChart.tsx
+++ b/lib/src/pie/PieChart.tsx
@@ -8,12 +8,13 @@ import {
   type StyleProp,
 } from "react-native";
 import type { ColorFields, InputFields, NumericalFields } from "../types";
-import { type PieSliceData } from "./PieSlice";
+import { PieSlice, type PieSliceData } from "./PieSlice";
 import {
   PieChartProvider,
   usePieChartContext,
 } from "./contexts/PieChartContext";
 import { handleTranslateInnerRadius } from "./utils/innerRadius";
+import { PieSliceProvider } from "./contexts/PieSliceContext";
 
 const CIRCLE_SWEEP_DEGREES = 360;
 
@@ -23,7 +24,7 @@ type PieChartProps<
   ValueKey extends keyof NumericalFields<RawData>,
   ColorKey extends keyof ColorFields<RawData>,
 > = {
-  children: (args: { slice: PieSliceData }) => React.ReactNode;
+  children?: (args: { slice: PieSliceData }) => React.ReactNode;
   colorKey: ColorKey;
   containerStyle?: StyleProp<ViewStyle>;
   canvasStyle?: StyleProp<ViewStyle>;
@@ -32,6 +33,9 @@ type PieChartProps<
   renderLegend?: (data: PieSliceData[]) => React.ReactNode;
   valueKey: ValueKey;
   innerRadius?: number | string;
+  onLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
+  hasMeasuredLayoutSize: boolean;
+  canvasSize: { width: number; height: number };
 };
 
 const PieChartBase = <
@@ -45,17 +49,62 @@ const PieChartBase = <
   const {
     containerStyle,
     data: _data,
-    labelKey,
-    valueKey,
-    colorKey,
     canvasStyle,
-    innerRadius = 0,
     renderLegend,
     children,
+    onLayout,
+    hasMeasuredLayoutSize,
+    canvasSize,
   } = props;
+  const { width, height } = canvasSize;
+
+  const { data, position: legendPosition } = usePieChartContext();
 
-  const { position: legendPosition } = usePieChartContext();
+  // Determine the container's flexDirection based on the legend's position prop
+  const baseFlexDirection =
+    legendPosition === "left" || legendPosition === "right" ? "row" : "column";
+  const isReverse = legendPosition === "left" || legendPosition === "top";
+  const dynamicStyle: ViewStyle = {
+    flexDirection: isReverse
+      ? `${baseFlexDirection}-reverse`
+      : baseFlexDirection,
+  };
+
+  return (
+    <View style={[styles.baseContainer, dynamicStyle, containerStyle]}>
+      <Canvas
+        onLayout={onLayout}
+        style={[
+          styles.canvasContainer,
+          hasMeasuredLayoutSize ? { width, height } : null,
+          canvasStyle,
+        ]}
+      >
+        {data.map((slice, index) => {
+          return (
+            <PieSliceProvider key={index} slice={slice}>
+              {children ? children({ slice }) : <PieSlice />}
+            </PieSliceProvider>
+          );
+        })}
+      </Canvas>
+      {renderLegend?.(data)}
+    </View>
+  );
+};
 
+export const PieChart = <
+  RawData extends Record<string, unknown>,
+  LabelKey extends keyof InputFields<RawData>,
+  ValueKey extends keyof NumericalFields<RawData>,
+  ColorKey extends keyof ColorFields<RawData>,
+>(
+  props: Omit<
+    PieChartProps<RawData, LabelKey, ValueKey, ColorKey>,
+    "canvasSize" | "onLayout" | "hasMeasuredLayoutSize" // omit exposing internal props for calculating canvas layout/size
+  >,
+) => {
+  const { data: _data, labelKey, valueKey, colorKey, innerRadius = 0 } = props;
   const label = labelKey as keyof RawData;
 
   // The sum all the slices' values
@@ -120,48 +169,14 @@ const PieChartBase = <
     innerRadius,
   ]);
 
-  // Determine the container's flexDirection based on the legend's position prop
-  const baseFlexDirection =
-    legendPosition === "left" || legendPosition === "right" ? "row" : "column";
-  const isReverse = legendPosition === "left" || legendPosition === "top";
-  const dynamicStyle: ViewStyle = {
-    flexDirection: isReverse
-      ? `${baseFlexDirection}-reverse`
-      : baseFlexDirection,
-  };
-
   return (
-    <View style={[styles.baseContainer, dynamicStyle, containerStyle]}>
-      <Canvas
+    <PieChartProvider data={data}>
+      <PieChartBase
+        {...props}
         onLayout={onLayout}
-        style={[
-          styles.canvasContainer,
-          hasMeasuredLayoutSize ? { width, height } : null,
-          canvasStyle,
-        ]}
-      >
-        {data.map((slice, index) => {
-          return (
-            <React.Fragment key={index}>{children({ slice })}</React.Fragment>
-          );
-        })}
-      </Canvas>
-      {renderLegend?.(data)}
-    </View>
-  );
-};
-
-export const PieChart = <
-  RawData extends Record<string, unknown>,
-  LabelKey extends keyof InputFields<RawData>,
-  ValueKey extends keyof NumericalFields<RawData>,
-  ColorKey extends keyof ColorFields<RawData>,
->(
-  props: PieChartProps<RawData, LabelKey, ValueKey, ColorKey>,
-) => {
-  return (
-    <PieChartProvider>
-      <PieChartBase {...props} />
+        hasMeasuredLayoutSize={hasMeasuredLayoutSize}
+        canvasSize={canvasSize}
+      />
     </PieChartProvider>
   );
 };
diff --git a/lib/src/pie/PieChartLegend.tsx b/lib/src/pie/PieChartLegend.tsx
index 504b2fa8..e9f53967 100644
--- a/lib/src/pie/PieChartLegend.tsx
+++ b/lib/src/pie/PieChartLegend.tsx
@@ -2,19 +2,19 @@ import * as React from "react";
 import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import type { PieSliceData } from "./PieSlice";
 import { usePieChartContext } from "./contexts/PieChartContext";
+import { PieChartLegendItem } from "./PieChartLegendItem";
 
 export type PieLegendPosition = "top" | "bottom" | "left" | "right";
 type PieChartLegendProps = {
-  data: PieSliceData[];
   position?: PieLegendPosition;
   containerStyle?: StyleProp<ViewStyle>;
-  children: (args: { slice: PieSliceData }) => React.ReactNode;
+  children?: (args: { slice: PieSliceData }) => React.ReactNode;
 };
 
 export const PieChartLegend = (props: PieChartLegendProps) => {
-  const { data, position = "bottom", containerStyle, children } = props;
+  const { position = "bottom", containerStyle, children } = props;
 
-  const { setPosition } = usePieChartContext();
+  const { setPosition, data } = usePieChartContext();
   React.useLayoutEffect(() => {
     setPosition(position);
     return () => {};
@@ -28,8 +28,10 @@ export const PieChartLegend = (props: PieChartLegendProps) => {
   return (
     <View style={[baseContainerStyle, containerStyle]}>
       {data.map((slice, index) => {
-        return (
+        return children ? (
           <React.Fragment key={index}>{children({ slice })}</React.Fragment>
+        ) : (
+          <PieChartLegendItem key={index} slice={slice} />
         );
       })}
     </View>
diff --git a/lib/src/pie/contexts/PieChartContext.tsx b/lib/src/pie/contexts/PieChartContext.tsx
index c1f2b04c..7efcf090 100644
--- a/lib/src/pie/contexts/PieChartContext.tsx
+++ b/lib/src/pie/contexts/PieChartContext.tsx
@@ -5,23 +5,28 @@ import React, {
   type PropsWithChildren,
 } from "react";
 import type { PieLegendPosition } from "../PieChartLegend";
+import type { PieSliceData } from "../PieSlice";
 
 interface PieChartContext {
+  data: PieSliceData[];
   position: PieLegendPosition;
   setPosition: React.Dispatch<React.SetStateAction<PieLegendPosition>>;
 }
 
 const PieChartContext = createContext<PieChartContext | undefined>(undefined);
 
-interface PieChartProviderProps {}
+interface PieChartProviderProps {
+  data: PieSliceData[];
+}
 
-export const PieChartProvider = ({
-  children,
-}: PropsWithChildren<PieChartProviderProps>) => {
+export const PieChartProvider = (
+  props: PropsWithChildren<PieChartProviderProps>,
+) => {
   const [position, setPosition] = useState<PieLegendPosition>("bottom");
+  const { children, data } = props;
 
   return (
-    <PieChartContext.Provider value={{ position, setPosition }}>
+    <PieChartContext.Provider value={{ data, position, setPosition }}>
       {children}
     </PieChartContext.Provider>
   );

From 32d2a75cafc52cfdfb0bc50a079029ad16405d81 Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Wed, 28 Feb 2024 13:42:44 -0800
Subject: [PATCH 08/15] inset -> angularInset

type becomes:
```
type PieSliceAngularInsetData = {
  angularStrokeWidth: number;
  angularStrokeColor: Color;
};

```
---
 example/app/donut-chart.tsx                   |  8 ++---
 example/app/pie-and-donut-charts.tsx          | 15 ++++++---
 example/app/pie-chart.tsx                     |  7 +++--
 lib/src/index.ts                              |  2 +-
 lib/src/pie/PieSliceAngularInset.tsx          | 31 +++++++++++++++++++
 lib/src/pie/PieSliceInset.tsx                 | 31 -------------------
 ...setPath.ts => useSliceAngularInsetPath.ts} | 17 +++++-----
 lib/src/pie/index.ts                          |  4 +--
 8 files changed, 63 insertions(+), 52 deletions(-)
 create mode 100644 lib/src/pie/PieSliceAngularInset.tsx
 delete mode 100644 lib/src/pie/PieSliceInset.tsx
 rename lib/src/pie/hooks/{useSliceInsetPath.ts => useSliceAngularInsetPath.ts} (85%)

diff --git a/example/app/donut-chart.tsx b/example/app/donut-chart.tsx
index a5e4dbc0..cc578738 100644
--- a/example/app/donut-chart.tsx
+++ b/example/app/donut-chart.tsx
@@ -98,10 +98,10 @@ export default function DonutChart(props: { segment: string }) {
                       positions={[0, 1]}
                     />
                   </Pie.Slice>
-                  <Pie.SliceInset
-                    inset={{
-                      width: 5,
-                      color: "white",
+                  <Pie.SliceAngularInset
+                    angularInset={{
+                      angularStrokeWidth: 5,
+                      angularStrokeColor: "white",
                     }}
                   />
                 </>
diff --git a/example/app/pie-and-donut-charts.tsx b/example/app/pie-and-donut-charts.tsx
index f6ba943e..c26e17c3 100644
--- a/example/app/pie-and-donut-charts.tsx
+++ b/example/app/pie-and-donut-charts.tsx
@@ -200,7 +200,12 @@ const PieChartWithInsets = () => {
                 positions={[0, 1]}
               />
             </Pie.Slice>
-            <Pie.SliceInset inset={{ width: 4, color: "white" }} />
+            <Pie.SliceAngularInset
+              angularInset={{
+                angularStrokeWidth: 4,
+                angularStrokeColor: "white",
+              }}
+            />
           </>
         );
       }}
@@ -251,10 +256,10 @@ const DonutChartWithInsets = () => {
                 positions={[0, 1]}
               />
             </Pie.Slice>
-            <Pie.SliceInset
-              inset={{
-                width: 5,
-                color: "white",
+            <Pie.SliceAngularInset
+              angularInset={{
+                angularStrokeWidth: 5,
+                angularStrokeColor: "white",
               }}
             />
           </>
diff --git a/example/app/pie-chart.tsx b/example/app/pie-chart.tsx
index 6792728e..67faa576 100644
--- a/example/app/pie-chart.tsx
+++ b/example/app/pie-chart.tsx
@@ -52,8 +52,11 @@ export default function PieChart(props: { segment: string }) {
             {() => (
               <>
                 <Pie.Slice />
-                <Pie.SliceInset
-                  inset={{ width: insetWidth, color: insetColor }}
+                <Pie.SliceAngularInset
+                  angularInset={{
+                    angularStrokeWidth: insetWidth,
+                    angularStrokeColor: insetColor,
+                  }}
                 />
               </>
             )}
diff --git a/lib/src/index.ts b/lib/src/index.ts
index 778a7f2a..0b433236 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -51,4 +51,4 @@ export { CartesianAxis } from "./cartesian/components/CartesianAxis";
  */
 export { Pie } from "./pie";
 export { useSlicePath } from "./pie/hooks/useSlicePath";
-export { useSliceInsetPath } from "./pie/hooks/useSliceInsetPath";
+export { useSliceAngularInsetPath } from "./pie/hooks/useSliceAngularInsetPath";
diff --git a/lib/src/pie/PieSliceAngularInset.tsx b/lib/src/pie/PieSliceAngularInset.tsx
new file mode 100644
index 00000000..badf6a8b
--- /dev/null
+++ b/lib/src/pie/PieSliceAngularInset.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { type Color, Path, type PathProps } from "@shopify/react-native-skia";
+import { useSliceAngularInsetPath } from "./hooks/useSliceAngularInsetPath";
+import { usePieSliceContext } from "./contexts/PieSliceContext";
+
+export type PieSliceAngularInsetData = {
+  angularStrokeWidth: number;
+  angularStrokeColor: Color;
+};
+
+type AdditionalPathProps = Partial<Omit<PathProps, "color" | "path">>;
+
+type PieSliceAngularInsetProps = {
+  angularInset: PieSliceAngularInsetData;
+} & AdditionalPathProps;
+
+export const PieSliceAngularInset = (props: PieSliceAngularInsetProps) => {
+  const { angularInset, children, ...rest } = props;
+  const { slice } = usePieSliceContext();
+  const [path, insetPaint] = useSliceAngularInsetPath({ slice, angularInset });
+
+  if (angularInset.angularStrokeWidth === 0) {
+    return null;
+  }
+
+  return (
+    <Path path={path} paint={insetPaint} {...rest}>
+      {children}
+    </Path>
+  );
+};
diff --git a/lib/src/pie/PieSliceInset.tsx b/lib/src/pie/PieSliceInset.tsx
deleted file mode 100644
index 83a690c9..00000000
--- a/lib/src/pie/PieSliceInset.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import { type Color, Path, type PathProps } from "@shopify/react-native-skia";
-import { useSliceInsetPath } from "./hooks/useSliceInsetPath";
-import { usePieSliceContext } from "./contexts/PieSliceContext";
-
-export type PieSliceInsetData = {
-  width: number;
-  color: Color;
-};
-
-type AdditionalPathProps = Partial<Omit<PathProps, "color" | "path">>;
-
-type PieSliceInsetProps = {
-  inset: PieSliceInsetData;
-} & AdditionalPathProps;
-
-export const PieSliceInset = (props: PieSliceInsetProps) => {
-  const { inset, children, ...rest } = props;
-  const { slice } = usePieSliceContext();
-  const [path, insetPaint] = useSliceInsetPath({ slice, inset });
-
-  if (inset.width === 0) {
-    return null;
-  }
-
-  return (
-    <Path path={path} paint={insetPaint} {...rest}>
-      {children}
-    </Path>
-  );
-};
diff --git a/lib/src/pie/hooks/useSliceInsetPath.ts b/lib/src/pie/hooks/useSliceAngularInsetPath.ts
similarity index 85%
rename from lib/src/pie/hooks/useSliceInsetPath.ts
rename to lib/src/pie/hooks/useSliceAngularInsetPath.ts
index f7549228..022dc498 100644
--- a/lib/src/pie/hooks/useSliceInsetPath.ts
+++ b/lib/src/pie/hooks/useSliceAngularInsetPath.ts
@@ -5,13 +5,16 @@ import {
   degreesToRadians,
 } from "../utils/radians";
 import type { PieSliceData } from "../PieSlice";
-import type { PieSliceInsetData } from "../PieSliceInset";
+import type { PieSliceAngularInsetData } from "../PieSliceAngularInset";
 
-type SliceInsetPathArgs = {
+type SliceAngularInsetPathArgs = {
   slice: PieSliceData;
-  inset: PieSliceInsetData;
+  angularInset: PieSliceAngularInsetData;
 };
-export const useSliceInsetPath = ({ inset, slice }: SliceInsetPathArgs) => {
+export const useSliceAngularInsetPath = ({
+  angularInset,
+  slice,
+}: SliceAngularInsetPathArgs) => {
   const [path, paint] = useMemo(() => {
     const { radius, center, innerRadius } = slice;
 
@@ -72,11 +75,11 @@ export const useSliceInsetPath = ({ inset, slice }: SliceInsetPathArgs) => {
 
     // Create Paint for inset
     const insetPaint = Skia.Paint();
-    insetPaint.setColor(Skia.Color(inset.color));
+    insetPaint.setColor(Skia.Color(angularInset.angularStrokeColor));
     insetPaint.setStyle(PaintStyle.Stroke);
-    insetPaint.setStrokeWidth(inset.width);
+    insetPaint.setStrokeWidth(angularInset.angularStrokeWidth);
     return [path, insetPaint] as const;
-  }, [slice, inset]);
+  }, [slice, angularInset]);
 
   return [path, paint] as const;
 };
diff --git a/lib/src/pie/index.ts b/lib/src/pie/index.ts
index 55b425b6..0fe0c923 100644
--- a/lib/src/pie/index.ts
+++ b/lib/src/pie/index.ts
@@ -2,14 +2,14 @@ import { PieChart } from "./PieChart";
 import { PieChartLegend } from "./PieChartLegend";
 import { PieChartLegendItem } from "./PieChartLegendItem";
 import { PieSlice } from "./PieSlice";
-import { PieSliceInset } from "./PieSliceInset";
+import { PieSliceAngularInset } from "./PieSliceAngularInset";
 import { PieSliceProvider } from "./contexts/PieSliceContext";
 
 const Pie = {
   Chart: PieChart,
   Slice: PieSlice,
   SliceProvider: PieSliceProvider,
-  SliceInset: PieSliceInset,
+  SliceAngularInset: PieSliceAngularInset,
   ChartLegend: PieChartLegend,
   ChartLegendItem: PieChartLegendItem,
 };

From 13cdfeb4728dedad24aafbb232ab18691853a987 Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Thu, 29 Feb 2024 12:01:09 -0800
Subject: [PATCH 09/15] remove slice requirement from LegendItem

follows same pattern as the `Pie.ChartSlice` component where we just wrap the children with the slice provider.
---
 example/app/donut-chart.tsx          | 1 -
 example/app/pie-and-donut-charts.tsx | 3 ---
 lib/src/pie/PieChartLegend.tsx       | 9 +++++----
 lib/src/pie/PieChartLegendItem.tsx   | 6 +++---
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/example/app/donut-chart.tsx b/example/app/donut-chart.tsx
index cc578738..ae0c3677 100644
--- a/example/app/donut-chart.tsx
+++ b/example/app/donut-chart.tsx
@@ -70,7 +70,6 @@ export default function DonutChart(props: { segment: string }) {
               >
                 {({ slice }) => (
                   <Pie.ChartLegendItem
-                    slice={slice}
                     formatLabel={(label) =>
                       `${label} - ${Math.round(slice.value)}`
                     }
diff --git a/example/app/pie-and-donut-charts.tsx b/example/app/pie-and-donut-charts.tsx
index c26e17c3..03d4fbbb 100644
--- a/example/app/pie-and-donut-charts.tsx
+++ b/example/app/pie-and-donut-charts.tsx
@@ -65,7 +65,6 @@ const DonutChartSingleDataPoint = () => {
         >
           {({ slice }) => (
             <Pie.ChartLegendItem
-              slice={slice}
               formatLabel={(label) => `${label} - ${Math.round(slice.value)}`}
             />
           )}
@@ -113,7 +112,6 @@ const PieChartSingleDataPoint = () => {
         >
           {({ slice }) => (
             <Pie.ChartLegendItem
-              slice={slice}
               formatLabel={(label) => `${label} - ${Math.round(slice.value)}`}
             />
           )}
@@ -230,7 +228,6 @@ const DonutChartWithInsets = () => {
         >
           {({ slice }) => (
             <Pie.ChartLegendItem
-              slice={slice}
               formatLabel={(label) => `${label} - ${Math.round(slice.value)}`}
             />
           )}
diff --git a/lib/src/pie/PieChartLegend.tsx b/lib/src/pie/PieChartLegend.tsx
index e9f53967..ae2cccaf 100644
--- a/lib/src/pie/PieChartLegend.tsx
+++ b/lib/src/pie/PieChartLegend.tsx
@@ -3,6 +3,7 @@ import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import type { PieSliceData } from "./PieSlice";
 import { usePieChartContext } from "./contexts/PieChartContext";
 import { PieChartLegendItem } from "./PieChartLegendItem";
+import { PieSliceProvider } from "./contexts/PieSliceContext";
 
 export type PieLegendPosition = "top" | "bottom" | "left" | "right";
 type PieChartLegendProps = {
@@ -28,10 +29,10 @@ export const PieChartLegend = (props: PieChartLegendProps) => {
   return (
     <View style={[baseContainerStyle, containerStyle]}>
       {data.map((slice, index) => {
-        return children ? (
-          <React.Fragment key={index}>{children({ slice })}</React.Fragment>
-        ) : (
-          <PieChartLegendItem key={index} slice={slice} />
+        return (
+          <PieSliceProvider key={index} slice={slice}>
+            {children ? children({ slice }) : <PieChartLegendItem />}
+          </PieSliceProvider>
         );
       })}
     </View>
diff --git a/lib/src/pie/PieChartLegendItem.tsx b/lib/src/pie/PieChartLegendItem.tsx
index 80cd4071..db4c56bf 100644
--- a/lib/src/pie/PieChartLegendItem.tsx
+++ b/lib/src/pie/PieChartLegendItem.tsx
@@ -8,10 +8,9 @@ import {
 } from "react-native";
 import { Canvas, Circle, vec } from "@shopify/react-native-skia";
 import { Text } from "example/components/Text";
-import type { PieSliceData } from "./PieSlice";
+import { usePieSliceContext } from "./contexts/PieSliceContext";
 
 type PieChartLegendItemProps = {
-  slice: PieSliceData;
   formatLabel?: (label: string) => string;
   containerStyle?: StyleProp<ViewStyle>;
   canvasStyle?: StyleProp<ViewStyle>;
@@ -19,7 +18,8 @@ type PieChartLegendItemProps = {
 };
 
 export const PieChartLegendItem = (props: PieChartLegendItemProps) => {
-  const { slice, formatLabel, containerStyle, canvasStyle, textStyle } = props;
+  const { formatLabel, containerStyle, canvasStyle, textStyle } = props;
+  const { slice } = usePieSliceContext();
   const { color, label } = slice;
   const displayLabel = formatLabel ? formatLabel(label) : label;
   return (

From 86781b9f4a9586b88ccfe3c06c55211da4c7a4fd Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Thu, 29 Feb 2024 14:24:56 -0800
Subject: [PATCH 10/15] docs!

---
 website/docs/pie/pie-chart-legend-item.md     |  84 +++++++
 website/docs/pie/pie-chart-legend.md          | 228 ++++++++++++++++++
 website/docs/pie/pie-charts.md                | 226 +++++++++++++++++
 .../docs/pie/use-slice-angular-inset-path.md  |  51 ++++
 website/docs/pie/use-slice-path.md            |  56 +++++
 website/sidebars.js                           |  16 ++
 6 files changed, 661 insertions(+)
 create mode 100644 website/docs/pie/pie-chart-legend-item.md
 create mode 100644 website/docs/pie/pie-chart-legend.md
 create mode 100644 website/docs/pie/pie-charts.md
 create mode 100644 website/docs/pie/use-slice-angular-inset-path.md
 create mode 100644 website/docs/pie/use-slice-path.md

diff --git a/website/docs/pie/pie-chart-legend-item.md b/website/docs/pie/pie-chart-legend-item.md
new file mode 100644
index 00000000..a70509f9
--- /dev/null
+++ b/website/docs/pie/pie-chart-legend-item.md
@@ -0,0 +1,84 @@
+# Pie.ChartLegendItem (Component)
+
+The `Pie.ChartLegendItem` component renders a simple legend item based on the data supplied to the `Pie` chart. Its core responsibilities are:
+
+- Simply display information associated with the data (color and label) in a legible and accessible format.
+- Offers complete customization of the legend item as needed.
+
+:::info
+
+- The `Pie.ChartLegendItem` component is associated with the `Pie.ChartLegend` component and is not meant to be used on its own.
+
+:::
+
+## Example
+
+The example below shows the most basic use of the `Pie.ChartLegendItem` within a `Pie.ChartLegend`.
+
+```tsx
+import { View } from "react-native";
+import { Pie } from "victory-native";
+
+function MyChart() {
+  return (
+    <View style={{ height: 300 }}>
+      <Pie.Chart
+        data={DATA} // 👈 specify your data
+        labelKey={"label"} // 👈 specify data key for labels
+        valueKey={"value"} // 👈 specify data key for values
+        colorKey={"color"} // 👈 specify data key for color
+        renderLegend={() => (
+          <Pie.ChartLegend
+            containerStyle={{
+              justifyContent: "center",
+            }}
+            position="top"
+          >
+            {({ slice }) => (
+              <Pie.ChartLegendItem
+                formatLabel={(label) =>
+                  `${label.toUpperCase()} - ${slice.color}`
+                }
+              />
+            )}
+          </Pie.ChartLegend>
+        )}
+      />
+    </View>
+  );
+}
+
+function randomNumber() {
+  return Math.floor(Math.random() * 26) + 125;
+}
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: `Label ${index + 1}`,
+  }));
+```
+
+## Props
+
+### `formatLabel`
+
+A function that takes a `string` and returns a `string`. This function is used to format the label of the legend item. The default value is `(label) => label`.
+
+### `containerStyle`
+
+A `StyleProp<ViewStyle>` that styles the `View` which wraps the `Pie.ChartLegendItem` component.
+
+### `canvasStyle`
+
+A `StyleProp<ViewStyle>` that styles the `Canvas` which wraps the colored adornment of `Pie.ChartLegendItem` component.
+
+### `textStyle`
+
+A `StyleProp<TextStyle>` that styles the `Text` which wraps the label of the `Pie.ChartLegendItem` component.
diff --git a/website/docs/pie/pie-chart-legend.md b/website/docs/pie/pie-chart-legend.md
new file mode 100644
index 00000000..cc7e5828
--- /dev/null
+++ b/website/docs/pie/pie-chart-legend.md
@@ -0,0 +1,228 @@
+# Pie.ChartLegend (Component)
+
+The `Pie.ChartLegend` component renders a legend based on the data supplied to the `Pie` chart. Its core responsibilities are:
+
+- Displaying information about the data in a legible and accessible format, based on a `position` prop.
+- Offers sensible defaults with the ability to customize the legend and its children as needed.
+
+:::info
+
+- The `Pie.ChartLegend` currently functions as the "labels" for the `Pie.Chart` component, but in the future, we may add support for a variety of labels within the chart.
+- The `Pie.ChartLegend` component is associated with the `Pie.Chart` component and is not meant to be used on its own.
+
+:::
+
+## Example
+
+The example below shows the most basic use of the `Pie.Chart` with a `Pie.ChartLegend`.
+
+```tsx
+import { View } from "react-native";
+import { Pie } from "victory-native";
+
+function MyChart() {
+  return (
+    <View style={{ height: 300 }}>
+      <Pie.Chart
+        data={DATA} // 👈 specify your data
+        labelKey={"label"} // 👈 specify data key for labels
+        valueKey={"value"} // 👈 specify data key for values
+        colorKey={"color"} // 👈 specify data key for color
+        renderLegend={() => (
+          <Pie.ChartLegend
+            position="bottom" // 👈 specify where the legend should go
+          />
+        )}
+      />
+    </View>
+  );
+}
+
+function randomNumber() {
+  return Math.floor(Math.random() * 26) + 125;
+}
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: `Label ${index + 1}`,
+  }));
+```
+
+## Props
+
+### `position`
+
+A specific value indicating the position of the legend. The value can be one of the following: `"top" | "bottom" | "left" | "right";`. The default value is `"bottom"`.
+
+### `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 legend label as needed. E.g. this slice will have all the data needed to render a `Pie.ChartLegendItem` or your own custom component.
+
+If you do not provide any children, the `Pie.ChartLegend` will just render a simple `Pie.ChartLegendItem />` for each slice. However, you can provide children in order to fully customize the legend items.
+
+See the [Pie.ChartLegendItem](/pie/pie-chart-legend-item) section for more information.
+
+**See the [Render Function Fields](#render-function-fields) section for an outline of all of the available fields on the render function argument.**
+
+The example below shows a more complex use of the `Pie.ChartLegend`:
+
+#### Example
+
+```tsx
+import { View } from "react-native";
+import { Pie } from "victory-native";
+
+function MyChart() {
+  return (
+    <View style={{ height: 300 }}>
+      <Pie.Chart
+        data={DATA} // 👈 specify your data
+        labelKey={"label"} // 👈 specify data key for labels
+        valueKey={"value"} // 👈 specify data key for values
+        colorKey={"color"} // 👈 specify data key for color
+        renderLegend={() => (
+          <Pie.ChartLegend
+            containerStyle={{
+              justifyContent: "center",
+            }}
+            position="top"
+          >
+            {({ slice }) => (
+              <Pie.ChartLegendItem
+                formatLabel={(label) =>
+                  `${label.toUpperCase()} - ${slice.color}`
+                }
+              />
+            )}
+          </Pie.ChartLegend>
+        )}
+      />
+    </View>
+  );
+}
+
+function randomNumber() {
+  return Math.floor(Math.random() * 26) + 125;
+}
+
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: `Label ${index + 1}`,
+  }));
+```
+
+### `containerStyle`
+
+A `StyleProp<ViewStyle>` that styles the `View` which wraps the `Pie.Legend` component.
+
+## Render Function Fields
+
+The `Pie.ChartLegend` `children` render function has a single argument that is an object with the following fields.
+
+### `slice`
+
+An object of the form of `PieSliceData` which is the transformed data for each slice of the pie. The `slice` object has the following fields:
+
+```ts
+type PieSliceData = {
+  center: SkPoint;
+  color: Color;
+  endAngle: number;
+  innerRadius: number;
+  label: string;
+  radius: number;
+  sliceIsEntireCircle: boolean;
+  startAngle: number;
+  sweepAngle: number;
+  value: number;
+};
+```
+
+You do not need to pass this `slice` to the `Pie.ChartLegendItem` component, but you can use it to customize your own legend items as needed.
+
+## Custom Legend Items
+
+The example below shows an even more complex use of the `Pie.ChartLegend`:
+
+### Example
+
+```tsx
+import { View, Text } from "react-native";
+import { Pie } from "victory-native";
+import { Canvas, Rect } from "@shopify/react-native-skia";
+
+function MyChart() {
+  return (
+    <View style={{ height: 300 }}>
+      <Pie.Chart
+        data={data}
+        labelKey={"label"}
+        valueKey={"value"}
+        colorKey={"color"}
+        renderLegend={() => (
+          <Pie.ChartLegend
+            containerStyle={{
+              justifyContent: "center",
+            }}
+            position="bottom"
+          >
+            {/* 👇 draw whatever you want here -- you don't have to use the Pie.ChartLegendItem */}
+            {({ slice }) => (
+              <View
+                style={{
+                  marginRight: 8,
+                  flexDirection: "row",
+                  alignItems: "center",
+                }}
+              >
+                {/* 👇 draw a custom shape instead of a circle, or don't even use Canvas, up to you  */}
+                <Canvas style={[{ height: 12, width: 12, marginRight: 4 }]}>
+                  <Rect
+                    rect={{ x: 0, y: 0, width: 12, height: 12 }}
+                    color={slice.color}
+                  />
+                </Canvas>
+                <Text>{slice.label}</Text>
+              </View>
+            )}
+          </Pie.ChartLegend>
+        )}
+      />
+    </View>
+  );
+}
+
+function randomNumber() {
+  return Math.floor(Math.random() * 26) + 125;
+}
+
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: `Label ${index + 1}`,
+  }));
+```
diff --git a/website/docs/pie/pie-charts.md b/website/docs/pie/pie-charts.md
new file mode 100644
index 00000000..6f191bdd
--- /dev/null
+++ b/website/docs/pie/pie-charts.md
@@ -0,0 +1,226 @@
+# Pie.Chart (Component)
+
+The `Pie.Chart` component provides another kind of charting component in `victory-native`. Its core responsibilities are:
+
+- transforming raw data into a format that can be easily accessed and used for charting `Pie` and `Donut` charts.
+- display metadata via the `Pie.ChartLegend` component.
+- offers sensible defaults with the ability to customize the chart, slices, and legend as needed.
+
+:::info
+This chart does not yet support gestures or animations.
+:::
+
+:::tip
+
+The example app inside this repo has a lot of examples of how to use the `Pie.Chart` and its associated components!
+
+:::
+
+## Example
+
+The example below shows the most basic use of the `Pie.Chart`.
+
+```tsx
+import { View } from "react-native";
+import { Pie } from "victory-native";
+
+function MyChart() {
+  return (
+    <View style={{ height: 300 }}>
+      <Pie.Chart
+        data={DATA} // 👈 specify your data
+        labelKey={"label"} // 👈 specify data key for labels
+        valueKey={"value"} // 👈 specify data key for values
+        colorKey={"color"} // 👈 specify data key for color
+      />
+    </View>
+  );
+}
+
+function randomNumber() {
+  return Math.floor(Math.random() * 26) + 125;
+}
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: `Label ${index + 1}`,
+  }));
+```
+
+## Props
+
+### `data` (required)
+
+An array of objects to be used as data points for the chart.
+
+### `labelKey` (required)
+
+A `string` value indicating the _key_ of each `data[number]` object to be used. Currently only used on the legend part of the chart. In the future we may add support for a variety of labels within the chart. The value of the label can be a `string` | `number`
+
+### `valueKey` (required)
+
+A `string` value indicating the _key_ of each `data[number]` object to be used to draw a slice of the Pie.
+
+:::info
+The `valueKey` prop must be a key for a field that has a `number` value. That is, only `number`s can be used as dependent values for charting purposes.
+:::
+
+### `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 />`.
+
+If you do not provide any children, the `Pie.Chart` will just render a simple `Pie.Slice />` for each slice.
+
+However, you can provide children in order to add things like `Pie.SliceAngularInsets` and `LinearGradients` amongst other things to each slice, or to wholly customize your own rendering.
+
+**See the [Render Function Fields](#render-function-fields) section for an outline of all of the available fields on the render function argument.**
+
+The example below shows a more complex use of the `Pie.Chart`:
+
+### Customizing Children Example
+
+```tsx
+import { View } from "react-native";
+import { Pie } from "victory-native";
+
+function MyChart() {
+  return (
+    <View style={{ height: 300 }}>
+      <Pie.Chart
+        data={DATA} // 👈 specify your data
+        labelKey={"label"} // 👈 specify data key for labels
+        valueKey={"value"} // 👈 specify data key for values
+        colorKey={"color"} // 👈 specify data key for color
+      >
+        {/* 👇 each individual slice */}
+        {({ slice }) => {
+          const { startX, startY, endX, endY } = calculateGradientPoints(
+            slice.radius,
+            slice.startAngle,
+            slice.endAngle,
+            slice.center.x,
+            slice.center.y,
+          ); // 👈 create your own custom fn to calculate the gradient details (see example app)
+
+          return (
+            <>
+              {/* 👇 return customized slice here  */}
+              <Pie.Slice>
+                <LinearGradient
+                  start={vec(startX, startY)}
+                  end={vec(endX, endY)}
+                  colors={[slice.color, `${slice.color}50`]}
+                  positions={[0, 1]}
+                />
+              </Pie.Slice>
+              <Pie.SliceAngularInset
+                angularInset={{
+                  angularStrokeWidth: 5,
+                  angularStrokeColor: "white",
+                }}
+              />
+            </>
+          );
+        }}
+      </Pie.Chart>
+    </View>
+  );
+}
+
+function calculateGradientPoints(
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+  centerX: number,
+  centerY: number,
+) {
+  // Calculate the midpoint angle of the slice for a central gradient effect
+  const midAngle = (startAngle + endAngle) / 2;
+
+  // Convert angles from degrees to radians
+  const startRad = (Math.PI / 180) * startAngle;
+  const midRad = (Math.PI / 180) * midAngle;
+
+  // Calculate start point (inner edge near the pie's center)
+  const startX = centerX + radius * 0.5 * Math.cos(startRad);
+  const startY = centerY + radius * 0.5 * Math.sin(startRad);
+
+  // Calculate end point (outer edge of the slice)
+  const endX = centerX + radius * Math.cos(midRad);
+  const endY = centerY + radius * Math.sin(midRad);
+
+  return { startX, startY, endX, endY };
+}
+
+function randomNumber() {
+  return Math.floor(Math.random() * 26) + 125;
+}
+
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: `Label ${index + 1}`,
+  }));
+```
+
+### `containerStyle`
+
+A `StyleProp<ViewStyle>` that styles the `View` which wraps the `Canvas` and `Legend` of the `Pie` chart.
+
+### `canvasStyle`
+
+A `StyleProp<ViewStyle>` that styles the `Canvas` upon which the `Pie` chart is drawn.
+
+### `innerRadius`
+
+A `number` or `string` (as a percentage) which turns the `Pie` chart into a `Donut` chart. The `innerRadius` prop is the radius of the inner circle of the donut chart. If not provided, the chart will remain a `Pie` chart.
+
+:::tip
+The `innerRadius` prop must be a `number` or a `string` like `50%`.
+:::
+
+### `renderLegend`
+
+A render prop that allows you to customize the legend. See the [Pie.ChartLegend](/pie/pie-chart-legend) section for more information.
+
+## Render Function Fields
+
+The `Pie.Chart` `children` render function has a single argument that is an object with the following fields.
+
+### `slice`
+
+An object of the form of `PieSliceData` which is the transformed data for each slice of the pie. The `slice` object has the following fields:
+
+```ts
+type PieSliceData = {
+  center: SkPoint;
+  color: Color;
+  endAngle: number;
+  innerRadius: number;
+  label: string;
+  radius: number;
+  sliceIsEntireCircle: boolean;
+  startAngle: number;
+  sweepAngle: number;
+  value: number;
+};
+```
+
+:::info
+Generally, you would not need to use the `slice` object directly, but it is available to you if you need to do something custom with each slice. Please refer to the example app repo for more information on how to use the `slice` object e.g the `LinearGradient` examples.
+:::
diff --git a/website/docs/pie/use-slice-angular-inset-path.md b/website/docs/pie/use-slice-angular-inset-path.md
new file mode 100644
index 00000000..1e2c8037
--- /dev/null
+++ b/website/docs/pie/use-slice-angular-inset-path.md
@@ -0,0 +1,51 @@
+# `useSliceAngularPath`
+
+The `useSliceAngularPath` hook takes a `PieSliceData` as input, and returns an array of Skia `[SkPath, SkPaint]` objects that represent the path and the paint for that pie slice.
+
+:::info
+
+- You wouldn't normally use this unless you were creating entirely custom angular insets.
+
+:::
+
+## Example
+
+```tsx
+import { Pie, useSliceAngularPath, type PieSliceData } from "victory-native";
+import { Path } from "@shopify/react-native-skia";
+import DATA from "./my-data";
+
+function MyCustomSliceAngularInset({ slice }: { slice: PieSliceData }) {
+  // 👇 use the hook to generate a path and paint object.
+  const [path, insetPaint] = useSliceAngularInsetPath({ slice, angularInset });
+  /* 👇 experiment wtih any other customizations you want */
+  return <Path path={path} paint={insetPaint} {...rest} />;
+}
+
+export function MyChart() {
+  return (
+    <Pie.Chart data={DATA} labelKey="title" colorKey="palette" valueKey="high">
+      {/* 👇 pass the PieSliceData to our custom component */}
+      {({ slice }) => <MyCustomSliceAngularInset slice={slice} />}
+    </Pie.Chart>
+  );
+}
+```
+
+## Arguments
+
+`useSliceAngularPath` has a function signature as follows:
+
+```ts
+useSliceAngularPath(slice: PieSliceData): [SkPath, SkPaint]
+```
+
+### `slice`
+
+The `slice` argument is a `PieSliceData` object used to generate the slices's path. Generally, this data comes from render function of the `Pie.Chart`, as illustrated in the example above.
+
+## Returns
+
+### [SkPath, SkPaint]
+
+The `SkPath` path object to be used as the `path` argument of a Skia `<Path />` element. The `SkPaint` path object to be used as the `paint` argument of a Skia `<Path />` element.
diff --git a/website/docs/pie/use-slice-path.md b/website/docs/pie/use-slice-path.md
new file mode 100644
index 00000000..12524e71
--- /dev/null
+++ b/website/docs/pie/use-slice-path.md
@@ -0,0 +1,56 @@
+# `useSlicePath`
+
+The `useSlicePath` hook takes a `PieSliceData` as input, and returns a Skia `SkPath` path object that represents the path for that pie slice.
+
+:::info
+
+- You wouldn't normally use this unless you were creating entirely custom slices.
+
+:::
+
+## Example
+
+```tsx
+import { Pie, useSlicePath, type PieSliceData } from "victory-native";
+import { Path } from "@shopify/react-native-skia";
+import DATA from "./my-data";
+
+function MyCustomSlice({ slice }: { slice: PieSliceData }) {
+  // 👇 use the hook to generate a path object.
+  const path = useSlicePath(slice);
+  /* 👇 experiment wtih any other customizations you want */
+  return <Path path={path} color={slice.color} style="fill">
+}
+
+export function MyChart() {
+  return (
+    <Pie.Chart
+      data={DATA}
+      labelKey="title"
+      colorKey="palette"
+      valueKey="high"
+    >
+      {/* 👇 pass the PieSliceData to our custom component */}
+      {({ slice }) => <MyCustomSlice slice={slice} />}
+    </Pie.Chart>
+  );
+}
+```
+
+## Arguments
+
+`useSlicePath` has a function signature as follows:
+
+```ts
+useSlicePath(slice: PieSliceData): SkPath
+```
+
+### `slice`
+
+The `slice` argument is a `PieSliceData` object used to generate the slices's path. Generally, this data comes from render function of the `Pie.Chart`, as illustrated in the example above.
+
+## Returns
+
+### `path`
+
+The `SkPath` path object to be used as the `path` argument of a Skia `<Path />` element.
diff --git a/website/sidebars.js b/website/sidebars.js
index 2cd86f1f..2446e599 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -48,6 +48,22 @@ const sidebars = {
         },
       ],
     },
+    {
+      type: "category",
+      label: "Pie Charts",
+      collapsed: false,
+      collapsible: false,
+      items: [
+        "pie/pie-charts",
+        {
+          type: "category",
+          label: "Legends",
+          items: ["pie/pie-chart-legend", "pie/pie-chart-legend-item"],
+        },
+        "pie/use-slice-path",
+        "pie/use-slice-angular-inset-path",
+      ],
+    },
 
     "animated-paths",
   ],

From b29ce290c25a93273ada242121e0b5a2bfb4ac61 Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Mon, 18 Mar 2024 14:38:45 -0700
Subject: [PATCH 11/15] add Polar container component

- adds parent Polar component as Pie chart coordinate system container.
- updates docs
- removes legends/legend items for now
---
 example/app/consts/routes.ts                  |   2 +-
 example/app/donut-chart.tsx                   |  81 ++---
 example/app/pie-and-donut-charts.tsx          | 314 +++++++-----------
 example/app/pie-chart.tsx                     |  28 +-
 lib/src/index.ts                              |   5 +
 lib/src/pie/PieChart.tsx                      | 148 ++-------
 lib/src/pie/PieChartLegend.tsx                |  51 ---
 lib/src/pie/PieChartLegendItem.tsx            |  51 ---
 lib/src/pie/contexts/PieChartContext.tsx      |  45 ---
 lib/src/pie/index.ts                          |   4 -
 lib/src/polar/PolarChart.tsx                  | 129 +++++++
 lib/src/polar/contexts/PolarChartContext.tsx  |  57 ++++
 lib/src/types.ts                              |   3 +
 website/docs/pie/pie-chart-legend-item.md     |  84 -----
 website/docs/pie/pie-chart-legend.md          | 228 -------------
 website/docs/{ => polar}/pie/pie-charts.md    |  52 +--
 .../pie/use-slice-angular-inset-path.md       |   0
 .../docs/{ => polar}/pie/use-slice-path.md    |   0
 website/docs/polar/polar-chart.md             |  94 ++++++
 website/sidebars.js                           |  14 +-
 20 files changed, 486 insertions(+), 904 deletions(-)
 delete mode 100644 lib/src/pie/PieChartLegend.tsx
 delete mode 100644 lib/src/pie/PieChartLegendItem.tsx
 delete mode 100644 lib/src/pie/contexts/PieChartContext.tsx
 create mode 100644 lib/src/polar/PolarChart.tsx
 create mode 100644 lib/src/polar/contexts/PolarChartContext.tsx
 delete mode 100644 website/docs/pie/pie-chart-legend-item.md
 delete mode 100644 website/docs/pie/pie-chart-legend.md
 rename website/docs/{ => polar}/pie/pie-charts.md (77%)
 rename website/docs/{ => polar}/pie/use-slice-angular-inset-path.md (100%)
 rename website/docs/{ => polar}/pie/use-slice-path.md (100%)
 create mode 100644 website/docs/polar/polar-chart.md

diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts
index 4043a1f9..430f2ece 100644
--- a/example/app/consts/routes.ts
+++ b/example/app/consts/routes.ts
@@ -88,7 +88,7 @@ if (__DEV__) {
     {
       title: "Pie Chart",
       description:
-        "This is a Pie chart in Victory. It has support for a displaying a legend, customizing each slice and adding insets.",
+        "This is a Pie chart in Victory. It has support for customizing each slice and adding insets.",
       path: "/pie-chart",
     },
     {
diff --git a/example/app/donut-chart.tsx b/example/app/donut-chart.tsx
index ae0c3677..d9e1f399 100644
--- a/example/app/donut-chart.tsx
+++ b/example/app/donut-chart.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
 import { LinearGradient, vec } from "@shopify/react-native-skia";
-import { Pie } from "victory-native";
+import { Pie, PolarChart } from "victory-native";
 import { InfoCard } from "example/components/InfoCard";
 import { Button } from "example/components/Button";
 import { appColors } from "./consts/colors";
@@ -55,58 +55,43 @@ export default function DonutChart(props: { segment: string }) {
     <SafeAreaView style={styles.safeView}>
       <ScrollView>
         <View style={styles.chartContainer}>
-          <Pie.Chart
+          <PolarChart
             data={data}
-            labelKey={"label"}
-            valueKey={"value"}
             colorKey={"color"}
-            innerRadius={"50%"}
-            renderLegend={() => (
-              <Pie.ChartLegend
-                containerStyle={{
-                  justifyContent: "center",
-                }}
-                position="bottom"
-              >
-                {({ slice }) => (
-                  <Pie.ChartLegendItem
-                    formatLabel={(label) =>
-                      `${label} - ${Math.round(slice.value)}`
-                    }
-                  />
-                )}
-              </Pie.ChartLegend>
-            )}
+            valueKey={"value"}
+            labelKey={"label"}
           >
-            {({ slice }) => {
-              const { startX, startY, endX, endY } = calculateGradientPoints(
-                slice.radius,
-                slice.startAngle,
-                slice.endAngle,
-                slice.center.x,
-                slice.center.y,
-              );
+            <Pie.Chart innerRadius={"50%"}>
+              {({ slice }) => {
+                const { startX, startY, endX, endY } = calculateGradientPoints(
+                  slice.radius,
+                  slice.startAngle,
+                  slice.endAngle,
+                  slice.center.x,
+                  slice.center.y,
+                );
 
-              return (
-                <>
-                  <Pie.Slice>
-                    <LinearGradient
-                      start={vec(startX, startY)}
-                      end={vec(endX, endY)}
-                      colors={[slice.color, `${slice.color}50`]}
-                      positions={[0, 1]}
+                return (
+                  <>
+                    <Pie.Slice>
+                      <LinearGradient
+                        start={vec(startX, startY)}
+                        end={vec(endX, endY)}
+                        colors={[slice.color, `${slice.color}50`]}
+                        positions={[0, 1]}
+                      />
+                    </Pie.Slice>
+                    <Pie.SliceAngularInset
+                      angularInset={{
+                        angularStrokeWidth: 5,
+                        angularStrokeColor: "white",
+                      }}
                     />
-                  </Pie.Slice>
-                  <Pie.SliceAngularInset
-                    angularInset={{
-                      angularStrokeWidth: 5,
-                      angularStrokeColor: "white",
-                    }}
-                  />
-                </>
-              );
-            }}
-          </Pie.Chart>
+                  </>
+                );
+              }}
+            </Pie.Chart>
+          </PolarChart>
         </View>
 
         <View style={{ flexGrow: 1, padding: 15 }}>
diff --git a/example/app/pie-and-donut-charts.tsx b/example/app/pie-and-donut-charts.tsx
index 03d4fbbb..b1992844 100644
--- a/example/app/pie-and-donut-charts.tsx
+++ b/example/app/pie-and-donut-charts.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
-import { Canvas, LinearGradient, Rect, vec } from "@shopify/react-native-skia";
-import { Pie } from "victory-native";
+import { LinearGradient, vec } from "@shopify/react-native-skia";
+import { Pie, PolarChart } from "victory-native";
 import { InfoCard } from "example/components/InfoCard";
 import { Text } from "example/components/Text";
 import { appColors } from "./consts/colors";
@@ -50,268 +50,194 @@ const DATA = (numberPoints = 5) =>
 const DonutChartSingleDataPoint = () => {
   const [data] = useState(DATA(1));
   return (
-    <Pie.Chart
+    <PolarChart
       data={data}
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-      innerRadius={"50%"}
-      renderLegend={() => (
-        <Pie.ChartLegend
-          containerStyle={{
-            justifyContent: "center",
-          }}
-          position="top"
-        >
-          {({ slice }) => (
-            <Pie.ChartLegendItem
-              formatLabel={(label) => `${label} - ${Math.round(slice.value)}`}
-            />
-          )}
-        </Pie.ChartLegend>
-      )}
     >
-      {({ slice }) => {
-        const { startX, startY, endX, endY } = calculateGradientPoints(
-          slice.radius,
-          slice.startAngle,
-          slice.endAngle,
-          slice.center.x,
-          slice.center.y,
-        );
+      <Pie.Chart innerRadius={"50%"}>
+        {({ slice }) => {
+          const { startX, startY, endX, endY } = calculateGradientPoints(
+            slice.radius,
+            slice.startAngle,
+            slice.endAngle,
+            slice.center.x,
+            slice.center.y,
+          );
 
-        return (
-          <Pie.Slice>
-            <LinearGradient
-              start={vec(startX, startY)}
-              end={vec(endX, endY)}
-              colors={[slice.color, `${slice.color}50`]}
-              positions={[0, 1]}
-            />
-          </Pie.Slice>
-        );
-      }}
-    </Pie.Chart>
+          return (
+            <Pie.Slice>
+              <LinearGradient
+                start={vec(startX, startY)}
+                end={vec(endX, endY)}
+                colors={[slice.color, `${slice.color}50`]}
+                positions={[0, 1]}
+              />
+            </Pie.Slice>
+          );
+        }}
+      </Pie.Chart>
+    </PolarChart>
   );
 };
 
 const PieChartSingleDataPoint = () => {
   const [data] = useState(DATA(1));
   return (
-    <Pie.Chart
+    <PolarChart
       data={data}
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-      renderLegend={() => (
-        <Pie.ChartLegend
-          containerStyle={{
-            justifyContent: "center",
-          }}
-          position="bottom"
-        >
-          {({ slice }) => (
-            <Pie.ChartLegendItem
-              formatLabel={(label) => `${label} - ${Math.round(slice.value)}`}
-            />
-          )}
-        </Pie.ChartLegend>
-      )}
-    />
+    >
+      <Pie.Chart />
+    </PolarChart>
   );
 };
 const PieChartMultipleDataPoints = () => {
   const [data] = useState(DATA(10));
   return (
-    <Pie.Chart
+    <PolarChart
       data={data}
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-      renderLegend={() => (
-        <Pie.ChartLegend
-          containerStyle={{
-            marginLeft: 25,
-            justifyContent: "center",
-          }}
-          position="right"
-        />
-      )}
     >
-      {({ slice }) => {
-        const { startX, startY, endX, endY } = calculateGradientPoints(
-          slice.radius,
-          slice.startAngle,
-          slice.endAngle,
-          slice.center.x,
-          slice.center.y,
-        );
+      <Pie.Chart>
+        {({ slice }) => {
+          const { startX, startY, endX, endY } = calculateGradientPoints(
+            slice.radius,
+            slice.startAngle,
+            slice.endAngle,
+            slice.center.x,
+            slice.center.y,
+          );
 
-        return (
-          <Pie.Slice>
-            <LinearGradient
-              start={vec(startX, startY)}
-              end={vec(endX, endY)}
-              colors={[slice.color, `${slice.color}50`]}
-              positions={[0, 1]}
-            />
-          </Pie.Slice>
-        );
-      }}
-    </Pie.Chart>
+          return (
+            <Pie.Slice>
+              <LinearGradient
+                start={vec(startX, startY)}
+                end={vec(endX, endY)}
+                colors={[slice.color, `${slice.color}50`]}
+                positions={[0, 1]}
+              />
+            </Pie.Slice>
+          );
+        }}
+      </Pie.Chart>
+    </PolarChart>
   );
 };
 const PieChartWithInsets = () => {
   const [data] = useState(DATA(6));
   return (
-    <Pie.Chart
+    <PolarChart
       data={data}
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-      renderLegend={() => (
-        <Pie.ChartLegend
-          containerStyle={{
-            marginRight: 25,
-            justifyContent: "center",
-          }}
-          position="left"
-        />
-      )}
     >
-      {({ slice }) => {
-        const { startX, startY, endX, endY } = calculateGradientPoints(
-          slice.radius,
-          slice.startAngle,
-          slice.endAngle,
-          slice.center.x,
-          slice.center.y,
-        );
+      <Pie.Chart>
+        {({ slice }) => {
+          const { startX, startY, endX, endY } = calculateGradientPoints(
+            slice.radius,
+            slice.startAngle,
+            slice.endAngle,
+            slice.center.x,
+            slice.center.y,
+          );
 
-        return (
-          <>
-            <Pie.Slice>
-              <LinearGradient
-                start={vec(startX, startY)}
-                end={vec(endX, endY)}
-                colors={[slice.color, `${slice.color}50`]}
-                positions={[0, 1]}
+          return (
+            <>
+              <Pie.Slice>
+                <LinearGradient
+                  start={vec(startX, startY)}
+                  end={vec(endX, endY)}
+                  colors={[slice.color, `${slice.color}50`]}
+                  positions={[0, 1]}
+                />
+              </Pie.Slice>
+              <Pie.SliceAngularInset
+                angularInset={{
+                  angularStrokeWidth: 4,
+                  angularStrokeColor: "white",
+                }}
               />
-            </Pie.Slice>
-            <Pie.SliceAngularInset
-              angularInset={{
-                angularStrokeWidth: 4,
-                angularStrokeColor: "white",
-              }}
-            />
-          </>
-        );
-      }}
-    </Pie.Chart>
+            </>
+          );
+        }}
+      </Pie.Chart>
+    </PolarChart>
   );
 };
 const DonutChartWithInsets = () => {
   const [data] = useState(DATA(5));
   return (
-    <Pie.Chart
+    <PolarChart
       data={data}
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-      innerRadius={"50%"}
-      renderLegend={() => (
-        <Pie.ChartLegend
-          containerStyle={{
-            justifyContent: "center",
-          }}
-          position="bottom"
-        >
-          {({ slice }) => (
-            <Pie.ChartLegendItem
-              formatLabel={(label) => `${label} - ${Math.round(slice.value)}`}
-            />
-          )}
-        </Pie.ChartLegend>
-      )}
     >
-      {({ slice }) => {
-        const { startX, startY, endX, endY } = calculateGradientPoints(
-          slice.radius,
-          slice.startAngle,
-          slice.endAngle,
-          slice.center.x,
-          slice.center.y,
-        );
+      <Pie.Chart innerRadius={"50%"}>
+        {({ slice }) => {
+          const { startX, startY, endX, endY } = calculateGradientPoints(
+            slice.radius,
+            slice.startAngle,
+            slice.endAngle,
+            slice.center.x,
+            slice.center.y,
+          );
 
-        return (
-          <>
-            <Pie.Slice>
-              <LinearGradient
-                start={vec(startX, startY)}
-                end={vec(endX, endY)}
-                colors={[slice.color, `${slice.color}50`]}
-                positions={[0, 1]}
+          return (
+            <>
+              <Pie.Slice>
+                <LinearGradient
+                  start={vec(startX, startY)}
+                  end={vec(endX, endY)}
+                  colors={[slice.color, `${slice.color}50`]}
+                  positions={[0, 1]}
+                />
+              </Pie.Slice>
+              <Pie.SliceAngularInset
+                angularInset={{
+                  angularStrokeWidth: 5,
+                  angularStrokeColor: "white",
+                }}
               />
-            </Pie.Slice>
-            <Pie.SliceAngularInset
-              angularInset={{
-                angularStrokeWidth: 5,
-                angularStrokeColor: "white",
-              }}
-            />
-          </>
-        );
-      }}
-    </Pie.Chart>
+            </>
+          );
+        }}
+      </Pie.Chart>
+    </PolarChart>
   );
 };
 
 const PieChartSimpleNoLegendNoRenderProps = () => {
   const [data] = useState(DATA(5));
   return (
-    <Pie.Chart
+    <PolarChart
       data={data}
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-    />
+    >
+      <Pie.Chart />
+    </PolarChart>
   );
 };
 const PieChartSimpleCustomLegend = () => {
   const [data] = useState(DATA(5));
   return (
-    <Pie.Chart
+    <PolarChart
       data={data}
       labelKey={"label"}
       valueKey={"value"}
       colorKey={"color"}
-      renderLegend={() => (
-        <Pie.ChartLegend
-          containerStyle={{
-            justifyContent: "center",
-          }}
-          position="bottom"
-        >
-          {({ slice }) => (
-            <View
-              style={{
-                marginRight: 8,
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-            >
-              <Canvas style={[{ height: 12, width: 12, marginRight: 4 }]}>
-                <Rect
-                  rect={{ x: 0, y: 0, width: 12, height: 12 }}
-                  color={slice.color}
-                />
-              </Canvas>
-              <Text style={{}}>{slice.label}</Text>
-            </View>
-          )}
-        </Pie.ChartLegend>
-      )}
-    />
+    >
+      <Pie.Chart />
+    </PolarChart>
   );
 };
 
diff --git a/example/app/pie-chart.tsx b/example/app/pie-chart.tsx
index 67faa576..418924d5 100644
--- a/example/app/pie-chart.tsx
+++ b/example/app/pie-chart.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
-import { Pie } from "victory-native";
+import { Pie, PolarChart } from "victory-native";
 import { InfoCard } from "example/components/InfoCard";
 import { Button } from "example/components/Button";
 import { InputSlider } from "example/components/InputSlider";
@@ -37,30 +37,14 @@ export default function PieChart(props: { segment: string }) {
             height: "45%",
           }}
         >
-          <Pie.Chart
+          <PolarChart
             data={data}
-            labelKey={"label"}
-            valueKey={"value"}
             colorKey={"color"}
-            renderLegend={() => (
-              <Pie.ChartLegend
-                containerStyle={{ alignSelf: "center" }}
-                position="bottom"
-              />
-            )}
+            valueKey={"value"}
+            labelKey={"label"}
           >
-            {() => (
-              <>
-                <Pie.Slice />
-                <Pie.SliceAngularInset
-                  angularInset={{
-                    angularStrokeWidth: insetWidth,
-                    angularStrokeColor: insetColor,
-                  }}
-                />
-              </>
-            )}
-          </Pie.Chart>
+            <Pie.Chart></Pie.Chart>
+          </PolarChart>
         </View>
 
         <View style={{ flexGrow: 1, padding: 15 }}>
diff --git a/lib/src/index.ts b/lib/src/index.ts
index 0b433236..cc3baaf2 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -46,6 +46,11 @@ export { Scatter, type ScatterShape } from "./cartesian/components/Scatter";
 // Grid and Axis
 export { CartesianAxis } from "./cartesian/components/CartesianAxis";
 
+/**
+ * Polar chart exports
+ */
+export { PolarChart } from "./polar/PolarChart";
+
 /**
  * Pie chart exports (including useful types)
  */
diff --git a/lib/src/pie/PieChart.tsx b/lib/src/pie/PieChart.tsx
index c31c74bb..a92d9353 100644
--- a/lib/src/pie/PieChart.tsx
+++ b/lib/src/pie/PieChart.tsx
@@ -1,111 +1,26 @@
 import * as React from "react";
-import { Canvas, vec, type Color } from "@shopify/react-native-skia";
-import {
-  StyleSheet,
-  View,
-  type ViewStyle,
-  type LayoutChangeEvent,
-  type StyleProp,
-} from "react-native";
-import type { ColorFields, InputFields, NumericalFields } from "../types";
+import { vec, type Color } from "@shopify/react-native-skia";
 import { PieSlice, type PieSliceData } from "./PieSlice";
-import {
-  PieChartProvider,
-  usePieChartContext,
-} from "./contexts/PieChartContext";
 import { handleTranslateInnerRadius } from "./utils/innerRadius";
 import { PieSliceProvider } from "./contexts/PieSliceContext";
+import { usePolarChartContext } from "../polar/contexts/PolarChartContext";
 
 const CIRCLE_SWEEP_DEGREES = 360;
 
-type PieChartProps<
-  RawData extends Record<string, unknown>,
-  LabelKey extends keyof InputFields<RawData>,
-  ValueKey extends keyof NumericalFields<RawData>,
-  ColorKey extends keyof ColorFields<RawData>,
-> = {
+type PieChartProps = {
   children?: (args: { slice: PieSliceData }) => React.ReactNode;
-  colorKey: ColorKey;
-  containerStyle?: StyleProp<ViewStyle>;
-  canvasStyle?: StyleProp<ViewStyle>;
-  data: RawData[];
-  labelKey: LabelKey;
-  renderLegend?: (data: PieSliceData[]) => React.ReactNode;
-  valueKey: ValueKey;
   innerRadius?: number | string;
-  onLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
-  hasMeasuredLayoutSize: boolean;
-  canvasSize: { width: number; height: number };
 };
 
-const PieChartBase = <
-  RawData extends Record<string, unknown>,
-  LabelKey extends keyof InputFields<RawData>,
-  ValueKey extends keyof NumericalFields<RawData>,
-  ColorKey extends keyof ColorFields<RawData>,
->(
-  props: PieChartProps<RawData, LabelKey, ValueKey, ColorKey>,
-) => {
+export const PieChart = (props: PieChartProps) => {
+  const { innerRadius = 0, children } = props;
   const {
-    containerStyle,
-    data: _data,
-    canvasStyle,
-    renderLegend,
-    children,
-    onLayout,
-    hasMeasuredLayoutSize,
     canvasSize,
-  } = props;
-  const { width, height } = canvasSize;
-
-  const { data, position: legendPosition } = usePieChartContext();
-
-  // Determine the container's flexDirection based on the legend's position prop
-  const baseFlexDirection =
-    legendPosition === "left" || legendPosition === "right" ? "row" : "column";
-  const isReverse = legendPosition === "left" || legendPosition === "top";
-  const dynamicStyle: ViewStyle = {
-    flexDirection: isReverse
-      ? `${baseFlexDirection}-reverse`
-      : baseFlexDirection,
-  };
-
-  return (
-    <View style={[styles.baseContainer, dynamicStyle, containerStyle]}>
-      <Canvas
-        onLayout={onLayout}
-        style={[
-          styles.canvasContainer,
-          hasMeasuredLayoutSize ? { width, height } : null,
-          canvasStyle,
-        ]}
-      >
-        {data.map((slice, index) => {
-          return (
-            <PieSliceProvider key={index} slice={slice}>
-              {children ? children({ slice }) : <PieSlice />}
-            </PieSliceProvider>
-          );
-        })}
-      </Canvas>
-      {renderLegend?.(data)}
-    </View>
-  );
-};
-
-export const PieChart = <
-  RawData extends Record<string, unknown>,
-  LabelKey extends keyof InputFields<RawData>,
-  ValueKey extends keyof NumericalFields<RawData>,
-  ColorKey extends keyof ColorFields<RawData>,
->(
-  props: Omit<
-    PieChartProps<RawData, LabelKey, ValueKey, ColorKey>,
-    "canvasSize" | "onLayout" | "hasMeasuredLayoutSize" // omit exposing internal props for calculating canvas layout/size
-  >,
-) => {
-  const { data: _data, labelKey, valueKey, colorKey, innerRadius = 0 } = props;
-  const label = labelKey as keyof RawData;
+    data: _data,
+    labelKey,
+    valueKey,
+    colorKey,
+  } = usePolarChartContext();
 
   // The sum all the slices' values
   const totalCircleValue = _data.reduce(
@@ -113,19 +28,6 @@ export const PieChart = <
     0,
   );
 
-  const [canvasSize, setCanvasSize] = React.useState({ width: 0, height: 0 });
-
-  const [hasMeasuredLayoutSize, setHasMeasuredLayoutSize] =
-    React.useState(false);
-
-  const onLayout = React.useCallback(
-    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
-      setHasMeasuredLayoutSize(true);
-      setCanvasSize(layout);
-    },
-    [],
-  );
-
   const { width, height } = canvasSize; // Get the dynamic canvas size
   const radius = Math.min(width, height) / 2; // Calculate the radius based on canvas size
   const center = vec(width / 2, height / 2);
@@ -135,7 +37,7 @@ export const PieChart = <
 
     const enhanced = _data.map((datum): PieSliceData => {
       const sliceValue = datum[valueKey] as number;
-      const sliceLabel = datum[label] as string;
+      const sliceLabel = datum[labelKey] as string;
       const sliceColor = datum[colorKey] as Color;
 
       const initialStartAngle = startAngle; // grab the initial start angle
@@ -163,29 +65,17 @@ export const PieChart = <
     _data,
     totalCircleValue,
     colorKey,
-    label,
+    labelKey,
     radius,
     center,
     innerRadius,
   ]);
 
-  return (
-    <PieChartProvider data={data}>
-      <PieChartBase
-        {...props}
-        onLayout={onLayout}
-        hasMeasuredLayoutSize={hasMeasuredLayoutSize}
-        canvasSize={canvasSize}
-      />
-    </PieChartProvider>
-  );
+  return data.map((slice, index) => {
+    return (
+      <PieSliceProvider key={index} slice={slice}>
+        {children ? children({ slice }) : <PieSlice />}
+      </PieSliceProvider>
+    );
+  });
 };
-
-const styles = StyleSheet.create({
-  baseContainer: {
-    flex: 1,
-  },
-  canvasContainer: {
-    flex: 1,
-  },
-});
diff --git a/lib/src/pie/PieChartLegend.tsx b/lib/src/pie/PieChartLegend.tsx
deleted file mode 100644
index ae2cccaf..00000000
--- a/lib/src/pie/PieChartLegend.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react";
-import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
-import type { PieSliceData } from "./PieSlice";
-import { usePieChartContext } from "./contexts/PieChartContext";
-import { PieChartLegendItem } from "./PieChartLegendItem";
-import { PieSliceProvider } from "./contexts/PieSliceContext";
-
-export type PieLegendPosition = "top" | "bottom" | "left" | "right";
-type PieChartLegendProps = {
-  position?: PieLegendPosition;
-  containerStyle?: StyleProp<ViewStyle>;
-  children?: (args: { slice: PieSliceData }) => React.ReactNode;
-};
-
-export const PieChartLegend = (props: PieChartLegendProps) => {
-  const { position = "bottom", containerStyle, children } = props;
-
-  const { setPosition, data } = usePieChartContext();
-  React.useLayoutEffect(() => {
-    setPosition(position);
-    return () => {};
-  }, [position, setPosition]);
-
-  const isHorizontal = position === "top" || position === "bottom";
-  const baseContainerStyle = isHorizontal
-    ? styles.containerRow
-    : styles.containerColumn;
-
-  return (
-    <View style={[baseContainerStyle, containerStyle]}>
-      {data.map((slice, index) => {
-        return (
-          <PieSliceProvider key={index} slice={slice}>
-            {children ? children({ slice }) : <PieChartLegendItem />}
-          </PieSliceProvider>
-        );
-      })}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  containerRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-  },
-  containerColumn: {
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-});
diff --git a/lib/src/pie/PieChartLegendItem.tsx b/lib/src/pie/PieChartLegendItem.tsx
deleted file mode 100644
index db4c56bf..00000000
--- a/lib/src/pie/PieChartLegendItem.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react";
-import {
-  StyleSheet,
-  View,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-} from "react-native";
-import { Canvas, Circle, vec } from "@shopify/react-native-skia";
-import { Text } from "example/components/Text";
-import { usePieSliceContext } from "./contexts/PieSliceContext";
-
-type PieChartLegendItemProps = {
-  formatLabel?: (label: string) => string;
-  containerStyle?: StyleProp<ViewStyle>;
-  canvasStyle?: StyleProp<ViewStyle>;
-  textStyle?: StyleProp<TextStyle>;
-};
-
-export const PieChartLegendItem = (props: PieChartLegendItemProps) => {
-  const { formatLabel, containerStyle, canvasStyle, textStyle } = props;
-  const { slice } = usePieSliceContext();
-  const { color, label } = slice;
-  const displayLabel = formatLabel ? formatLabel(label) : label;
-  return (
-    <View style={[styles.container, containerStyle]}>
-      <Canvas style={[styles.canvas, canvasStyle]}>
-        <Circle
-          c={vec(styles.canvas.height / 2, styles.canvas.height / 2)}
-          r={styles.canvas.height / 2 - 1} // - 1 to prevent clipping
-          color={color}
-        />
-      </Canvas>
-      <Text style={[textStyle]}>{displayLabel}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    padding: 5,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  canvas: {
-    height: 12,
-    width: 12,
-    marginRight: 2,
-  },
-});
diff --git a/lib/src/pie/contexts/PieChartContext.tsx b/lib/src/pie/contexts/PieChartContext.tsx
deleted file mode 100644
index 7efcf090..00000000
--- a/lib/src/pie/contexts/PieChartContext.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, {
-  useContext,
-  createContext,
-  useState,
-  type PropsWithChildren,
-} from "react";
-import type { PieLegendPosition } from "../PieChartLegend";
-import type { PieSliceData } from "../PieSlice";
-
-interface PieChartContext {
-  data: PieSliceData[];
-  position: PieLegendPosition;
-  setPosition: React.Dispatch<React.SetStateAction<PieLegendPosition>>;
-}
-
-const PieChartContext = createContext<PieChartContext | undefined>(undefined);
-
-interface PieChartProviderProps {
-  data: PieSliceData[];
-}
-
-export const PieChartProvider = (
-  props: PropsWithChildren<PieChartProviderProps>,
-) => {
-  const [position, setPosition] = useState<PieLegendPosition>("bottom");
-  const { children, data } = props;
-
-  return (
-    <PieChartContext.Provider value={{ data, position, setPosition }}>
-      {children}
-    </PieChartContext.Provider>
-  );
-};
-
-export const usePieChartContext = () => {
-  const context = useContext(PieChartContext);
-
-  if (context === undefined) {
-    throw new Error(
-      "usePieChartContext must be used within a PieChartProvider",
-    );
-  }
-
-  return context;
-};
diff --git a/lib/src/pie/index.ts b/lib/src/pie/index.ts
index 0fe0c923..71880422 100644
--- a/lib/src/pie/index.ts
+++ b/lib/src/pie/index.ts
@@ -1,6 +1,4 @@
 import { PieChart } from "./PieChart";
-import { PieChartLegend } from "./PieChartLegend";
-import { PieChartLegendItem } from "./PieChartLegendItem";
 import { PieSlice } from "./PieSlice";
 import { PieSliceAngularInset } from "./PieSliceAngularInset";
 import { PieSliceProvider } from "./contexts/PieSliceContext";
@@ -10,8 +8,6 @@ const Pie = {
   Slice: PieSlice,
   SliceProvider: PieSliceProvider,
   SliceAngularInset: PieSliceAngularInset,
-  ChartLegend: PieChartLegend,
-  ChartLegendItem: PieChartLegendItem,
 };
 
 export { Pie };
diff --git a/lib/src/polar/PolarChart.tsx b/lib/src/polar/PolarChart.tsx
new file mode 100644
index 00000000..ed7854bd
--- /dev/null
+++ b/lib/src/polar/PolarChart.tsx
@@ -0,0 +1,129 @@
+import * as React from "react";
+import { Canvas } from "@shopify/react-native-skia";
+import {
+  StyleSheet,
+  View,
+  type ViewStyle,
+  type LayoutChangeEvent,
+  type StyleProp,
+} from "react-native";
+import {
+  PolarChartProvider,
+  usePolarChartContext,
+} from "./contexts/PolarChartContext";
+import type {
+  ColorFields,
+  InputFields,
+  NumericalFields,
+  StringKeyOf,
+} from "../types";
+
+type PolarChartBaseProps = {
+  onLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
+  hasMeasuredLayoutSize: boolean;
+  canvasSize: { width: number; height: number };
+  containerStyle?: StyleProp<ViewStyle>;
+  canvasStyle?: StyleProp<ViewStyle>;
+};
+
+const PolarChartBase = (
+  props: React.PropsWithChildren<PolarChartBaseProps>,
+) => {
+  const {
+    containerStyle,
+    canvasStyle,
+    children,
+    onLayout,
+    hasMeasuredLayoutSize,
+    canvasSize,
+  } = props;
+  const { width, height } = canvasSize;
+
+  const ctx = usePolarChartContext();
+
+  return (
+    <View style={[styles.baseContainer, {}, containerStyle]}>
+      <Canvas
+        onLayout={onLayout}
+        style={[
+          styles.canvasContainer,
+          hasMeasuredLayoutSize ? { width, height } : null,
+          canvasStyle,
+        ]}
+      >
+        {/* https://shopify.github.io/react-native-skia/docs/canvas/contexts/
+            we have to re-inject our context to make it available in the skia renderer
+         */}
+        <PolarChartProvider {...ctx} canvasSize={canvasSize}>
+          {children}
+        </PolarChartProvider>
+      </Canvas>
+    </View>
+  );
+};
+
+type PolarChartProps<
+  RawData extends Record<string, unknown>,
+  LabelKey extends StringKeyOf<InputFields<RawData>>,
+  ValueKey extends StringKeyOf<NumericalFields<RawData>>,
+  ColorKey extends StringKeyOf<ColorFields<RawData>>,
+> = {
+  data: RawData[];
+  colorKey: ColorKey;
+  labelKey: LabelKey;
+  valueKey: ValueKey;
+} & Omit<
+  PolarChartBaseProps,
+  "canvasSize" | "onLayout" | "hasMeasuredLayoutSize" // omit exposing internal props for calculating canvas layout/size
+>;
+export const PolarChart = <
+  RawData extends Record<string, unknown>,
+  LabelKey extends StringKeyOf<InputFields<RawData>>,
+  ValueKey extends StringKeyOf<NumericalFields<RawData>>,
+  ColorKey extends StringKeyOf<ColorFields<RawData>>,
+>(
+  props: React.PropsWithChildren<
+    PolarChartProps<RawData, LabelKey, ValueKey, ColorKey>
+  >,
+) => {
+  const { data, labelKey, colorKey, valueKey } = props;
+
+  const [canvasSize, setCanvasSize] = React.useState({ width: 0, height: 0 });
+
+  const [hasMeasuredLayoutSize, setHasMeasuredLayoutSize] =
+    React.useState(false);
+
+  const onLayout = React.useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      setHasMeasuredLayoutSize(true);
+      setCanvasSize(layout);
+    },
+    [],
+  );
+
+  return (
+    <PolarChartProvider
+      data={data}
+      labelKey={labelKey}
+      colorKey={colorKey}
+      valueKey={valueKey}
+      canvasSize={canvasSize}
+    >
+      <PolarChartBase
+        {...props}
+        onLayout={onLayout}
+        hasMeasuredLayoutSize={hasMeasuredLayoutSize}
+        canvasSize={canvasSize}
+      />
+    </PolarChartProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  baseContainer: {
+    flex: 1,
+  },
+  canvasContainer: {
+    flex: 1,
+  },
+});
diff --git a/lib/src/polar/contexts/PolarChartContext.tsx b/lib/src/polar/contexts/PolarChartContext.tsx
new file mode 100644
index 00000000..34fb806d
--- /dev/null
+++ b/lib/src/polar/contexts/PolarChartContext.tsx
@@ -0,0 +1,57 @@
+import React, {
+  useContext,
+  createContext,
+  type PropsWithChildren,
+} from "react";
+
+interface PolarChartContext {
+  data: Record<string, unknown>[];
+  canvasSize: { width: number; height: number };
+  labelKey: string;
+  valueKey: string;
+  colorKey: string;
+}
+
+const PolarChartContext = createContext<PolarChartContext | undefined>(
+  undefined,
+);
+
+interface PolarChartProviderProps {
+  data: Record<string, unknown>[];
+  canvasSize: { width: number; height: number };
+  labelKey: string;
+  valueKey: string;
+  colorKey: string;
+}
+
+export const PolarChartProvider = (
+  props: PropsWithChildren<PolarChartProviderProps>,
+) => {
+  const { children, data, canvasSize, labelKey, valueKey, colorKey } = props;
+
+  return (
+    <PolarChartContext.Provider
+      value={{
+        data,
+        canvasSize,
+        labelKey,
+        valueKey,
+        colorKey,
+      }}
+    >
+      {children}
+    </PolarChartContext.Provider>
+  );
+};
+
+export const usePolarChartContext = () => {
+  const context = useContext(PolarChartContext);
+
+  if (context === undefined) {
+    throw new Error(
+      "usePolarChartContext must be used within a PolarChartProvider",
+    );
+  }
+
+  return context;
+};
diff --git a/lib/src/types.ts b/lib/src/types.ts
index d865db71..4f581900 100644
--- a/lib/src/types.ts
+++ b/lib/src/types.ts
@@ -86,10 +86,13 @@ export type InputFields<T> = {
 export type NumericalFields<T> = {
   [K in keyof T as T[K] extends MaybeNumber ? K : never]: T[K];
 };
+
 export type ColorFields<T> = {
   [K in keyof T as T[K] extends Color ? K : never]: T[K];
 };
 
+export type StringKeyOf<T> = Extract<keyof T, string>;
+
 export type AxisProps<
   RawData extends Record<string, unknown>,
   XK extends keyof InputFields<RawData>,
diff --git a/website/docs/pie/pie-chart-legend-item.md b/website/docs/pie/pie-chart-legend-item.md
deleted file mode 100644
index a70509f9..00000000
--- a/website/docs/pie/pie-chart-legend-item.md
+++ /dev/null
@@ -1,84 +0,0 @@
-# Pie.ChartLegendItem (Component)
-
-The `Pie.ChartLegendItem` component renders a simple legend item based on the data supplied to the `Pie` chart. Its core responsibilities are:
-
-- Simply display information associated with the data (color and label) in a legible and accessible format.
-- Offers complete customization of the legend item as needed.
-
-:::info
-
-- The `Pie.ChartLegendItem` component is associated with the `Pie.ChartLegend` component and is not meant to be used on its own.
-
-:::
-
-## Example
-
-The example below shows the most basic use of the `Pie.ChartLegendItem` within a `Pie.ChartLegend`.
-
-```tsx
-import { View } from "react-native";
-import { Pie } from "victory-native";
-
-function MyChart() {
-  return (
-    <View style={{ height: 300 }}>
-      <Pie.Chart
-        data={DATA} // 👈 specify your data
-        labelKey={"label"} // 👈 specify data key for labels
-        valueKey={"value"} // 👈 specify data key for values
-        colorKey={"color"} // 👈 specify data key for color
-        renderLegend={() => (
-          <Pie.ChartLegend
-            containerStyle={{
-              justifyContent: "center",
-            }}
-            position="top"
-          >
-            {({ slice }) => (
-              <Pie.ChartLegendItem
-                formatLabel={(label) =>
-                  `${label.toUpperCase()} - ${slice.color}`
-                }
-              />
-            )}
-          </Pie.ChartLegend>
-        )}
-      />
-    </View>
-  );
-}
-
-function randomNumber() {
-  return Math.floor(Math.random() * 26) + 125;
-}
-function generateRandomColor(): string {
-  // Generating a random number between 0 and 0xFFFFFF
-  const randomColor = Math.floor(Math.random() * 0xffffff);
-  // Converting the number to a hexadecimal string and padding with zeros
-  return `#${randomColor.toString(16).padStart(6, "0")}`;
-}
-const DATA = (numberPoints = 5) =>
-  Array.from({ length: numberPoints }, (_, index) => ({
-    value: randomNumber(),
-    color: generateRandomColor(),
-    label: `Label ${index + 1}`,
-  }));
-```
-
-## Props
-
-### `formatLabel`
-
-A function that takes a `string` and returns a `string`. This function is used to format the label of the legend item. The default value is `(label) => label`.
-
-### `containerStyle`
-
-A `StyleProp<ViewStyle>` that styles the `View` which wraps the `Pie.ChartLegendItem` component.
-
-### `canvasStyle`
-
-A `StyleProp<ViewStyle>` that styles the `Canvas` which wraps the colored adornment of `Pie.ChartLegendItem` component.
-
-### `textStyle`
-
-A `StyleProp<TextStyle>` that styles the `Text` which wraps the label of the `Pie.ChartLegendItem` component.
diff --git a/website/docs/pie/pie-chart-legend.md b/website/docs/pie/pie-chart-legend.md
deleted file mode 100644
index cc7e5828..00000000
--- a/website/docs/pie/pie-chart-legend.md
+++ /dev/null
@@ -1,228 +0,0 @@
-# Pie.ChartLegend (Component)
-
-The `Pie.ChartLegend` component renders a legend based on the data supplied to the `Pie` chart. Its core responsibilities are:
-
-- Displaying information about the data in a legible and accessible format, based on a `position` prop.
-- Offers sensible defaults with the ability to customize the legend and its children as needed.
-
-:::info
-
-- The `Pie.ChartLegend` currently functions as the "labels" for the `Pie.Chart` component, but in the future, we may add support for a variety of labels within the chart.
-- The `Pie.ChartLegend` component is associated with the `Pie.Chart` component and is not meant to be used on its own.
-
-:::
-
-## Example
-
-The example below shows the most basic use of the `Pie.Chart` with a `Pie.ChartLegend`.
-
-```tsx
-import { View } from "react-native";
-import { Pie } from "victory-native";
-
-function MyChart() {
-  return (
-    <View style={{ height: 300 }}>
-      <Pie.Chart
-        data={DATA} // 👈 specify your data
-        labelKey={"label"} // 👈 specify data key for labels
-        valueKey={"value"} // 👈 specify data key for values
-        colorKey={"color"} // 👈 specify data key for color
-        renderLegend={() => (
-          <Pie.ChartLegend
-            position="bottom" // 👈 specify where the legend should go
-          />
-        )}
-      />
-    </View>
-  );
-}
-
-function randomNumber() {
-  return Math.floor(Math.random() * 26) + 125;
-}
-function generateRandomColor(): string {
-  // Generating a random number between 0 and 0xFFFFFF
-  const randomColor = Math.floor(Math.random() * 0xffffff);
-  // Converting the number to a hexadecimal string and padding with zeros
-  return `#${randomColor.toString(16).padStart(6, "0")}`;
-}
-const DATA = (numberPoints = 5) =>
-  Array.from({ length: numberPoints }, (_, index) => ({
-    value: randomNumber(),
-    color: generateRandomColor(),
-    label: `Label ${index + 1}`,
-  }));
-```
-
-## Props
-
-### `position`
-
-A specific value indicating the position of the legend. The value can be one of the following: `"top" | "bottom" | "left" | "right";`. The default value is `"bottom"`.
-
-### `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 legend label as needed. E.g. this slice will have all the data needed to render a `Pie.ChartLegendItem` or your own custom component.
-
-If you do not provide any children, the `Pie.ChartLegend` will just render a simple `Pie.ChartLegendItem />` for each slice. However, you can provide children in order to fully customize the legend items.
-
-See the [Pie.ChartLegendItem](/pie/pie-chart-legend-item) section for more information.
-
-**See the [Render Function Fields](#render-function-fields) section for an outline of all of the available fields on the render function argument.**
-
-The example below shows a more complex use of the `Pie.ChartLegend`:
-
-#### Example
-
-```tsx
-import { View } from "react-native";
-import { Pie } from "victory-native";
-
-function MyChart() {
-  return (
-    <View style={{ height: 300 }}>
-      <Pie.Chart
-        data={DATA} // 👈 specify your data
-        labelKey={"label"} // 👈 specify data key for labels
-        valueKey={"value"} // 👈 specify data key for values
-        colorKey={"color"} // 👈 specify data key for color
-        renderLegend={() => (
-          <Pie.ChartLegend
-            containerStyle={{
-              justifyContent: "center",
-            }}
-            position="top"
-          >
-            {({ slice }) => (
-              <Pie.ChartLegendItem
-                formatLabel={(label) =>
-                  `${label.toUpperCase()} - ${slice.color}`
-                }
-              />
-            )}
-          </Pie.ChartLegend>
-        )}
-      />
-    </View>
-  );
-}
-
-function randomNumber() {
-  return Math.floor(Math.random() * 26) + 125;
-}
-
-function generateRandomColor(): string {
-  // Generating a random number between 0 and 0xFFFFFF
-  const randomColor = Math.floor(Math.random() * 0xffffff);
-  // Converting the number to a hexadecimal string and padding with zeros
-  return `#${randomColor.toString(16).padStart(6, "0")}`;
-}
-
-const DATA = (numberPoints = 5) =>
-  Array.from({ length: numberPoints }, (_, index) => ({
-    value: randomNumber(),
-    color: generateRandomColor(),
-    label: `Label ${index + 1}`,
-  }));
-```
-
-### `containerStyle`
-
-A `StyleProp<ViewStyle>` that styles the `View` which wraps the `Pie.Legend` component.
-
-## Render Function Fields
-
-The `Pie.ChartLegend` `children` render function has a single argument that is an object with the following fields.
-
-### `slice`
-
-An object of the form of `PieSliceData` which is the transformed data for each slice of the pie. The `slice` object has the following fields:
-
-```ts
-type PieSliceData = {
-  center: SkPoint;
-  color: Color;
-  endAngle: number;
-  innerRadius: number;
-  label: string;
-  radius: number;
-  sliceIsEntireCircle: boolean;
-  startAngle: number;
-  sweepAngle: number;
-  value: number;
-};
-```
-
-You do not need to pass this `slice` to the `Pie.ChartLegendItem` component, but you can use it to customize your own legend items as needed.
-
-## Custom Legend Items
-
-The example below shows an even more complex use of the `Pie.ChartLegend`:
-
-### Example
-
-```tsx
-import { View, Text } from "react-native";
-import { Pie } from "victory-native";
-import { Canvas, Rect } from "@shopify/react-native-skia";
-
-function MyChart() {
-  return (
-    <View style={{ height: 300 }}>
-      <Pie.Chart
-        data={data}
-        labelKey={"label"}
-        valueKey={"value"}
-        colorKey={"color"}
-        renderLegend={() => (
-          <Pie.ChartLegend
-            containerStyle={{
-              justifyContent: "center",
-            }}
-            position="bottom"
-          >
-            {/* 👇 draw whatever you want here -- you don't have to use the Pie.ChartLegendItem */}
-            {({ slice }) => (
-              <View
-                style={{
-                  marginRight: 8,
-                  flexDirection: "row",
-                  alignItems: "center",
-                }}
-              >
-                {/* 👇 draw a custom shape instead of a circle, or don't even use Canvas, up to you  */}
-                <Canvas style={[{ height: 12, width: 12, marginRight: 4 }]}>
-                  <Rect
-                    rect={{ x: 0, y: 0, width: 12, height: 12 }}
-                    color={slice.color}
-                  />
-                </Canvas>
-                <Text>{slice.label}</Text>
-              </View>
-            )}
-          </Pie.ChartLegend>
-        )}
-      />
-    </View>
-  );
-}
-
-function randomNumber() {
-  return Math.floor(Math.random() * 26) + 125;
-}
-
-function generateRandomColor(): string {
-  // Generating a random number between 0 and 0xFFFFFF
-  const randomColor = Math.floor(Math.random() * 0xffffff);
-  // Converting the number to a hexadecimal string and padding with zeros
-  return `#${randomColor.toString(16).padStart(6, "0")}`;
-}
-
-const DATA = (numberPoints = 5) =>
-  Array.from({ length: numberPoints }, (_, index) => ({
-    value: randomNumber(),
-    color: generateRandomColor(),
-    label: `Label ${index + 1}`,
-  }));
-```
diff --git a/website/docs/pie/pie-charts.md b/website/docs/polar/pie/pie-charts.md
similarity index 77%
rename from website/docs/pie/pie-charts.md
rename to website/docs/polar/pie/pie-charts.md
index 6f191bdd..ca60226f 100644
--- a/website/docs/pie/pie-charts.md
+++ b/website/docs/polar/pie/pie-charts.md
@@ -1,18 +1,14 @@
 # Pie.Chart (Component)
 
-The `Pie.Chart` component provides another kind of charting component in `victory-native`. Its core responsibilities are:
-
-- transforming raw data into a format that can be easily accessed and used for charting `Pie` and `Donut` charts.
-- display metadata via the `Pie.ChartLegend` component.
-- offers sensible defaults with the ability to customize the chart, slices, and legend as needed.
+The `Pie.Chart` component is a child component of the `PolarChart` component and is responsible for rendering the `Pie` or `Donut` chart.
 
 :::info
-This chart does not yet support gestures or animations.
+This chart does not yet support labels. We are working on adding support for labels in the future. In the meantime, you can easily add your own legend next to the chart. See the [example app](https://github.com/FormidableLabs/victory-native-xl/tree/main/example) for more details.
 :::
 
 :::tip
 
-The example app inside this repo has a lot of examples of how to use the `Pie.Chart` and its associated components!
+The [example app](https://github.com/FormidableLabs/victory-native-xl/tree/main/example) inside this repo has a lot of examples of how to use the `Pie.Chart` and its associated components!
 
 :::
 
@@ -27,12 +23,14 @@ import { Pie } from "victory-native";
 function MyChart() {
   return (
     <View style={{ height: 300 }}>
-      <Pie.Chart
+      <PolarChart
         data={DATA} // 👈 specify your data
         labelKey={"label"} // 👈 specify data key for labels
         valueKey={"value"} // 👈 specify data key for values
         colorKey={"color"} // 👈 specify data key for color
-      />
+      >
+        <Pie.Chart />
+      </PolarChart>
     </View>
   );
 }
@@ -56,20 +54,12 @@ const DATA = (numberPoints = 5) =>
 
 ## Props
 
-### `data` (required)
-
-An array of objects to be used as data points for the chart.
-
-### `labelKey` (required)
-
-A `string` value indicating the _key_ of each `data[number]` object to be used. Currently only used on the legend part of the chart. In the future we may add support for a variety of labels within the chart. The value of the label can be a `string` | `number`
-
-### `valueKey` (required)
+### `innerRadius`
 
-A `string` value indicating the _key_ of each `data[number]` object to be used to draw a slice of the Pie.
+A `number` or `string` (as a percentage) which turns the `Pie` chart into a `Donut` chart. The `innerRadius` prop is the radius of the inner circle of the donut chart. If not provided, the chart will remain a `Pie` chart.
 
-:::info
-The `valueKey` prop must be a key for a field that has a `number` value. That is, only `number`s can be used as dependent values for charting purposes.
+:::tip
+The `innerRadius` prop must be a `number` or a `string` like `50%`.
 :::
 
 ### `children`
@@ -178,26 +168,6 @@ const DATA = (numberPoints = 5) =>
   }));
 ```
 
-### `containerStyle`
-
-A `StyleProp<ViewStyle>` that styles the `View` which wraps the `Canvas` and `Legend` of the `Pie` chart.
-
-### `canvasStyle`
-
-A `StyleProp<ViewStyle>` that styles the `Canvas` upon which the `Pie` chart is drawn.
-
-### `innerRadius`
-
-A `number` or `string` (as a percentage) which turns the `Pie` chart into a `Donut` chart. The `innerRadius` prop is the radius of the inner circle of the donut chart. If not provided, the chart will remain a `Pie` chart.
-
-:::tip
-The `innerRadius` prop must be a `number` or a `string` like `50%`.
-:::
-
-### `renderLegend`
-
-A render prop that allows you to customize the legend. See the [Pie.ChartLegend](/pie/pie-chart-legend) section for more information.
-
 ## Render Function Fields
 
 The `Pie.Chart` `children` render function has a single argument that is an object with the following fields.
diff --git a/website/docs/pie/use-slice-angular-inset-path.md b/website/docs/polar/pie/use-slice-angular-inset-path.md
similarity index 100%
rename from website/docs/pie/use-slice-angular-inset-path.md
rename to website/docs/polar/pie/use-slice-angular-inset-path.md
diff --git a/website/docs/pie/use-slice-path.md b/website/docs/polar/pie/use-slice-path.md
similarity index 100%
rename from website/docs/pie/use-slice-path.md
rename to website/docs/polar/pie/use-slice-path.md
diff --git a/website/docs/polar/polar-chart.md b/website/docs/polar/polar-chart.md
new file mode 100644
index 00000000..6180ef9b
--- /dev/null
+++ b/website/docs/polar/polar-chart.md
@@ -0,0 +1,94 @@
+# Polar Chart
+
+The `PolarChart` component provides another chart container component in `victory-native`. Its core responsibilities are:
+
+- accepting raw data and metadata in a format that can then be easily transformed and used for charting `Pie` and `Donut` charts.
+
+:::info
+This chart does not yet support gestures or animations.
+:::
+
+:::tip
+
+The [example app](https://github.com/FormidableLabs/victory-native-xl/tree/main/example) inside this repo has a lot of examples of how to use the `PolarChart` and its associated components!
+
+:::
+
+## Example
+
+The example below shows the most basic use of the `PolarChart`.
+
+```tsx
+import { View } from "react-native";
+import { Pie } from "victory-native";
+
+function MyChart() {
+  return (
+    <View style={{ height: 300 }}>
+      <PolarChart
+        data={DATA} // 👈 specify your data
+        labelKey={"label"} // 👈 specify data key for labels
+        valueKey={"value"} // 👈 specify data key for values
+        colorKey={"color"} // 👈 specify data key for color
+      >
+        <Pie.Chart />
+      </PolarChart>
+    </View>
+  );
+}
+
+// helper functions for example purposes:
+function randomNumber() {
+  return Math.floor(Math.random() * 26) + 125;
+}
+function generateRandomColor(): string {
+  // Generating a random number between 0 and 0xFFFFFF
+  const randomColor = Math.floor(Math.random() * 0xffffff);
+  // Converting the number to a hexadecimal string and padding with zeros
+  return `#${randomColor.toString(16).padStart(6, "0")}`;
+}
+const DATA = (numberPoints = 5) =>
+  Array.from({ length: numberPoints }, (_, index) => ({
+    value: randomNumber(),
+    color: generateRandomColor(),
+    label: `Label ${index + 1}`,
+  }));
+```
+
+## Props
+
+### `data` (required)
+
+An array of objects to be used as data points for the chart.
+
+### `labelKey` (required)
+
+A `string` value indicating the _key_ of each `data[number]` object to be used. Currently only used on the legend part of the chart. In the future we may add support for a variety of labels within the chart. The value of the label can be a `string` | `number`
+
+### `valueKey` (required)
+
+A `string` value indicating the _key_ of each `data[number]` object to be used to draw a slice of the Pie.
+
+:::info
+The `valueKey` prop must be a key for a field that has a `number` value. That is, only `number`s can be used as dependent values for charting purposes.
+:::
+
+### `colorKey` (required)
+
+A `string` value indicating the _key_ of each `data[number]` object to be used to draw a slice of the Pie.
+
+:::info
+The `valueKey` prop must be a key for a field that has a Skia `Color` value.
+:::
+
+### `children`
+
+The only supported `children` of a `PolarChart` is currently a `Pie.Chart` **See the [Pie Chart](<(/pie/pie-charts)>) for more details.**
+
+### `containerStyle`
+
+A `StyleProp<ViewStyle>` that styles the `View` which wraps the `Canvas` of the `Polar` chart.
+
+### `canvasStyle`
+
+A `StyleProp<ViewStyle>` that styles the `Canvas` upon which the `Polar` chart is drawn.
diff --git a/website/sidebars.js b/website/sidebars.js
index 2446e599..b51748f7 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -50,18 +50,20 @@ const sidebars = {
     },
     {
       type: "category",
-      label: "Pie Charts",
+      label: "Polar Charts",
       collapsed: false,
       collapsible: false,
       items: [
-        "pie/pie-charts",
+        "polar/polar-chart",
         {
           type: "category",
-          label: "Legends",
-          items: ["pie/pie-chart-legend", "pie/pie-chart-legend-item"],
+          label: "Pie / Donut Paths",
+          items: [
+            "polar/pie/pie-charts",
+            "polar/pie/use-slice-path",
+            "polar/pie/use-slice-angular-inset-path",
+          ],
         },
-        "pie/use-slice-path",
-        "pie/use-slice-angular-inset-path",
       ],
     },
 

From 25ae9cc10253047fd7ce9b7fd661436f449f5a73 Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Mon, 18 Mar 2024 14:48:45 -0700
Subject: [PATCH 12/15] add some legends examples

---
 example/app/pie-and-donut-charts.tsx | 141 +++++++++++++++++++--------
 example/app/pie-chart.tsx            |   2 +-
 2 files changed, 101 insertions(+), 42 deletions(-)

diff --git a/example/app/pie-and-donut-charts.tsx b/example/app/pie-and-donut-charts.tsx
index b1992844..b2006b0e 100644
--- a/example/app/pie-and-donut-charts.tsx
+++ b/example/app/pie-and-donut-charts.tsx
@@ -1,6 +1,12 @@
 import React, { useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
-import { LinearGradient, vec } from "@shopify/react-native-skia";
+import {
+  Canvas,
+  Circle,
+  LinearGradient,
+  Rect,
+  vec,
+} from "@shopify/react-native-skia";
 import { Pie, PolarChart } from "victory-native";
 import { InfoCard } from "example/components/InfoCard";
 import { Text } from "example/components/Text";
@@ -98,35 +104,54 @@ const PieChartSingleDataPoint = () => {
 const PieChartMultipleDataPoints = () => {
   const [data] = useState(DATA(10));
   return (
-    <PolarChart
-      data={data}
-      labelKey={"label"}
-      valueKey={"value"}
-      colorKey={"color"}
-    >
-      <Pie.Chart>
-        {({ slice }) => {
-          const { startX, startY, endX, endY } = calculateGradientPoints(
-            slice.radius,
-            slice.startAngle,
-            slice.endAngle,
-            slice.center.x,
-            slice.center.y,
-          );
+    <View style={{ flex: 1 }}>
+      <PolarChart
+        data={data}
+        labelKey={"label"}
+        valueKey={"value"}
+        colorKey={"color"}
+      >
+        <Pie.Chart>
+          {({ slice }) => {
+            const { startX, startY, endX, endY } = calculateGradientPoints(
+              slice.radius,
+              slice.startAngle,
+              slice.endAngle,
+              slice.center.x,
+              slice.center.y,
+            );
 
-          return (
-            <Pie.Slice>
-              <LinearGradient
-                start={vec(startX, startY)}
-                end={vec(endX, endY)}
-                colors={[slice.color, `${slice.color}50`]}
-                positions={[0, 1]}
+            return (
+              <Pie.Slice>
+                <LinearGradient
+                  start={vec(startX, startY)}
+                  end={vec(endX, endY)}
+                  colors={[slice.color, `${slice.color}50`]}
+                  positions={[0, 1]}
+                />
+              </Pie.Slice>
+            );
+          }}
+        </Pie.Chart>
+      </PolarChart>
+      <View style={styles.legend}>
+        {data.map((d, i) => (
+          <View key={i} style={[styles.legendItemContainer]}>
+            <Canvas style={[styles.legendItemCanvas]}>
+              <Circle
+                c={vec(
+                  styles.legendItemCanvas.height / 2,
+                  styles.legendItemCanvas.height / 2,
+                )}
+                r={styles.legendItemCanvas.height / 2 - 1} // - 1 to prevent clipping
+                color={d.color}
               />
-            </Pie.Slice>
-          );
-        }}
-      </Pie.Chart>
-    </PolarChart>
+            </Canvas>
+            <Text style={[]}>{d.label}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
   );
 };
 const PieChartWithInsets = () => {
@@ -214,7 +239,7 @@ const DonutChartWithInsets = () => {
   );
 };
 
-const PieChartSimpleNoLegendNoRenderProps = () => {
+const PieChartSimpleNoCustomizations = () => {
   const [data] = useState(DATA(5));
   return (
     <PolarChart
@@ -230,14 +255,38 @@ const PieChartSimpleNoLegendNoRenderProps = () => {
 const PieChartSimpleCustomLegend = () => {
   const [data] = useState(DATA(5));
   return (
-    <PolarChart
-      data={data}
-      labelKey={"label"}
-      valueKey={"value"}
-      colorKey={"color"}
-    >
-      <Pie.Chart />
-    </PolarChart>
+    <View style={{ flex: 1 }}>
+      <PolarChart
+        data={data}
+        labelKey={"label"}
+        valueKey={"value"}
+        colorKey={"color"}
+      >
+        <Pie.Chart />
+      </PolarChart>
+      <View style={{ flexDirection: "row", alignSelf: "center", marginTop: 5 }}>
+        {data.map((d, index) => {
+          return (
+            <View
+              key={index}
+              style={{
+                marginRight: 8,
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Canvas style={[{ height: 12, width: 12, marginRight: 4 }]}>
+                <Rect
+                  rect={{ x: 0, y: 0, width: 12, height: 12 }}
+                  color={d.color}
+                />
+              </Canvas>
+              <Text style={{}}>{d.label}</Text>
+            </View>
+          );
+        })}
+      </View>
+    </View>
   );
 };
 
@@ -251,10 +300,8 @@ export default function PieAndDonutCharts(props: { segment: string }) {
           <InfoCard style={{ flex: 0 }}>{description}</InfoCard>
         </View>
         <View style={styles.chartContainer}>
-          <Text style={styles.title}>
-            Pie Chart with No Legend or Render Props
-          </Text>
-          <PieChartSimpleNoLegendNoRenderProps />
+          <Text style={styles.title}>Pie Chart with No Customizations</Text>
+          <PieChartSimpleNoCustomizations />
         </View>
         <View style={styles.chartContainer}>
           <Text style={styles.title}>Donut Chart with Insets</Text>
@@ -304,4 +351,16 @@ const styles = StyleSheet.create({
     },
   },
   title: { marginBottom: 10, fontSize: 16, fontWeight: "bold" },
+  legend: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center" },
+  legendItemContainer: {
+    flexDirection: "row",
+    padding: 5,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  legendItemCanvas: {
+    height: 12,
+    width: 12,
+    marginRight: 2,
+  },
 });
diff --git a/example/app/pie-chart.tsx b/example/app/pie-chart.tsx
index 418924d5..159d618d 100644
--- a/example/app/pie-chart.tsx
+++ b/example/app/pie-chart.tsx
@@ -43,7 +43,7 @@ export default function PieChart(props: { segment: string }) {
             valueKey={"value"}
             labelKey={"label"}
           >
-            <Pie.Chart></Pie.Chart>
+            <Pie.Chart />
           </PolarChart>
         </View>
 

From df6d962c09a4d96bd88152b97f6ccfda2c858abf Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Tue, 19 Mar 2024 11:51:48 -0700
Subject: [PATCH 13/15] fix link

---
 website/docs/polar/polar-chart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/docs/polar/polar-chart.md b/website/docs/polar/polar-chart.md
index 6180ef9b..eed89d53 100644
--- a/website/docs/polar/polar-chart.md
+++ b/website/docs/polar/polar-chart.md
@@ -83,7 +83,7 @@ The `valueKey` prop must be a key for a field that has a Skia `Color` value.
 
 ### `children`
 
-The only supported `children` of a `PolarChart` is currently a `Pie.Chart` **See the [Pie Chart](<(/pie/pie-charts)>) for more details.**
+The only supported `children` of a `PolarChart` is currently a `Pie.Chart` **See the [Pie Chart](/polar/pie/pie-charts) for more details.**
 
 ### `containerStyle`
 

From a72d8410e34f9aa0e956034a0e179f85506cb72f Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Tue, 19 Mar 2024 11:56:28 -0700
Subject: [PATCH 14/15] add changeset

---
 .changeset/friendly-buttons-approve.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/friendly-buttons-approve.md

diff --git a/.changeset/friendly-buttons-approve.md b/.changeset/friendly-buttons-approve.md
new file mode 100644
index 00000000..596418b6
--- /dev/null
+++ b/.changeset/friendly-buttons-approve.md
@@ -0,0 +1,6 @@
+---
+"victory-native": minor
+"example": patch
+---
+
+Add Pie/Donut charts

From 73017dadec80201453682d9efaea8d1fd69ebbf0 Mon Sep 17 00:00:00 2001
From: Eli Zibin <elizibin@gmail.com>
Date: Tue, 19 Mar 2024 13:39:16 -0700
Subject: [PATCH 15/15] move example pie charts out of dev mode

---
 example/app/consts/routes.ts | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts
index 430f2ece..4ce100ed 100644
--- a/example/app/consts/routes.ts
+++ b/example/app/consts/routes.ts
@@ -58,6 +58,24 @@ export const ChartRoutes: {
       "This chart showcases using custom shaders from Skia, leveraging shader uniforms derived from Reanimated shared values.",
     path: "/custom-shaders",
   },
+  {
+    title: "Pie Chart",
+    description:
+      "This is a Pie chart in Victory. It has support for customizing each slice and adding insets.",
+    path: "/pie-chart",
+  },
+  {
+    title: "Donut Chart",
+    description:
+      "This is how to make a Donut chart in Victory. It is built off of the Pie chart using the `innerRadius` prop.",
+    path: "/donut-chart",
+  },
+  {
+    title: "Pie and Donut Assortment",
+    description:
+      "This is mixture of Pie and Donut charts, showing off the different ways to customize the charts.",
+    path: "/pie-and-donut-charts",
+  },
 ];
 
 if (__DEV__) {
@@ -85,24 +103,6 @@ if (__DEV__) {
         "This page shows multiple charts with gestures inside a scrollview to ensure both platforms allow for this behavior.",
       path: "/scrollview-charts",
     },
-    {
-      title: "Pie Chart",
-      description:
-        "This is a Pie chart in Victory. It has support for customizing each slice and adding insets.",
-      path: "/pie-chart",
-    },
-    {
-      title: "Donut Chart",
-      description:
-        "This is how to make a Donut chart in Victory. It is built off of the Pie chart using the `innerRadius` prop.",
-      path: "/donut-chart",
-    },
-    {
-      title: "Pie and Donut Assortment",
-      description:
-        "This is mixture of Pie and Donut charts, showing off the different ways to customize the charts.",
-      path: "/pie-and-donut-charts",
-    },
   );
 }