### Start Example App Packager

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application. Changes to JavaScript code in the library will be reflected without a rebuild.

```sh
yarn example start
```

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

### Run Example App on Web

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Builds and runs the example application in a web browser.

```sh
yarn example web
```

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

### Run Example App on iOS

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device.

```sh
yarn example ios
```

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

### Run Example App on Android

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator.

```sh
yarn example android
```

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

### Install Project Dependencies

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Run this command in the root directory to install all project dependencies using Yarn workspaces.

```sh
yarn
```

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

### Install React Native Graph Dependencies

Source: https://context7.com/margelo/react-native-graph/llms.txt

Install the necessary peer dependencies and the react-native-graph library using yarn.

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

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

### Basic Line Graph Usage

Source: https://github.com/margelo/react-native-graph/blob/main/README.md

Demonstrates the basic usage of the LineGraph component with price history data. Ensure you have installed the necessary dependencies: react-native-reanimated, react-native-gesture-handler, @shopify/react-native-skia, and react-native-graph.

```jsx
function App() {
  const priceHistory = usePriceHistory('ethereum')

  return <LineGraph points={priceHistory} color="#4484B2" />
}
```

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

### Line Graph with Pan Gesture

Source: https://github.com/margelo/react-native-graph/blob/main/README.md

Enables pan gesture for user interaction, requiring `animated` to be true. Provides callbacks for gesture start, point selection, and gesture end. `panGestureDelay` can be set to start the gesture immediately.

```jsx
<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  enablePanGesture={true}
  onGestureStart={() => hapticFeedback('impactLight')}
  onPointSelected={(p) => updatePriceTitle(p)}
  onGestureEnd={() => resetPriceTitle()}
/>
```

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

### Verify New Architecture

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Check Metro logs for confirmation that the app is running with the new architecture, indicated by 'fabric':true and 'concurrentRoot':true.

```sh
Running "GraphExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```

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

### Basic LineGraph Component Usage

Source: https://context7.com/margelo/react-native-graph/llms.txt

Demonstrates how to use the main LineGraph component with sample data. Pass `animated={true}` for the full-featured animated variant or `animated={false}` for the static variant.

```tsx
import { LineGraph } from 'react-native-graph';
import type { GraphPoint } from 'react-native-graph';

const priceHistory: GraphPoint[] = [
  { date: new Date('2024-01-01'), value: 100 },
  { date: new Date('2024-01-02'), value: 120 },
  { date: new Date('2024-01-03'), value: 95 },
  { date: new Date('2024-01-04'), value: 140 },
  { date: new Date('2024-01-05'), value: 130 },
];

// Animated graph (full-featured)
<LineGraph
  style={{ width: '100%', aspectRatio: 1.4 }}
  animated={true}
  points={priceHistory}
  color="#4484B2"
/>

// Static graph (lightweight, ideal for lists/cells)
<LineGraph
  style={{ width: 80, height: 40 }}
  animated={false}
  points={priceHistory}
  color="#4484B2"
/>
```

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

### Run Unit Tests

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Executes the unit test suite using Jest. It is recommended to add tests for any new changes.

```sh
yarn test
```

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

### Publish New Versions

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Uses release-it to automate the process of publishing new versions to npm, including version bumping and tag creation.

```sh
yarn release
```

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

### `gradientFillColors` Prop

Source: https://context7.com/margelo/react-native-graph/llms.txt

Renders a gradient fill below the line. Accepts an array of Skia `Color` values. Only available when `animated` is true.

```APIDOC
### `gradientFillColors` prop — Area Gradient Fill

### Description
Renders a vertical linear gradient fill below the line. Accepts an array of Skia `Color` values applied from top to bottom. Only available on `animated={true}`.

### Usage
```tsx
<LineGraph
  style={{ width: '100%', height: 200 }}
  animated={true}
  points={points}
  color="#7476df"
  gradientFillColors={[
    '#7476df5D', // 36% opacity at top
    '#7476df4D', // 30% opacity in middle
    '#7476df00', // transparent at bottom
  ]}
/>
```
```

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

### Update UI in Real-Time with `onPointSelected`

Source: https://context7.com/margelo/react-native-graph/llms.txt

Fired for every `GraphPoint` the user's finger passes over while panning. Use this to drive price/value labels, tooltips, or other UI that should update as the user scrubs.

```tsx
const [selectedValue, setSelectedValue] = useState<number | null>(null);

<>
  {selectedValue != null && (
    <Text>${selectedValue.toFixed(2)}</Text>
  )}
  <LineGraph
    animated={true}
    points={points}
    color="#4484B2"
    enablePanGesture={true}
    onPointSelected={(p) => setSelectedValue(p.value)}
    onGestureEnd={() => setSelectedValue(null)}
  />
</>
```

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

### Enable Scrubbing Gesture with `enablePanGesture`

Source: https://context7.com/margelo/react-native-graph/llms.txt

Enables a pan gesture that lets the user press and hold on the graph to scrub through data points. Requires `animated={true}` and activates after a configurable hold delay.

```tsx
<LineGraph
  style={{ width: '100%', height: 250 }}
  animated={true}
  points={points}
  color="#4484B2"
  enablePanGesture={true}
  panGestureDelay={200}
  onGestureStart={() => {
    // e.g., trigger haptic feedback
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  }}
  onPointSelected={(point: GraphPoint) => {
    // Update a price label in real-time as user scrubs
    setPriceLabel(`$${point.value.toFixed(2)}`);
    setDateLabel(point.date.toLocaleDateString());
  }}
  onGestureEnd={() => {
    // Restore default label
    setPriceLabel(currentPrice);
  }}
/>
```

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

### Updating Points with Animation

Source: https://context7.com/margelo/react-native-graph/llms.txt

Demonstrates how updating the `points` prop triggers a smooth spring-interpolated path morph animation when `animated={true}`. Ensure `useState` and `fetchPriceHistory` are defined elsewhere.

```tsx
function PriceChart() {
  const [points, setPoints] = useState<GraphPoint>(initialPoints);

  const refresh = async () => {
    const newData = await fetchPriceHistory('bitcoin');
    // Updating points triggers an automatic animated path morph
    setPoints(newData);
  };

  return (
    <LineGraph
      style={{ width: '100%', height: 200 }}
      animated={true}
      points={points}
      color="#F7931A"
    />
  );
}
```

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

### Configure LineGraph with Custom SelectionDot

Source: https://github.com/margelo/react-native-graph/blob/main/README.md

Use a custom component for the selection dot by passing it to the SelectionDot prop. Requires animated and enablePanGesture to be true.

```jsx
<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  enablePanGesture={true}
  SelectionDot={CustomSelectionDot}
/>
```

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

### Line Graph with Animations

Source: https://github.com/margelo/react-native-graph/blob/main/README.md

Enables animations for data changes using the Skia animation system. When `animated` is false, a lighter renderer is used, optimal for lists with many graphs.

```jsx
<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
/>
```

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

### Lint Project Files

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Checks for code style and potential errors using ESLint. Use the --fix flag to automatically correct formatting issues.

```sh
yarn lint
```

```sh
yarn lint --fix
```

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

### `onPointSelected` callback

Source: https://context7.com/margelo/react-native-graph/llms.txt

Fired for every `GraphPoint` the user's finger passes over while panning. Use this to drive price/value labels, tooltips, or other UI that should update as the user scrubs.

```APIDOC
## `onPointSelected` callback — Real-Time Scrub Updates

### Description
Fired for every `GraphPoint` the user's finger passes over while panning. Use this to drive price/value labels, tooltips, or other UI that should update as the user scrubs.

### Parameters
#### Callback Function
- **point** (GraphPoint) - The data point the user's finger is currently over.

### Request Example
```tsx
const [selectedValue, setSelectedValue] = useState<number | null>(null);

<>
  {selectedValue != null && (
    <Text>${selectedValue.toFixed(2)}</Text>
  )}
  <LineGraph
    animated={true}
    points={points}
    color="#4484B2"
    enablePanGesture={true}
    onPointSelected={(p) => setSelectedValue(p.value)}
    onGestureEnd={() => setSelectedValue(null)}
  />
</>
```
```

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

### <LineGraph> Component

Source: https://context7.com/margelo/react-native-graph/llms.txt

The main entry-point component for rendering line graphs. It accepts standard ViewProps and graph-specific props. Set `animated={true}` for the animated version or `animated={false}` for the static version.

```APIDOC
## <LineGraph> Component

### Description
The single entry-point component. Accepts all `ViewProps` plus graph-specific props. Pass `animated={true}` for the full-featured animated variant or `animated={false}` for the static variant.

### Usage
```tsx
import { LineGraph } from 'react-native-graph';
import type { GraphPoint } from 'react-native-graph';

const priceHistory: GraphPoint[] = [
  { date: new Date('2024-01-01'), value: 100 },
  { date: new Date('2024-01-02'), value: 120 },
  { date: new Date('2024-01-03'), value: 95 },
  { date: new Date('2024-01-04'), value: 140 },
  { date: new Date('2024-01-05'), value: 130 },
];

// Animated graph (full-featured)
<LineGraph
  style={{ width: '100%', aspectRatio: 1.4 }}
  animated={true}
  points={priceHistory}
  color="#4484B2"
/>

// Static graph (lightweight, ideal for lists/cells)
<LineGraph
  style={{ width: 80, height: 40 }}
  animated={false}
  points={priceHistory}
  color="#4484B2"
/>
```
```

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

### `enableFadeInMask` Prop

Source: https://context7.com/margelo/react-native-graph/llms.txt

Applies a fade-in effect to the beginning of the line, making it appear gradually.

```APIDOC
### `enableFadeInMask` prop — Leading Fade-In Effect

### Description
Applies a horizontal linear gradient mask at the beginning of the line, fading it in from transparent to fully opaque. Useful for polished entry animations.

### Usage
```tsx
<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  enableFadeInMask={true}
/>
```
```

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

### Typecheck Project Files

Source: https://github.com/margelo/react-native-graph/blob/main/CONTRIBUTING.md

Ensures that all TypeScript files in the project adhere to type definitions.

```sh
yarn typecheck
```

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

### Add Live End Indicator with `enableIndicator`

Source: https://context7.com/margelo/react-native-graph/llms.txt

Renders an animated dot at the rightmost (latest) point of the graph to indicate a live/streaming value. Setting `indicatorPulsating={true}` adds a repeating pulse animation. `horizontalPadding` should be set to avoid clipping.

```tsx
<LineGraph
  animated={true}
  points={livePoints}
  color="#00C805"
  enableIndicator={true}
  indicatorPulsating={true}
  horizontalPadding={15}
/>
```

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

### `enablePanGesture` and `panGestureDelay` props

Source: https://context7.com/margelo/react-native-graph/llms.txt

Enables a pan gesture that lets the user press and hold on the graph to scrub through data points. Requires `animated={true}`. Activates after a configurable hold delay (`panGestureDelay`, default `300ms`).

```APIDOC
## `enablePanGesture` / `panGestureDelay` props — Scrubbing Gesture

### Description
Enables a pan gesture that lets the user press and hold on the graph to scrub through data points. Requires `animated={true}`. Activates after a configurable hold delay (`panGestureDelay`, default `300ms`).

### Parameters
#### Request Body
- **enablePanGesture** (boolean) - Optional - Enables the pan gesture for scrubbing.
- **panGestureDelay** (number) - Optional - The delay in milliseconds before the pan gesture activates. Defaults to 300ms.

### Request Example
```tsx
<LineGraph
  style={{ width: '100%', height: 250 }}
  animated={true}
  points={points}
  color="#4484B2"
  enablePanGesture={true}
  panGestureDelay={200}
  onGestureStart={() => {
    // e.g., trigger haptic feedback
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  }}
  onPointSelected={(point: GraphPoint) => {
    // Update a price label in real-time as user scrubs
    setPriceLabel(`$${point.value.toFixed(2)}`);
    setDateLabel(point.date.toLocaleDateString());
  }}
  onGestureEnd={() => {
    // Restore default label
    setPriceLabel(currentPrice);
  }}
/>
```
```

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

### `points` Prop

Source: https://context7.com/margelo/react-native-graph/llms.txt

Supplies the data for the graph. Accepts an array of `GraphPoint` objects. Updates to this prop trigger a smooth animation if `animated` is true.

```APIDOC
### `points` prop — Supplying Data

### Description
Accepts an array of `GraphPoint[]`. The graph auto-calculates min/max for both axes. Changing `points` triggers a smooth spring-interpolated path morph animation when `animated={true}`.

### Usage
```tsx
import { LineGraph } from 'react-native-graph';
import type { GraphPoint } from 'react-native-graph';
import { useState } from 'react';

function PriceChart() {
  const [points, setPoints] = useState<GraphPoint[]>(initialPoints);

  const refresh = async () => {
    const newData = await fetchPriceHistory('bitcoin');
    // Updating points triggers an automatic animated path morph
    setPoints(newData);
  };

  return (
    <LineGraph
      style={{ width: '100%', height: 200 }}
      animated={true}
      points={points}
      color="#F7931A"
    />
  );
}
```
```

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

### `enableIndicator` / `indicatorPulsating` props

Source: https://context7.com/margelo/react-native-graph/llms.txt

Renders an animated dot at the rightmost (latest) point of the graph to indicate a live/streaming value. Setting `indicatorPulsating={true}` adds a repeating pulse animation. When enabled, `horizontalPadding` should be set to avoid clipping the indicator dot.

```APIDOC
## `enableIndicator` / `indicatorPulsating` props — Live End Indicator

### Description
Renders an animated dot at the rightmost (latest) point of the graph to indicate a live/streaming value. Setting `indicatorPulsating={true}` adds a repeating pulse animation. When enabled, `horizontalPadding` should be set to avoid clipping the indicator dot.

### Parameters
#### Request Body
- **enableIndicator** (boolean) - Optional - Enables the live end indicator dot.
- **indicatorPulsating** (boolean) - Optional - Adds a pulsating animation to the indicator dot.

### Request Example
```tsx
<LineGraph
  animated={true}
  points={livePoints}
  color="#00C805"
  enableIndicator={true}
  indicatorPulsating={true}
  horizontalPadding={15}
/>
```
```

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

### Adjust Canvas Insets with `horizontalPadding` / `verticalPadding`

Source: https://context7.com/margelo/react-native-graph/llms.txt

Adds padding (in pixels) inside the Skia canvas so that stroke edges and the selection dot are not clipped. `verticalPadding` defaults to `lineThickness`; `horizontalPadding` defaults to `0` (or the indicator radius when `enableIndicator` is `true`).

```tsx
<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  enablePanGesture={true}
  horizontalPadding={8}
  verticalPadding={4}
/>
```

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

### Display Min/Max Labels with `TopAxisLabel` / `BottomAxisLabel`

Source: https://context7.com/margelo/react-native-graph/llms.txt

Renders arbitrary React elements above and below the graph canvas, typically used to display max (top) and min (bottom) values positioned along the X axis. Requires `animated={true}`.

```tsx
function AxisLabel({ value }: { value: number }) {
  return (
    <Text style={{ color: '#888', fontSize: 11 }}>
      ${value.toFixed(2)}
    </Text>
  );
}

const maxPoint = points.reduce((a, b) => (a.value > b.value ? a : b));
const minPoint = points.reduce((a, b) => (a.value < b.value ? a : b));

<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  TopAxisLabel={() => <AxisLabel value={maxPoint.value} />}
  BottomAxisLabel={() => <AxisLabel value={minPoint.value} />}
/>
```

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

### `lineThickness` Prop

Source: https://context7.com/margelo/react-native-graph/llms.txt

Controls the width of the graph line in pixels. Defaults to 3.

```APIDOC
### `lineThickness` prop — Stroke Width

### Description
Controls the stroke width of the graph line in pixels. Defaults to `3`.

### Usage
```tsx
<LineGraph
  animated={false}
  points={points}
  color="#4484B2"
  lineThickness={2}   // thinner line for small/thumbnail graphs
/>
```
```

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

### `horizontalPadding` / `verticalPadding` props

Source: https://context7.com/margelo/react-native-graph/llms.txt

Adds padding (in pixels) inside the Skia canvas so that stroke edges and the selection dot are not clipped. `verticalPadding` defaults to `lineThickness`; `horizontalPadding` defaults to `0` (or the indicator radius when `enableIndicator` is `true`).

```APIDOC
## `horizontalPadding` / `verticalPadding` props — Canvas Insets

### Description
Adds padding (in pixels) inside the Skia canvas so that stroke edges and the selection dot are not clipped. `verticalPadding` defaults to `lineThickness`; `horizontalPadding` defaults to `0` (or the indicator radius when `enableIndicator` is `true`).

### Parameters
#### Request Body
- **horizontalPadding** (number) - Optional - Padding in pixels for the horizontal axis.
- **verticalPadding** (number) - Optional - Padding in pixels for the vertical axis.

### Request Example
```tsx
<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  enablePanGesture={true}
  horizontalPadding={8}
  verticalPadding={4}
/>
```
```

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

### Create Custom Selection Dot with `SelectionDot`

Source: https://context7.com/margelo/react-native-graph/llms.txt

Replaces the default selection dot rendered at the user's finger position during panning. Pass a custom React component conforming to `SelectionDotProps`. Set to `null` to disable the dot entirely. Requires `animated={true}` and `enablePanGesture={true}`.

```tsx
import type { SelectionDotProps } from 'react-native-graph';
import { Circle } from '@shopify/react-native-skia';
import {
  useSharedValue,
  useAnimatedReaction,
  withSpring,
  runOnJS,
} from 'react-native-reanimated';

function FlatSelectionDot({
  isActive,
  color,
  circleX,
  circleY,
}: SelectionDotProps) {
  const radius = useSharedValue(0);

  const setActive = (active: boolean) => {
    radius.value = withSpring(active ? 5 : 0, {
      mass: 1,
      stiffness: 1000,
      damping: 50,
    });
  };

  useAnimatedReaction(
    () => isActive.value,
    (active) => runOnJS(setActive)(active),
    [isActive]
  );

  return <Circle cx={circleX} cy={circleY} r={radius} color={color} />;
}

<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  enablePanGesture={true}
  SelectionDot={FlatSelectionDot}
/>
```

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

### `GraphPoint` Data Type

Source: https://context7.com/margelo/react-native-graph/llms.txt

Defines the structure for each data point used in the `points` prop. Each point requires a `date` and a `value`.

```APIDOC
## `GraphPoint` — Data Point Type

### Description
Each data point in the `points` array must conform to the `GraphPoint` interface. The coordinate system auto-scales to the data unless a custom `range` is provided.

### Interface
```tsx
interface GraphPoint {
  date: Date;
  value: number;
}
```

### Usage
```tsx
import type { GraphPoint } from 'react-native-graph';

const points: GraphPoint[] = Array.from({ length: 30 }, (_, i) => ({
  date: new Date(Date.now() - (29 - i) * 24 * 60 * 60 * 1000), // daily
  value: 1000 + Math.random() * 500,
}));
```
```

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

### `TopAxisLabel` / `BottomAxisLabel` props

Source: https://context7.com/margelo/react-native-graph/llms.txt

Renders arbitrary React elements above and below the graph canvas. Typically used to display max (top) and min (bottom) values positioned along the X axis. Requires `animated={true}`.

```APIDOC
## `TopAxisLabel` / `BottomAxisLabel` props — Min/Max Labels

### Description
Renders arbitrary React elements above and below the graph canvas. Typically used to display max (top) and min (bottom) values positioned along the X axis. Requires `animated={true}`.

### Parameters
#### Request Body
- **TopAxisLabel** (React.ComponentType) - Optional - A component to render above the graph canvas.
- **BottomAxisLabel** (React.ComponentType) - Optional - A component to render below the graph canvas.

### Request Example
```tsx
function AxisLabel({ value }: { value: number }) {
  return (
    <Text style={{ color: '#888', fontSize: 11 }}>
      ${value.toFixed(2)}
    </Text>
  );
}

const maxPoint = points.reduce((a, b) => (a.value > b.value ? a : b));
const minPoint = points.reduce((a, b) => (a.value < b.value ? a : b));

<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  TopAxisLabel={() => <AxisLabel value={maxPoint.value} />}
  BottomAxisLabel={() => <AxisLabel value={minPoint.value} />}
/>
```
```

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

### Custom Selection Dot Interface (`SelectionDotProps`)

Source: https://context7.com/margelo/react-native-graph/llms.txt

Use this TypeScript interface to implement a custom selection dot component. All values are Reanimated SharedValues for UI thread updates. Ensure your custom dot component accepts these props.

```tsx
import type { SelectionDotProps } from 'react-native-graph';
import type { SharedValue } from 'react-native-reanimated';

// Interface shape:
// interface SelectionDotProps {
//   isActive:      SharedValue<boolean>;  // true while user is panning
//   color:         string;                // graph line color
//   lineThickness: number | undefined;    // graph line thickness
//   circleX:       SharedValue<number>;   // current X position on canvas
//   circleY:       SharedValue<number>;   // current Y position on canvas
// }

function MyDot({ isActive, color, circleX, circleY }: SelectionDotProps) {
  // circleX / circleY are Skia-compatible SharedValues — use them directly
  // in Skia canvas children (Circle, Rect, etc.) for zero-JS-thread updates.
  return <Circle cx={circleX} cy={circleY} r={6} color={color} />;
}
```

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

### Line Graph with Custom Axis Labels

Source: https://github.com/margelo/react-native-graph/blob/main/README.md

Renders custom labels above or below the graph using `TopAxisLabel` and `BottomAxisLabel` components. This is typically used to display the maximum and minimum values of the graph, animating smoothly with the data.

```jsx
<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  TopAxisLabel={() => <AxisLabel x={max.x} value={max.value} />}
  BottomAxisLabel={() => <AxisLabel x={min.x} value={min.value} />}
/>
```

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

### Line Graph with Fixed Data Range

Source: https://github.com/margelo/react-native-graph/blob/main/README.md

Defines a fixed range for the graph canvas using the `range` prop. This range must be larger than the data span and is useful for displaying a consistent timeframe or value scale, even if data is missing.

```jsx
<LineGraph
  points={priceHistory}
  animated={true}
  color="#4484B2"
  enablePanGesture={true}
  range={{
    x: {
      min: new Date(new Date(2000, 1, 1).getTime()),
      max: new Date(
        new Date(2000, 1, 1).getTime() +
        31 * 1000 * 60 * 60 * 24
      )
    },
    y: {
      min: 0,
      max: 200
    }
  }}
/>
```

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

### `SelectionDot` prop

Source: https://context7.com/margelo/react-native-graph/llms.txt

Replaces the default selection dot rendered at the user's finger position during panning. Pass a custom React component conforming to `SelectionDotProps`. Set to `null` to disable the dot entirely. Requires `animated={true}` and `enablePanGesture={true}`.

```APIDOC
## `SelectionDot` prop — Custom Pan Indicator Dot

### Description
Replaces the default selection dot rendered at the user's finger position during panning. Pass a custom React component conforming to `SelectionDotProps`. Set to `null` to disable the dot entirely. Requires `animated={true}` and `enablePanGesture={true}`.

### Parameters
#### Request Body
- **SelectionDot** (React.ComponentType<SelectionDotProps>) - Optional - A custom React component to render as the selection dot. Must conform to `SelectionDotProps`.

### Request Example
```tsx
import type { SelectionDotProps } from 'react-native-graph';
import { Circle } from '@shopify/react-native-skia';
import {
  useSharedValue,
  useAnimatedReaction,
  withSpring,
  runOnJS,
} from 'react-native-reanimated';

function FlatSelectionDot({
  isActive,
  color,
  circleX,
  circleY,
}: SelectionDotProps) {
  const radius = useSharedValue(0);

  const setActive = (active: boolean) => {
    radius.value = withSpring(active ? 5 : 0, {
      mass: 1,
      stiffness: 1000,
      damping: 50,
    });
  };

  useAnimatedReaction(
    () => isActive.value,
    (active) => runOnJS(setActive)(active),
    [isActive]
  );

  return <Circle cx={circleX} cy={circleY} r={radius} color={color} />;
}

<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  enablePanGesture={true}
  SelectionDot={FlatSelectionDot}
/>
```
```

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

### Gradient Fill Area

Source: https://context7.com/margelo/react-native-graph/llms.txt

Renders a vertical linear gradient fill below the line using Skia `Color` values. This feature is only available when `animated={true}`.

```tsx
<LineGraph
  style={{ width: '100%', height: 200 }}
  animated={true}
  points={points}
  color="#7476df"
  gradientFillColors={[
    '#7476df5D', // 36% opacity at top
    '#7476df4D', // 30% opacity in middle
    '#7476df00', // transparent at bottom
  ]}
/>
```

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

### Axis Range Constraints (`GraphRange`)

Source: https://context7.com/margelo/react-native-graph/llms.txt

Define axis range constraints using the `GraphRange` type. Fields are optional; omitting an axis allows it to auto-fit to the data. This is useful for fixed time windows or specific value scales.

```tsx
import type { GraphRange } from 'react-native-graph';

// Only constrain Y axis
const yOnlyRange: GraphRange = {
  y: { min: 0, max: 100 },
};

// Only constrain X axis (fixed 30-day window)
const xOnlyRange: GraphRange = {
  x: {
    min: new Date('2024-06-01'),
    max: new Date('2024-06-30'),
  },
};

// Both axes
const fullRange: GraphRange = {
  x: { min: new Date('2024-01-01'), max: new Date('2024-12-31') },
  y: { min: 0, max: 1000 },
};
```

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

### `color` Prop

Source: https://context7.com/margelo/react-native-graph/llms.txt

Sets the stroke color for the graph line. Accepts any valid CSS/React Native color string.

```APIDOC
### `color` prop — Line Color

### Description
Sets the stroke color of the graph line. Accepts any CSS/React Native color string (hex, rgba, named). The line uses this color for its stroke and also derives the fade-out gradient and indicator colors from it.

### Usage
```tsx
// Hex color
<LineGraph animated={true} points={points} color="#6a7ee7" />

// RGB
<LineGraph animated={true} points={points} color="rgb(100, 126, 231)" />
```
```

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

### `range` prop

Source: https://context7.com/margelo/react-native-graph/llms.txt

Locks the visible x/y range of the graph canvas. Useful for displaying a fixed time window or clamping the value axis. Partial ranges are allowed — set only `x`, only `y`, or both.

```APIDOC
## `range` prop — Custom Axis Range

### Description
Locks the visible x/y range of the graph canvas. Useful for displaying a fixed time window or clamping the value axis. Partial ranges are allowed — set only `x`, only `y`, or both.

### Parameters
#### Request Body
- **x** (object) - Optional - Defines the range for the x-axis.
  - **min** (Date) - Required - The minimum value for the x-axis.
  - **max** (Date) - Required - The maximum value for the x-axis.
- **y** (object) - Optional - Defines the range for the y-axis.
  - **min** (number) - Required - The minimum value for the y-axis.
  - **max** (number) - Required - The maximum value for the y-axis.

### Request Example
```tsx
import type { GraphRange } from 'react-native-graph';

const range: GraphRange = {
  x: {
    min: new Date('2024-01-01'),
    max: new Date('2024-01-31'),
  },
  y: {
    min: 0,
    max: 200,
  },
};

<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  range={range}
/>
```
```

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

### Line Thickness Adjustment

Source: https://context7.com/margelo/react-native-graph/llms.txt

Controls the stroke width of the graph line in pixels. Defaults to `3`. Useful for adjusting line prominence on different graph sizes.

```tsx
<LineGraph
  animated={false}
  points={points}
  color="#4484B2"
  lineThickness={2}   // thinner line for small/thumbnail graphs
/>
```

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

### Leading Fade-In Mask Effect

Source: https://context7.com/margelo/react-native-graph/llms.txt

Applies a horizontal linear gradient mask at the beginning of the line, fading it in from transparent to opaque. This is useful for polished entry animations.

```tsx
<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  enableFadeInMask={true}
/>
```

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

### GraphPoint Data Type Definition

Source: https://context7.com/margelo/react-native-graph/llms.txt

Defines the structure for individual data points in the `points` array. The coordinate system auto-scales to the data unless a custom `range` is provided.

```tsx
import type { GraphPoint } from 'react-native-graph';

const points: GraphPoint[] = Array.from({ length: 30 }, (_, i) => ({
  date: new Date(Date.now() - (29 - i) * 24 * 60 * 60 * 1000), // daily
  value: 1000 + Math.random() * 500,
}));
```

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

### Set Custom Axis Range with `range` prop

Source: https://context7.com/margelo/react-native-graph/llms.txt

Locks the visible x/y range of the graph canvas. Useful for displaying a fixed time window or clamping the value axis. Partial ranges are allowed.

```tsx
import type { GraphRange } from 'react-native-graph';

const range: GraphRange = {
  x: {
    min: new Date('2024-01-01'),
    max: new Date('2024-01-31'),
  },
  y: {
    min: 0,
    max: 200,
  },
};

<LineGraph
  animated={true}
  points={points}
  color="#4484B2"
  range={range}
/>
```

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

### Line Color Customization

Source: https://context7.com/margelo/react-native-graph/llms.txt

Sets the stroke color of the graph line using CSS/React Native color strings. The line color also influences gradient and indicator colors.

```tsx
// Hex color
<LineGraph animated={true} points={points} color="#6a7ee7" />

// RGB
<LineGraph animated={true} points={points} color="rgb(100, 126, 231)" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.