### Initial Chart Setup

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/guides/multi-press.md

This is the base chart configuration from the Getting Started guide, including data, axes, and a single tooltip.

```tsx
import * as React from "react";
import { View } from "react-native";
import { CartesianChart, Line, useChartPressState } from "victory-native";
import { Circle, useFont } from "@shopify/react-native-skia";
import type { SharedValue } from "react-native-reanimated";
import inter from "../../assets/inter-medium.ttf"; // Wherever your font actually lives

function MyChart() {
  const font = useFont(inter, 12);
  const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });

  return (
    <View style={{ height: 300 }}>
      <CartesianChart
        data={DATA}
        xKey="day"
        yKeys={["highTmp"]}
        axisOptions={{ font }}
        chartPressState={state}
      >
        {({ points }) => (
          <>
            <Line points={points.highTmp} color="red" strokeWidth={3} />
            {isActive && (
              <ToolTip x={state.x.position} y={state.y.highTmp.position} />
            )}
          </>
        )}
      </CartesianChart>
    </View>
  );
}

function ToolTip({ x, y }: { x: SharedValue<number>; y: SharedValue<number> }) {
  return <Circle cx={x} cy={y} r={8} color="black" />;
}

const DATA = Array.from({ length: 31 }, (_, i) => ({
  day: i,
  highTmp: 40 + 30 * Math.random(),
}));
```

--------------------------------

### Install Dependencies

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/CONTRIBUTING.md

Install all project dependencies using yarn.

```sh
$ yarn install
```

--------------------------------

### Develop Library and Example App

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/CONTRIBUTING.md

Run the library development and the Expo-based example app concurrently in separate terminals.

```sh
# Expo Go-based demo app (in two different terminals)
$ yarn dev:lib
$ yarn dev:example
```

--------------------------------

### Complete Basic Bar Chart Example with Gradient

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/guides/basic-bar-chart.md

This is the full code for a basic bar chart example using Victory Native XL. It includes data generation, chart setup, axis configuration, and applying a linear gradient to the bars.

```tsx
import { View } from "react-native"
import { Bar, CartesianChart } from "victory-native"
import { LinearGradient, useFont, vec } from "@shopify/react-native-skia"
import inter from "../fonts/inter-medium.ttf"

const MusicChart = () => {
  const font = useFont(inter, 12)
  const data = Array.from({ length: 6 }, (_, index) => ({
    month: index + 1,
    listenCount: Math.floor(Math.random() * (100 - 50 + 1)) + 50,
  }))

  return (
    <CartesianChart
      data={data}
      xKey="month"
      yKeys={["listenCount"]}
      domainPadding={{ left: 50, right: 50, top: 30 }}
      axisOptions={{
        font,
        formatXLabel(value) {
          const date = new Date(2023, value - 1)
          return date.toLocaleString("default", { month: "short" })
        },
      }}>
      {({
        points,
        chartBounds,
      }) => (
        <Bar
          chartBounds={chartBounds}
          points={points.listenCount}
          roundedCorners={{
            topLeft: 5,
            topRight: 5,
          }}>
          <LinearGradient
            start={vec(0, 0)}
            end={vec(0, 400)}
            colors={["#a78bfa", "#a78bfa50"]}
          />
        </Bar>
      )}
    </CartesianChart>
  )
}

```

--------------------------------

### Install Victory Native Package

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/README.md

After installing peer dependencies, install the Victory Native package itself. This command adds the core Victory Native library to your project.

```shell
yarn add victory-native
```

--------------------------------

### Full Multi-Press Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/guides/multi-press.md

This example shows a complete implementation of a Cartesian chart with two independent press states, each displaying a tooltip when active. It requires setting up `useChartPressState` for each desired press point and conditionally rendering tooltips based on their active states.

```tsx
import * as React from "react";
import { View } from "react-native";
import { CartesianChart, Line, useChartPressState } from "victory-native";
import { Circle, useFont } from "@shopify/react-native-skia";
import type { SharedValue } from "react-native-reanimated";
import inter from "../../assets/inter-medium.ttf";

const INIT_STATE = { x: 0, y: { highTmp: 0 } } as const;

function MyChart() {
  const font = useFont(inter, 12);
  const { state: firstPress, isActive: isFirstPressActive } = 
    useChartPressState(INIT_STATE);
  const { state: secondPress, isActive: isSecondPressActive } = 
    useChartPressState(INIT_STATE);

  return (
    <View style={{ height: 300 }}>
      <CartesianChart
        data={DATA}
        xKey="day"
        yKeys={["highTmp"]}
        axisOptions={{ font }}
        chartPressState={[firstPress, secondPress]}
      >
        {({
          points
        }) => (
          <>
            <Line points={points.highTmp} color="red" strokeWidth={3} />
            {isFirstPressActive && (
              <ToolTip
                x={firstPress.x.position}
                y={firstPress.y.highTmp.position}
              />
            )}
            {isSecondPressActive && (
              <ToolTip
                x={secondPress.x.position}
                y={secondPress.y.highTmp.position}
              />
            )}
          </>
        )}
      </CartesianChart>
    </View>
  );
}

function ToolTip({ x, y }: { x: SharedValue<number>; y: SharedValue<number> }) {
  return <Circle cx={x} cy={y} r={8} color="black" />;
}

const DATA = Array.from({ length: 31 }, (_, i) => ({
  day: i,
  highTmp: 40 + 30 * Math.random(),
}));

```

--------------------------------

### Install Victory Native Peer Dependencies

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/README.md

Install the required peer dependencies for Victory Native: React Native Reanimated, Gesture Handler, and Skia. Ensure these are installed before proceeding with Victory Native.

```shell
yarn add react-native-reanimated react-native-gesture-handler @shopify/react-native-skia
```

--------------------------------

### Create Mock Data for Bar Chart

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/guides/basic-bar-chart.md

Prepare an array of objects, where each object has 'x' and 'y' keys, suitable for Victory Native charts. This example generates random listen counts for each month.

```tsx
const data = Array.from({ length: 6 }, (_, index) => ({
    // Starting at 1 for January
    month: index + 1,
    // Randomizing the listen count between 100 and 50
    listenCount: Math.floor(Math.random() * (100 - 50 + 1)) + 50,
}))
```

--------------------------------

### Basic Polar Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/polar/polar-chart.md

Demonstrates the fundamental usage of the PolarChart component with sample data and configuration. Ensure you have the necessary imports from 'react-native' and 'victory-native'.

```tsx
import { View } from "react-native";
import { Pie, PolarChart } 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}`,
  }));

```

--------------------------------

### Headless Polar Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/headless-rendering.md

Generate a headless Polar chart using `PolarChart` and `Pie.Chart`. This example demonstrates setting `explicitSize` and `headless` for Skia-only rendering.

```tsx
import { Pie, PolarChart } from "victory-native";

const chart = (
  <PolarChart
    data={DATA}
    labelKey="label"
    valueKey="value"
    colorKey="color"
    explicitSize={{ width: 320, height: 320 }}
    headless
  >
    <Pie.Chart />
  </PolarChart>
);
```

--------------------------------

### Calculating Bar Width with getBarWidth

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/bar/use-bar-path.md

Shows how to use the getBarWidth helper function to calculate the width of bars, which can be useful for custom bar overlays. This example specifies inner padding and a maximum visible bar count.

```ts
const barWidth = getBarWidth({
  points,
  chartBounds,
  innerPadding: 0.25,
  barCount: maxVisibleBars,
});
```

--------------------------------

### Basic BarGroup Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/bar/bar-group.md

This example demonstrates how to use the BarGroup component to render a grouped bar chart with two datasets. Ensure you have imported CartesianChart, BarGroup, and your data.

```tsx
import { CartesianChart, BarGroup } from "victory-native";
import DATA from "./my-data";

export function MyChart() {
  return (
    <CartesianChart data={DATA} xKey="x" yKeys={["y", "z"]}>
      {({ points, chartBounds }) => (
        <BarGroup
          chartBounds={chartBounds}
          betweenGroupPadding={0.3}
          withinGroupPadding={0.1}
        >
          <BarGroup.Bar points={points.y} color="red" />
          <BarGroup.Bar points={points.z} color="blue" />
        </BarGroup>
      )}
    </CartesianChart>
  );
}
```

--------------------------------

### Basic ScrollView with Chart Press Gesture

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/chart-gestures.mdx

This example demonstrates how to integrate chart press gestures with a scrollable container using `simultaneousWithExternalGesture`. It ensures that both scrolling and chart pressing are recognized correctly.

```tsx
import { useRef } from "react";
import { ScrollView } from "react-native-gesture-handler";
import { CartesianChart, useChartPressState } from "victory-native";

function ScrollableChart() {
  const scrollRef = useRef<ScrollView>(null);
  const { state } = useChartPressState({ x: 0, y: { value: 0 } });

  return (
    <ScrollView ref={scrollRef}>
      <CartesianChart
        data={data}
        xKey="x"
        yKeys={["value"]}
        chartPressState={state}
        chartPressConfig={{
          pan: {
            simultaneousWithExternalGesture: scrollRef,
          },
        }}
      >
        {/* ... */}
      </CartesianChart>
    </ScrollView>
  );
}

```

--------------------------------

### Using useAnimatedPath Hook

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/animated-paths.md

This example demonstrates how to use the `useAnimatedPath` hook to create an animated line chart. It requires `victory-native`, `@shopify/react-native-skia`, and `react-native-reanimated`. Ensure that the number of points in the path remains constant for animation to work.

```tsx
import {
  CartesianChart,
  useLinePath,
  useAnimatedPath,
  type PointsArray,
} from "victory-native";
import { Path } from "@shopify/react-native-skia";
import DATA from "./my-data";

function MyAnimatedLine({ points }: { points: PointsArray }) {
  const { path } = useLinePath(points);
  // 👇 create an animated path
  const animPath = useAnimatedPath(path);

  return <Path path={animPath} style="stroke" color="red" strokeWidth={3} />;
}

export function MyChart() {
  return (
    <CartesianChart data={DATA} xKey="x" yKeys={["y"]}>
      {({
        points
      }) => <MyAnimatedLine points={points.y} />}
    </CartesianChart>
  );
}
```

--------------------------------

### Headless Cartesian Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/headless-rendering.md

Render a Cartesian chart as a Skia-only subtree. Ensure `explicitSize` is set and `headless` is true. The host must mount this subtree in an offscreen Skia surface for snapshotting.

```tsx
import { CartesianChart, Line } from "victory-native";

const width = 400;
const height = 300;

const chart = (
  <CartesianChart
    data={DATA}
    xKey="day"
    yKeys={["value"]}
    explicitSize={{ width, height }}
    headless
  >
    {(/* @ts-ignore */
    ({ points }) => (
      <Line points={points.value} color="royalblue" strokeWidth={2} />
    ))}
  </CartesianChart>
);

// Mount `chart` inside your host's offscreen Skia surface, then snapshot.
```

--------------------------------

### Basic Pie Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/polar/pie/pie-charts.md

Demonstrates the fundamental usage of the Pie.Chart component within a PolarChart. Ensure data, labelKey, valueKey, and colorKey are specified.

```tsx
import { View } from "react-native";
import { Pie, PolarChart } 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>
  );
}

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

```

--------------------------------

### Basic Cartesian Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/cartesian-chart.md

Demonstrates a basic implementation of the CartesianChart component with a Line series. Ensure you have a font file imported for tick labels and specify your data, xKey, yKeys, and axis options.

```tsx
import { View } from "react-native";
import { CartesianChart, Line } from "victory-native";
import { useFont } from "@shopify/react-native-skia";
// 👇 import a font file you'd like to use for tick labels
import inter from "../assets/inter-medium.ttf";

function MyChart() {
  const font = useFont(inter, 12);

  return (
    <View style={{ height: 300 }}>
      <CartesianChart
        data={DATA} // 👈 specify your data
        xKey="day" // 👈 specify data key for x-axis
        yKeys={["lowTmp", "highTmp"]} // 👈 specify data keys used for y-axis
        axisOptions={{ font }} // 👈 we'll generate axis labels using given font.
      >
        {/* 👇 render function exposes various data, such as points. */}
        {({ points }) => (
          // 👇 and we'll use the Line component to render a line path.
          <Line points={points.highTmp} color="red" strokeWidth={3} />
        )}
      </CartesianChart>
    </View>
  );
}

const DATA = Array.from({ length: 31 }, (_, i) => ({
  day: i,
  lowTmp: 20 + 10 * Math.random(),
  highTmp: 40 + 30 * Math.random(),
}));
```

--------------------------------

### Customize Bars with Children Elements

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/guides/custom-bars.md

This example demonstrates how to customize bars by adding child elements, such as gradients, to them. It allows for more complex visual styling based on interactivity or data.

```tsx
import * as React from "react";
import { View } from "react-native";
import { CartesianChart, Line, useChartPressState } from "victory-native";
import { Circle, useFont } from "@shopify/react-native-skia";
import type { SharedValue } from "react-native-reanimated";
import inter from "../../assets/inter-medium.ttf"; // Wherever your font actually lives

function MyChart() {
  const font = useFont(inter, 12);
  const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });

  // find the selected active x value
  let activeXItem = useDerivedValue(() => {
    return data.findIndex((value) => value.day === state.x.value.value);
  }).value;
  // or set a default if desired
  if (activeXItem < 0) {
    activeXItem = 2;
  }

  return (
    <View style={{ height: 300 }}>
      <CartesianChart
        data={DATA}
        xKey="day"
        yKeys={["highTmp"]}
        axisOptions={{ font }}
        chartPressState={state}
      >
        {({ points, chartBounds }) => {
          { /* 👇 map through the yKeys of your data structure */ }
          return points.highTmp.map((point, index) => {
            return (
              <Bar
                key={index}
                barCount={points.highTmp.length}
                points={[point]} // 👈 Pass in the individual point as a single element array
                chartBounds={chartBounds}
                animate={{ type: "spring" }}
              >

                <LinearGradient
                  start={vec(0, 0)}
                  end={vec(0, 400)}
                  // 👇 using the selected bar, customize children as desired
                  colors={
                    index == activeXItem
                      ? ["green", "blue"]
                      : ["#a78bfa", "#a78bfa50"]
                  }
                />
              </Bar>
            );
          });
        }}
      </CartesianChart>
    </View>
  );
}

const DATA = Array.from({ length: 31 }, (_, i) => ({
  day: i,
  highTmp: 40 + 30 * Math.random(),
}));
```

--------------------------------

### Multi-Press Gesture Configuration

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/chart-gestures.mdx

This example shows how to configure the `CartesianChart` to support multiple simultaneous press gestures by passing an array of `ChartPressState` values to the `chartPressState` prop.

```tsx
import { useChartPressState, CartesianChart } from "victory-native";

const INIT_STATE = { x: 0, y: { highTmp: 0 } } as const;

function MyChart() {
  // 👇 create multiple press states
  const { state: firstPress, isActive: isFirstPressActive } = 
    useChartPressState(INIT_STATE);
  const { state: secondPress, isActive: isSecondPressActive } = 
    useChartPressState(INIT_STATE);


  return (
    <CartesianChart
      // ...
      yKeys={["highTmp"]}
      // 👇 pass them both into chartPressState to be tracked
      chartPressState={[firstPress, secondPress]}
    >
      {() => (
        // ...
      )}
    </CartesianChart>
  )
}

```

--------------------------------

### Basic Stacked Area Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/area/stacked-area.md

Demonstrates how to use the StackedArea component within a CartesianChart to render a stacked area chart with monthly data. It includes data generation, chart configuration, and per-layer gradient customization using LinearGradient.

```tsx
import { CartesianChart, StackedArea } from "victory-native";
import { DashPathEffect, LinearGradient } from "@shopify/react-native-skia";

const generateData = () =>
  Array.from({ length: 12 }, (_, index) => {
    const low = Math.round(20 + 20 * Math.random());
    const med = Math.round(low - 5 * Math.random());
    const high = Math.round(low + 3 + 20 * Math.random());

    return {
      month: new Date(2020, index).toLocaleString("default", {
        month: "short",
      }),
      low,
      med,
      high,
    };
  });

export function MyChart() {
  const [data] = useState(DATA(4));
  return (
    <CartesianChart
      data={data}
      xKey="month"
      yKeys={["low", "med", "high"]}
      padding={8}
      domain={{ y: [0, 150] }}
      domainPadding={{ top: 0 }}
      xAxis={{
        font,
        labelOffset: 4,
        lineWidth: 0,
      }}
      yAxis={[ 
        {
          labelOffset: 8,
          font,
          linePathEffect: <DashPathEffect intervals={[4, 4]} />,
        },
      ]}
      onChartBoundsChange={({ left, right, top, bottom }) => {
        setW(right - left);
        setH(bottom - top);
      }}
    >
      {({ points, chartBounds }) => (
        <>
          <StackedArea
            points={[points.low, points.med, points.high]}
            y0={chartBounds.bottom}
            curveType="natural"
            animate={{ type: "spring" }}
            areaOptions={({ rowIndex, lowestY, highestY }) => {
              switch (rowIndex) {
                case 0:
                  return {
                    children: (
                      <LinearGradient
                        start={vec(0, highestY - 25)}
                        end={vec(0, lowestY)}
                        colors={["#f7ce64", "#f7ce6420"]}
                      />
                    ),
                  };
                case 1:
                  return {
                    children: (
                      <LinearGradient
                        start={vec(0, highestY - 100)}
                        end={vec(0, lowestY)}
                        colors={["#22dacd", "#22dacd20"]}
                      />
                    ),
                  };
                case 2:
                  return {
                    children: (
                      <LinearGradient
                        start={vec(0, highestY - 100)}
                        end={vec(0, lowestY)}
                        colors={["#56aefb", "#56aefb20"]}
                      />
                    ),
                  };
                default:
                  return {};
              }
            }}
          />
        </>
      )}
    </CartesianChart>
  );
}
```

--------------------------------

### Customizing Pie Chart Slices with Children Render Function

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/polar/pie/pie-charts.md

This example demonstrates how to customize individual pie slices using the `children` render function of `Pie.Chart`. It shows how to apply a `LinearGradient` to each slice based on its color and geometry, and includes helper functions for gradient point calculation and data generation.

```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>
                {/* 👇 configure slice label within Pie.Slice
                  <Pie.Label font={font} color={"white"} />
                */}
                <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}`,
  }));

```

--------------------------------

### Configure Pan and Pinch Gestures

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/cartesian-chart.md

Customize pan and pinch gesture behavior using the `transformConfig` prop. This allows enabling/disabling gestures, controlling zoom/pan dimensions, and setting activation thresholds. For example, restrict panning to the x-axis and disable pinch gestures.

```typescript
<CartesianChart
  transformState={transformState}
  transformConfig={{
    pan: {
      dimensions: "x",
      activeOffsetX: [-20, 20],
      failOffsetY: [-12, 12],
    },
    pinch: { enabled: false },
  }}
  // ... other props
/>
```

--------------------------------

### Stacked Bar Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/bar/stacked-bar.md

Demonstrates how to use the StackedBar component within a CartesianChart to render a stacked bar chart. It shows data definition, key mappings for x and y axes, domain padding, and custom axis formatting. The order of yKeys and points must match.

```tsx
import { CartesianChart, Bar } from "victory-native";

const DATA = (length: number = 10) =>
  Array.from({ length }, (_, index) => ({
    month: index + 1,
    listenCount: Math.floor(Math.random() * (100 - 50 + 1)) + 50,
    favouriteCount: Math.floor(Math.random() * (100 - 50 + 1)) + 20,
    sales: Math.floor(Math.random() * (100 - 50 + 1)) + 25,
  }));

export function MyChart() {
  const [data] = useState(DATA(4));
  return (
    <CartesianChart
      data={data} // 👈 specify your data
      xKey="month" // 👈 specify your x key
      yKeys={["listenCount", "favouriteCount", "sales"]} // 👈 specify *each* of your *yKeys* you wish to stack, the order matters here
      domainPadding={{ left: 50, right: 50, top: 30 }}
      domain={{ y: [0, 250] }} // 👈 you'll need to hardcode your y-domain (for now)
      axisOptions={{
        font,
        formatXLabel: (value) => {
          const date = new Date(2023, value - 1);
          return date.toLocaleString("default", { month: "short" });
        },
        lineColor: isDark ? "#71717a" : "#d4d4d8",
        labelColor: isDark ? appColors.text.dark : appColors.text.light,
      }}
      padding={5}
    >
      {({ points, chartBounds }) => {
        return (
          <StackedBar
            animate={{ type: "spring" }}
            innerPadding={innerPadding}
            chartBounds={chartBounds}
            points={[points.listenCount, points.favouriteCount, points.sales]} // 👈 the order here must match the order above
            colors={["orange", "gold", "sienna"]} // 👈 specify your colors
            barOptions={({ isBottom, isTop }) => {
              // 👇 customize each individual bar as desired
              return {
                roundedCorners: isTop
                  ? {
                      topLeft: roundedCorner,
                      topRight: roundedCorner,
                    }
                  : isBottom
                    ? {
                        bottomRight: roundedCorner,
                        bottomLeft: roundedCorner,
                      }
                    : undefined,
              };
            }}
          />
        );
      }}
    </CartesianChart>
  );
}
```

--------------------------------

### Basic Bar Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/bar/bar.md

This snippet demonstrates how to use the Bar component within a CartesianChart to render a simple bar chart. It requires importing CartesianChart and Bar, defining data, and passing points and chartBounds to the Bar component.

```tsx
import { CartesianChart, Bar } from "victory-native";
import DATA from "./my-data";

export function MyChart() {
  return (
    <CartesianChart data={DATA} xKey="x" yKeys={["y"]}>
      {({ points, chartBounds }) => (
        //👇 pass a PointsArray to the Bar component, as well as options.
        <Bar
          points={points.y}
          chartBounds={chartBounds}
          color="red"
          roundedCorners={{ topLeft: 10, topRight: 10 }}
        />
      )}
    </CartesianChart>
  );
}
```

--------------------------------

### useBarPath Hook Signature and Usage

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/bar/use-bar-path.md

This snippet details the useBarPath hook's signature, its arguments, and return values, along with a practical example of how to integrate it into a custom bar component within a CartesianChart.

```APIDOC
## `useBarPath` Hook

### Description
The `useBarPath` hook generates a Skia `SkPath` object for a bar chart based on input points, chart bounds, and optional sizing and rounding parameters.

### Signature
```ts
useBarPath(
  points: PointsArray,
  chartBounds: ChartBounds,
  innerPadding?: number,
  roundedCorners?: RoundedCorners,
  barWidth?: number,
  barCount?: number,
): { path: SkPath; barWidth: number; }
```

### Arguments
#### `points`
- **Type**: `PointsArray`
- **Description**: An array of points used to generate the bars' path. Typically derived from the `points` object provided by the `CartesianChart`'s children render function.

#### `chartBounds`
- **Type**: `ChartBounds`
- **Description**: An object representing the boundaries of the chart, essential for correctly drawing the bars. Usually obtained from the `chartBounds` render argument of `CartesianChart`.

#### `innerPadding`
- **Type**: `number` (optional)
- **Description**: A number between 0 and 1 representing the fraction of horizontal space between bars to be used as whitespace. Defaults to `0.2`. A value of `0` means no gap, while values closer to `1` result in narrower bars.

#### `roundedCorners`
- **Type**: `RoundedCorners` (optional)
- **Description**: An object for specifying rounded corners on the bars. Corner radii are limited to half the bar's width.

#### `barWidth`
- **Type**: `number` (optional)
- **Description**: An explicit width for the bars. This parameter takes precedence over `barCount` and computed widths. A value of `0` is also respected.

#### `barCount`
- **Type**: `number` (optional)
- **Description**: A count used to calculate the bar width as if there were `barCount` data points. Useful for maintaining stable bar widths when displaying subsets of data.

### Returns
- **Type**: `{ path: SkPath; barWidth: number; }`
- **Description**: An object containing the generated Skia `SkPath` for the bars and the calculated `barWidth`.
  - **`path`**: The `SkPath` object to be used with Skia's `<Path />` element.
  - **`barWidth`**: A number representing the width of each bar.

### Example Usage
```tsx
import {
  CartesianChart,
  useBarPath,
  type PointsArray,
  type ChartBounds,
} from "victory-native";
import { Path } from "@shopify/react-native-skia";
import DATA from "./my-data";

function MyCustomBars({
  points,
  chartBounds,
  innerPadding,
}: {
  points: PointsArray;
  chartBounds: ChartBounds;
  innerPadding?: number;
}) {
  const { path } = useBarPath(points, chartBounds, innerPadding);
  return <Path path={path} style="fill" color="red" />;
}

export function MyChart() {
  return (
    <CartesianChart data={DATA} xKey="x" yKeys={["y"]}>
      {({ points, chartBounds }) => <MyCustomBars points={points.y} chartBounds={chartBounds} />}
    </CartesianChart>
  );
}
```
```

--------------------------------

### Rendering Pie Slices with Linear Gradients

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/polar/pie/pie-slice.md

This example demonstrates how to use Pie.Slice within a PolarChart to render individual slices with custom LinearGradient fills. It utilizes the slice data provided by the render function to calculate gradient points and apply dynamic colors.

```tsx
import { View } from "react-native";
import { Pie, PolarChart } 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>
          {({ slice }) => {
            // ☝️ render function of each slice object for each pie slice with props described below
            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>
      </PolarChart>
    </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")}`;
}

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 DATA = (numberPoints = 5) =>
  Array.from({ length: numberPoints }, (_, index) => ({
    value: randomNumber(),
    color: generateRandomColor(),
    label: `Label ${index + 1}`,
  }));

```

--------------------------------

### Enable Pan and Zoom with useChartTransformState

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/cartesian-chart.md

Use the `useChartTransformState` hook to get a transform state object and pass it to the `transformState` prop to enable pinch-to-zoom and panning interactions on the chart. Users can then pinch to zoom, pan the zoomed view, and double-tap to reset.

```tsx
import { CartesianChart, useChartTransformState } from "victory-native";

function MyChart() {
  const { state: transformState } = useChartTransformState();

  return (
    <CartesianChart
      data={data}
      xKey="date"
      yKeys={["value"]}
      transformState={transformState} // 👈 enable pan/zoom
    >
      {/* ... */}
    </CartesianChart>
  );
}
```

--------------------------------

### Basic AreaRange Chart Example

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/area/area-range.md

Demonstrates how to use the AreaRange component to draw shaded areas for error bounds around a central line. It shows two ways to provide points: directly calculating y and y0, and using separate upperPoints and lowerPoints.

```tsx
import { CartesianChart, AreaRange, Line } from "victory-native";
import DATA from "./my-data";

export function MyChart() {
  return (
    <CartesianChart data={DATA} xKey="day" yKeys={["middle", "lower", "upper"]}>
      {({ points }) => (
        <>
          {/* Draw shaded area for error bounds */}
          <AreaRange
            points={points.middle.map((p) => ({
              ...p,
              y: p.middle + errorMargin, // Upper bound
              y0: p.middle - errorMargin, // Lower bound
            }))}
            color="rgba(100, 100, 255, 0.2)"
            animate={{ type: "timing" }}
          />
          <AreaRange
            upperPoints={points.upper}
            lowerPoints={points.lower}
            color="rgba(100, 100, 255, 0.2)"
            animate={{ type: "timing" }}
          />
          {/* Draw the main line */}
          <Line
            points={points.middle}
            color="blue"
            strokeWidth={2}
            animate={{ type: "timing" }}
          />
        </>
      )}
    </CartesianChart>
  );
}
```

--------------------------------

### Run Tests

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/CONTRIBUTING.md

Execute the test suite for the project.

```sh
# Run tests
$ yarn test
```

--------------------------------

### Manual Release: Build Packages

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/CONTRIBUTING.md

Build necessary files before publishing packages manually.

```sh
$ yarn run build
```

--------------------------------

### BarGroup Component Usage

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/bar/bar-group.md

This example demonstrates how to use the BarGroup component within a CartesianChart to render grouped bars with custom colors.

```APIDOC
## BarGroup Component

### Description
The `BarGroup` component takes a `ChartBounds` object, options for spacing, and `BarGroup.Bar` children to return an array of Skia `Path` elements for drawing a grouped bar chart.

### Props

- **`chartBounds`** (`ChartBounds` object) - Required. The bounds of the chart, typically obtained from the `CartesianChart` render argument.
- **`betweenGroupPadding`** (`number`, optional) - A number between 0 and 1 representing the fraction of horizontal space between bar groups. Defaults to `0.2`.
- **`withinGroupPadding`** (`number`, optional) - A number between 0 and 1 representing the fraction of horizontal space between bars within a group. Defaults to `0.2`.
- **`barWidth`** (`number`, optional) - Sets the explicit width of each bar. Overrides `barCount` if provided.
- **`barCount`** (`number`, optional) - Sets the group width based on a number of data points. Useful for stable grouped bar widths.
- **`onBarSizeChange`** (`(values: { barWidth: number; groupWidth: number; gapWidth: number; }) => void`, optional) - Callback function that is invoked when bar and group sizes change.
- **`roundedCorners`** (`{ topLeft?: number; topRight?: number; bottomRight?: number; bottomLeft?: number; }`, optional) - An object to define the roundedness of each corner of a `BarGroup.Bar` component.
- **`children`** (`Array<BarGroup.Bar>`, required) - An array of `BarGroup.Bar` elements to be rendered as bars within the group.

### `BarGroup.Bar` Props

- **`points`** (`PointsArray`, required) - An array indicating the dataset for this bar, typically from the `CartesianChart` render argument.
- **`animate`** (`PathAnimationConfig`, optional) - An object to animate the path when the points change.
- **`children`** (ReactNode, optional) - Pass-through children to be rendered inside the Skia `Path` element.

### Paint Properties

The `BarGroup.Bar` component also accepts the following paint properties:

- **`color`**
- **`blendMode`**
- **`opacity`**
- **`antiAlias`**

### Example Usage

```tsx
import { CartesianChart, BarGroup } from "victory-native";
import DATA from "./my-data";

export function MyChart() {
  return (
    <CartesianChart data={DATA} xKey="x" yKeys={["y", "z"]}>
      {({ points, chartBounds }) => (
        <BarGroup
          chartBounds={chartBounds}
          betweenGroupPadding={0.3}
          withinGroupPadding={0.1}
        >
          <BarGroup.Bar points={points.y} color="red" />
          <BarGroup.Bar points={points.z} color="blue" />
        </BarGroup>
      )}
    </CartesianChart>
  );
}
```
```

--------------------------------

### Manual Release: Publish Packages

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/CONTRIBUTING.md

Publish packages to npm using changesets. Requires an OTP code for multi-package publishing.

```sh
# The real publish
$ yarn changeset publish --otp=<insert otp code>
```

--------------------------------

### Applying Linear Gradient to Bars

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/cartesian/guides/basic-bar-chart.md

This snippet shows how to add a `LinearGradient` as a child to a `Bar` component to color the bars with a gradient. The `start`, `end`, and `colors` props of `LinearGradient` control the gradient's appearance.

```tsx
<Bar
 // same props as above
>
  {/* 👇 We add a gradient to the bars by passing a LinearGradient as a child. */}
  <LinearGradient
    start={vec(0, 0)} // 👈 The start and end are vectors that represent the direction of the gradient.
    end={vec(0, 400)}
    colors={[ // 👈 The colors are an array of strings that represent the colors of the gradient.
      "#a78bfa",
      "#a78bfa50" // 👈 The second color is the same as the first but with an alpha value of 50%.
    ]}
  />
</Bar>
```

--------------------------------

### Manual Release: Push Git Tags

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/CONTRIBUTING.md

Push git tags to the repository after a successful manual release.

```sh
$ git push && git push --tags
```

--------------------------------

### Pie Chart with Linear Gradient Slices

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/website/docs/polar/pie/pie-slice-angular-inset.md

Demonstrates how to use Pie.SliceAngularInset to render slices with custom angular stroke width and color within a PolarChart. This setup is useful for creating visually distinct pie or donut chart segments.

```tsx
import { View } from "react-native";
import { Pie, PolarChart } 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>
          {({ slice }) => {
            // ☝️ render function of each slice object for each pie slice
            return (
              <>
                <Pie.Slice />
                <Pie.SliceAngularInset
                  angularInset={{ 
                    angularStrokeWidth: insetWidth,
                    angularStrokeColor: insetColor,
                  }}
                />
              </>
            );
          }}
        </Pie.Chart>
      </PolarChart>
    </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}`,
  }));
```

--------------------------------

### Manual Release: Version Packages

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/CONTRIBUTING.md

Manually version packages using changesets. Requires a GitHub token for changelog formatting.

```sh
$ GITHUB_TOKEN=<INSERT TOKEN> yarn run version
```

--------------------------------

### Add a Changeset

Source: https://github.com/formidablelabs/victory-native-xl/blob/main/CONTRIBUTING.md

Create a changeset file to record changes that require a version update for packages. This is part of the PR submission process.

```sh
$ yarn changeset
```