### LineChart Navigation Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/00-START-HERE.md

Navigate to the LineChart API reference starting from the README.md file.

```text
START → README.md (see "LineChart API Reference" table)
    ↓
Choose your component (e.g., LineChart.Tooltip)
    ↓
Read api-reference/line-chart-tooltip.md
```

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

### Project Installation

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/README.md

Install the react-native-wagmi-charts library along with its peer dependencies using npm.

```bash
npm install react-native-wagmi-charts
npm install react-native-reanimated react-native-gesture-handler react-native-svg
```

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

### Basic LineChart Tooltip Usage

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-tooltip.md

This example demonstrates the basic setup for a LineChart with a tooltip displaying the price. Ensure the LineChart is wrapped in a LineChart.Provider with your data.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path color="blue" />
        <LineChart.CursorCrosshair>
          <LineChart.Tooltip>
            <LineChart.PriceText />
          </LineChart.Tooltip>
        </LineChart.CursorCrosshair>
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### Install react-native-wagmi-charts

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Install the react-native-wagmi-charts package using npm.

```bash
npm install react-native-wagmi-charts
```

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

### CandlestickChart Navigation Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/00-START-HERE.md

Navigate to the CandlestickChart API reference starting from the README.md file.

```text
START → README.md (see "CandlestickChart API Reference" table)
    ↓
Choose your component (e.g., CandlestickChart.Candles)
    ↓
Read api-reference/candlestick-chart-candles.md
```

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

### Hooks Navigation Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/00-START-HERE.md

Navigate to the custom hooks documentation.

```text
START → api-reference/hooks.md
```

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

### Install Project Dependencies

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/example/README.md

Installs project dependencies using pnpm. This is the recommended package manager for this project.

```bash
pnpm install
```

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

### Basic Usage Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-horizontal-line.md

A complete example demonstrating how to integrate LineChart.HorizontalLine within a LineChart. Requires LineChart.Provider and LineChart.Path.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
  { timestamp: 1625948100000, value: 33215.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path color="blue">
          <LineChart.HorizontalLine at={{index: 0}} color="lightgray" />
        </LineChart.Path>
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### Install Project Dependencies with npm

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/example/README.md

Installs project dependencies using npm as an alternative to pnpm.

```bash
npm install
```

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

### Type Definitions Navigation Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/00-START-HERE.md

Navigate to the type definitions documentation.

```text
START → types.md
```

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

### LineChart.Axis Usage Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-axis.md

Basic setup for LineChart.Axis within a LineChart.Provider and LineChart component. Includes a path and a left vertical axis.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
  { timestamp: 1625948100000, value: 33215.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path />
        <LineChart.Axis 
          position="left" 
          orientation="vertical"
          domain={[33000, 34000]}
        />
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### LineChart Highlight Usage Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-highlight.md

Basic example of how to use the LineChart.Highlight component within a LineChart.Provider and LineChart.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
  { timestamp: 1625948100000, value: 33215.25 },
  { timestamp: 1625949000000, value: 33415.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path color="blue">
          <LineChart.Highlight from={1} to={3} color="red" width={4} />
        </LineChart.Path>
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### Install Dependencies

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Install necessary peer dependencies for WAGMI charts, including react-native-reanimated, react-native-gesture-handler, and react-native-haptic-feedback.

```bash
npm install react-native-reanimated react-native-gesture-handler react-native-haptic-feedback
```

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

### Custom Formatter Function Examples

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/types.md

Demonstrates how to implement TFormatterFn for custom price and date formatting.

```typescript
// Price formatter
const priceFormatter: TFormatterFn<string> = ({ value, formatted }) => {
  return `$${formatted}`;
};

// Datetime formatter
const dateFormatter: TFormatterFn<number> = ({ value, formatted }) => {
  return `Date: ${formatted}`;
};
```

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

### Basic Usage Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-price-text.md

Demonstrates how to use LineChart.PriceText within a LineChart, including setting up the data provider and chart structure.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path />
        <LineChart.CursorCrosshair>
          <LineChart.Tooltip>
            <LineChart.PriceText />
          </LineChart.Tooltip>
        </LineChart.CursorCrosshair>
      </LineChart>
      <LineChart.PriceText 
        style={{
          position: 'absolute',
          top: 10,
          right: 10,
          fontSize: 18,
          fontWeight: 'bold',
        }}
      />
    </LineChart.Provider>
  );
}
```

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

### Complex Formatting Logic Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-price-text.md

Provides an example of custom formatting logic that conditionally displays 'HIGH' or 'LOW' based on the price value.

```tsx
<LineChart.PriceText 
  format={({ value, formatted }) => {
    const num = parseFloat(value);
    if (num > 50000) {
      return `HIGH: ${formatted}`;
    }
    return `LOW: ${formatted}`;
  }}
/>
```

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

### Use with Hook Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-price-text.md

Demonstrates accessing price data directly using the usePrice hook and displaying it within a Text component.

```tsx
function MyComponent() {
  const { value, formatted } = LineChart.usePrice({
    precision: 2,
  });

  return (
    <Text>
      {formatted.value} ({value.value})
    </Text>
  );
}
```

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

### Custom Formatting Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-price-text.md

Applies a custom formatter to prepend a dollar sign to the formatted closing price.

```tsx
<CandlestickChart.PriceText 
  type="close"
  format={({ value, formatted }) => {
    return `$${formatted}`;
  }}
/>
```

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

### Configuring Gesture Behavior

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-cursor-crosshair.md

Provides an example of fine-tuning the gesture behavior of the cursor by setting 'minDurationMs' and 'maxDurationMs' props.

```tsx
<LineChart.CursorCrosshair 
  minDurationMs={100}
  maxDurationMs={5000}
>
  <LineChart.Tooltip />
</LineChart.CursorCrosshair>
```

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

### LineChart Usage Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart.md

Demonstrates how to use the LineChart component with sample data, setting dimensions, yGutter, and a curve shape. Includes a Path component and a CursorCrosshair.

```tsx
import { LineChart } from 'react-native-wagmi-charts';
import * as d3Shape from 'd3-shape';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart 
        width={300} 
        height={300}
        yGutter={20}
        shape={d3Shape.curveMonotoneX}
      >
        <LineChart.Path color="blue" width={2} />
        <LineChart.CursorCrosshair />
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### Precision Control Examples

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-price-text.md

Illustrates how the 'precision' prop affects the displayed decimal places for the closing price.

```tsx
<CandlestickChart.PriceText type="close" precision={0} />  // 33520
```

```tsx
<CandlestickChart.PriceText type="close" precision={2} />  // 33520.11
```

```tsx
<CandlestickChart.PriceText type="close" precision={6} />  // 33520.110000
```

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

### LineChart.usePrice

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/hooks.md

Get the current or specific price value from the chart with formatting options.

```APIDOC
## LineChart.usePrice

### Description
Get the current or specific price value from the chart with formatting options.

### Parameters
- **format** (`TFormatterFn<string>`) - Optional - Custom formatter function
- **precision** (`number`) - Optional - Default: `2` - Decimal places to display
- **index** (`number`) - Optional - Specific data index (if not provided, uses current index)

### Returns
- **value** (`SharedValue<string>`) - Fixed-point numeric string
- **formatted** (`SharedValue<string>`) - Formatted price string

### Example
```tsx
function PriceDisplay() {
  const { formatted } = LineChart.usePrice({ precision: 4 });

  return <Animated.Text text={formatted} />;
}
```
```

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

### Basic Line Chart with Gradient

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-gradient.md

This example demonstrates the basic usage of the LineChart.Gradient component within a LineChart.Path. Ensure the LineChart.Provider is set up with your data.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path color="blue">
          <LineChart.Gradient />
        </LineChart.Path>
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### Basic CandlestickChart.Provider Usage

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-provider.md

Example of how to use the CandlestickChart.Provider with sample data and nested chart components. Requires importing CandlestickChart.

```tsx
import { CandlestickChart } from 'react-native-wagmi-charts';

const data = [
  {
    timestamp: 1625945400000,
    open: 33575.25,
    high: 33600.52,
    low: 33475.12,
    close: 33520.11,
  },
  {
    timestamp: 1625946300000,
    open: 33545.25,
    high: 33560.52,
    low: 33510.12,
    close: 33520.11,
  },
  {
    timestamp: 1625947200000,
    open: 33510.25,
    high: 33515.52,
    low: 33250.12,
    close: 33250.11,
  },
];

export function MyChart() {
  const [selectedIndex, setSelectedIndex] = useState(-1);

  return (
    <CandlestickChart.Provider 
      data={data}
      onCurrentIndexChange={setSelectedIndex}
    >
      <CandlestickChart>
        <CandlestickChart.Candles />
        <CandlestickChart.Crosshair>
          <CandlestickChart.Tooltip />
        </CandlestickChart.Crosshair>
      </CandlestickChart>
      <CandlestickChart.PriceText type="close" />
      <CandlestickChart.DatetimeText />
    </CandlestickChart.Provider>
  );
}
```

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

### Currency Formatting Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-price-text.md

Uses the Intl.NumberFormat API within a custom formatter to display the price as currency with locale-specific formatting.

```tsx
<LineChart.PriceText 
  format={({ value, formatted }) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(parseFloat(value));
  }}
/>
```

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

### LineChart Provider Basic Usage

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-provider.md

Demonstrates the basic setup of the LineChart.Provider with sample data and integrates it with other LineChart components. It also shows how to handle index changes via the onCurrentIndexChange callback.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

export function MyChart() {
  const [selectedIndex, setSelectedIndex] = useState(-1);

  return (
    <LineChart.Provider 
      data={data}
      onCurrentIndexChange={setSelectedIndex}
    >
      <LineChart>
        <LineChart.Path />
        <LineChart.CursorCrosshair>
          <LineChart.Tooltip />
        </LineChart.CursorCrosshair>
      </LineChart>
      <LineChart.PriceText />
      <LineChart.DatetimeText />
    </LineChart.Provider>
  );
}
```

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

### CandlestickChart Full-Screen Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart.md

Renders a full-screen CandlestickChart using device window dimensions for width and height. Includes Candles and Crosshair with Tooltip.

```tsx
<CandlestickChart.Provider data={data}>
  <CandlestickChart width={windowWidth} height={windowHeight}> 
    <CandlestickChart.Candles />
    <CandlestickChart.Crosshair>
      <CandlestickChart.Tooltip />
    </CandlestickChart.Crosshair>
  </CandlestickChart>
</CandlestickChart.Provider>
```

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

### Currency Formatting Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-price-text.md

Uses Intl.NumberFormat to format the closing price as US Dollars, including currency symbol and separators.

```tsx
<CandlestickChart.PriceText 
  type="close"
  format={({ value, formatted }) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(parseFloat(value));
  }}
/>
```

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

### Basic Candlestick Chart with Tooltip

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-tooltip.md

This example demonstrates how to set up a basic candlestick chart and include a tooltip that displays the closing price. Ensure the CandlestickChart.Provider is used with your data.

```tsx
import { CandlestickChart } from 'react-native-wagmi-charts';

const data = [
  {
    timestamp: 1625945400000,
    open: 33575.25,
    high: 33600.52,
    low: 33475.12,
    close: 33520.11,
  },
  // ... more candles
];

export function MyChart() {
  return (
    <CandlestickChart.Provider data={data}>
      <CandlestickChart>
        <CandlestickChart.Candles />
        <CandlestickChart.Crosshair>
          <CandlestickChart.Tooltip>
            <CandlestickChart.PriceText type="close" />
          </CandlestickChart.Tooltip>
        </CandlestickChart.Crosshair>
      </CandlestickChart>
    </CandlestickChart.Provider>
  );
}
```

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

### LineChart.DatetimeText Usage Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-datetime-text.md

Basic usage of LineChart.DatetimeText within a LineChart. Ensure the LineChart.Provider is set up with data.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path />
        <LineChart.CursorCrosshair>
          <LineChart.Tooltip>
            <LineChart.DatetimeText />
          </LineChart.Tooltip>
        </LineChart.CursorCrosshair>
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### Basic Line Chart Usage

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Renders a simple line chart using LineChart.Provider, LineChart, and LineChart.Path components. This basic example does not include an interactive cursor.

```jsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  {
    timestamp: 1625945400000,
    value: 33575.25,
  },
  {
    timestamp: 1625946300000,
    value: 33545.25,
  },
  {
    timestamp: 1625947200000,
    value: 33510.25,
  },
  {
    timestamp: 1625948100000,
    value: 33215.25,
  },
];

function Example() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path />
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### Display Closing Price

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-price-text.md

A simple example showing how to display the closing price with a default precision of 2 decimal places.

```tsx
<CandlestickChart.PriceText 
  type="close"
  precision={2}
/>
```

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

### Creating Line Chart Data

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/types.md

Example of how to structure data for a line chart. The data should be an array of objects, each containing a timestamp and a value.

```typescript
const data: TLineChartData = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

<LineChart.Provider data={data}>
  {/* Chart components */}
</LineChart.Provider>
```

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

### Multiple Prices Display Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-price-text.md

Illustrates displaying multiple price values with different precision and styling using separate LineChart.PriceText instances.

```tsx
<View>
  <LineChart.PriceText 
    precision={2}
    style={{fontSize: 18}}
  />
  <LineChart.PriceText 
    precision={6}
    style={{fontSize: 12, color: 'gray'}}
  />
</View>
```

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

### Conditional Coloring Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-price-text.md

Implements conditional coloring for the closing price based on whether it's higher or lower than the opening price, using the usePrice hook.

```tsx
function ConditionalPrice() {
  const { value } = CandlestickChart.usePrice({type: 'close'});
  const { value: openValue } = CandlestickChart.usePrice({type: 'open'});
  
  const isUp = value > openValue;
  
  return (
    <CandlestickChart.PriceText 
      type="close"
      style={{
        color: isUp ? 'green' : 'red',
      }}
    />
  );
}
```

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

### Inside Tooltip Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-price-text.md

Shows how to embed LineChart.PriceText within a LineChart.Tooltip component for displaying price information on hover or interaction.

```tsx
<LineChart.CursorCrosshair>
  <LineChart.Tooltip 
    textStyle={{
      backgroundColor: 'white',
      borderRadius: 4,
      padding: 8,
    }}
  >
    <LineChart.PriceText />
  </LineChart.Tooltip>
</LineChart.CursorCrosshair>
```

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

### Styling Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-price-text.md

Applies custom styles to the LineChart.PriceText component using standard React Native Text styling properties.

```tsx
<LineChart.PriceText 
  style={{
    color: 'blue',
    fontSize: 16,
    fontWeight: '600',
  }}
/>
```

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

### Basic Line Chart with CursorCrosshair

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-cursor-crosshair.md

This snippet shows a basic setup for a LineChart with a CursorCrosshair component. It includes a path and a tooltip, demonstrating how to integrate the crosshair into a chart.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path color="blue" />
        <LineChart.CursorCrosshair 
          color="blue"
          size={10}
          outerSize={40}
        >
          <LineChart.Tooltip />
        </LineChart.CursorCrosshair>
      </LineChart>
      <LineChart.PriceText />
    </LineChart.Provider>
  );
}
```

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

### CandlestickChart.DatetimeText Usage Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-datetime-text.md

Demonstrates how to integrate the CandlestickChart.DatetimeText component within a CandlestickChart, showing its default usage and an externally positioned instance.

```tsx
import { CandlestickChart } from 'react-native-wagmi-charts';

const data = [
  {
    timestamp: 1625945400000,
    open: 33575.25,
    high: 33600.52,
    low: 33475.12,
    close: 33520.11,
  },
  // ... more candles
];

export function MyChart() {
  return (
    <CandlestickChart.Provider data={data}>
      <CandlestickChart>
        <CandlestickChart.Candles />
        <CandlestickChart.Crosshair>
          <CandlestickChart.Tooltip>
            <CandlestickChart.DatetimeText />
          </CandlestickChart.Tooltip>
        </CandlestickChart.Crosshair>
      </CandlestickChart>
      <CandlestickChart.DatetimeText 
        style={{position: 'absolute', bottom: 10, right: 10}}
      />
    </CandlestickChart.Provider>
  );
}
```

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

### Usage Example with CandlestickChart

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-price-text.md

Demonstrates how to integrate CandlestickChart.PriceText within a CandlestickChart component, including setting up data and displaying the close price in a tooltip and absolutely positioned.

```tsx
import { CandlestickChart } from 'react-native-wagmi-charts';

const data = [
  {
    timestamp: 1625945400000,
    open: 33575.25,
    high: 33600.52,
    low: 33475.12,
    close: 33520.11,
  },
  // ... more candles
];

export function MyChart() {
  return (
    <CandlestickChart.Provider data={data}>
      <CandlestickChart>
        <CandlestickChart.Candles />
        <CandlestickChart.Crosshair>
          <CandlestickChart.Tooltip>
            <CandlestickChart.PriceText type="close" />
          </CandlestickChart.Tooltip>
        </CandlestickChart.Crosshair>
      </CandlestickChart>
      <CandlestickChart.PriceText 
        type="close"
        style={{position: 'absolute', top: 10, right: 10}}
      />
    </CandlestickChart.Provider>
  );
}
```

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

### CandlestickChart Usage Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart.md

Basic usage of CandlestickChart with sample data, including Candles and Crosshair components. Ensure data is provided to the CandlestickChart.Provider.

```tsx
import { CandlestickChart } from 'react-native-wagmi-charts';

const data = [
  {
    timestamp: 1625945400000,
    open: 33575.25,
    high: 33600.52,
    low: 33475.12,
    close: 33520.11,
  },
  {
    timestamp: 1625946300000,
    open: 33545.25,
    high: 33560.52,
    low: 33510.12,
    close: 33520.11,
  },
  {
    timestamp: 1625947200000,
    open: 33510.25,
    high: 33515.52,
    low: 33250.12,
    close: 33250.11,
  },
];

export function MyChart() {
  return (
    <CandlestickChart.Provider data={data}>
      <CandlestickChart width={300} height={300}>
        <CandlestickChart.Candles />
        <CandlestickChart.Crosshair />
      </CandlestickChart>
    </CandlestickChart.Provider>
  );
}
```

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

### Creating Candlestick Chart Data

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/types.md

Example of how to structure data for a candlestick chart. Each data point requires timestamp, open, high, low, and close values.

```typescript
const data: TData = [
  {
    timestamp: 1625945400000,
    open: 33575.25,
    high: 33600.52,
    low: 33475.12,
    close: 33520.11,
  },
  // ... more candles
];

<CandlestickChart.Provider data={data}>
  {/* Chart components */}
</CandlestickChart.Provider>
```

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

### LineChart.Dot with Pulse Animation

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-dot.md

Configures a LineChart.Dot to include a pulsing animation effect. This example shows how to enable the pulse, define an outer dot, and control its size and behavior.

```tsx
<LineChart.Path>
  <LineChart.Dot 
    at={3}
    color="red"
    size={6}
    hasPulse={true}
    hasOuterDot={true}
    outerSize={20}
    pulseBehaviour="always"
    pulseDurationMs={600}
  />
</LineChart.Path>
```

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

### CandlestickChart.Crosshair Usage Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-crosshair.md

Basic implementation of the CandlestickChart.Crosshair component within a CandlestickChart, including data setup and a simple tooltip.

```tsx
import { CandlestickChart } from 'react-native-wagmi-charts';

const data = [
  {
    timestamp: 1625945400000,
    open: 33575.25,
    high: 33600.52,
    low: 33475.12,
    close: 33520.11,
  },
  // ... more candles
];

export function MyChart() {
  return (
    <CandlestickChart.Provider data={data}>
      <CandlestickChart>
        <CandlestickChart.Candles />
        <CandlestickChart.Crosshair 
          color="blue"
          onCurrentXChange={(xValue) => {
            console.log('Current x:', xValue);
          }}
        >
          <CandlestickChart.Tooltip />
        </CandlestickChart.Crosshair>
      </CandlestickChart>
    </CandlestickChart.Provider>
  );
}
```

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

### LineChart.DatetimeText Full Date and Time Format

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-datetime-text.md

Display complete date and time information by setting comprehensive options. This example includes weekday, full month name, and seconds.

```tsx
<LineChart.DatetimeText 
  options={{
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  }}
/>
// Output: Saturday, September 11, 2021, 01:30:45 PM
```

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

### Run Project with npm

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/example/README.md

Runs the project on iOS, Android, or Web using npm commands.

```bash
npm run ios     # or android, web
```

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

### Run Project on Web

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/example/README.md

Runs the project on a web browser using pnpm.

```bash
pnpm run web
```

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

### Get Formatted Datetime

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Use this hook to get and format timestamp data. It allows for custom formatting, locale selection, and passing specific options for date string representation.

```jsx
const { value, formatted } = CandlestickChart.useDatetime({
  format,
  locale,
  options,
});
```

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

### LineChart.useDatetime

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/hooks.md

Get the current timestamp value from the chart with locale-specific formatting.

```APIDOC
## LineChart.useDatetime

### Description
Get the current timestamp value from the chart with locale-specific formatting.

### Parameters
- **format** (`TFormatterFn<number>`) - Optional - Custom formatter function
- **locale** (`string`) - Optional - Default: `'en-US'` - BCP 47 locale tag
- **options** (`Intl.DateTimeFormatOptions`) - Optional - Date formatting options

### Returns
- **value** (`SharedValue<string>`) - Raw timestamp value
- **formatted** (`SharedValue<string>`) - Formatted datetime string

### Example
```tsx
function DateDisplay() {
  const { formatted } = LineChart.useDatetime({
    locale: 'en-AU',
    options: { month: 'short', day: 'numeric' },
  });

  return <Animated.Text text={formatted} />;
}
```
```

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

### Run Project on Android

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/example/README.md

Runs the project on an Android emulator or device using pnpm.

```bash
pnpm run android
```

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

### Basic LineChart with CursorLine Usage

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-cursor-line.md

Demonstrates how to integrate LineChart.CursorLine into a LineChart. Ensure the LineChart.Provider is set up with data.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path color="blue" />
        <LineChart.CursorLine color="blue" showLabel={true} />
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### Run Project on iOS

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/example/README.md

Runs the project on an iOS simulator or device using pnpm.

```bash
pnpm run ios
```

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

### Crosshair Type Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-price-text.md

Displays the price corresponding to the current crosshair's y-position, with a specified precision.

```tsx
<CandlestickChart.PriceText 
  type="crosshair"
  precision={2}
/>
```

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

### LineChart Provider with Time-Proportional X-Axis

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-provider.md

Demonstrates how to use the `xDomain` prop to scale the x-axis based on the actual time differences between data points. This ensures points are spaced proportionally to their timestamps.

```tsx
<LineChart.Provider 
  data={data}
  xDomain={[
    data[0].timestamp,
    data[data.length - 1].timestamp
  ]}
>
  {/* Points will be spaced proportionally to their time differences */}
</LineChart.Provider>
```

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

### LineChart.Highlight

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Defines a highlighted segment on the LineChart, allowing customization of its start and end points, color, and width.

```APIDOC
## LineChart.Highlight

### Description

Defines a highlighted segment on the LineChart. Allows customization of the start and end points, color, and width of the highlight.

### Props

#### `from` (number) - Optional - Data index of where to start the highlight.
#### `to` (number) - Optional - Data index of where to end the highlight.
#### `color` (string) - Optional - Default: `"black"` - Color of the highlighted path.
#### `inactiveColor` (string) - Optional - Color of the highlight when the chart is inactive.
#### `showInactiveColor` (boolean) - Optional - Default: `true` - Whether or not to show the inactive highlight when the chart is inactive.
#### `width` (number) - Optional - Default: `3` - Width of the highlight stroke.
```

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

### CandlestickChart.DatetimeText Full Format with Weekday

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-datetime-text.md

Example of using CandlestickChart.DatetimeText to display the full date and time, including the weekday.

```tsx
<CandlestickChart.DatetimeText 
  options={{
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  }}
/>
// Output: "Saturday, September 11, 2021, 01:30"
```

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

### Basic Line Chart Path Usage

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-path.md

Demonstrates the basic usage of the LineChart.Path component with sample data. Ensure the data is provided to the LineChart.Provider.

```tsx
import { LineChart } from 'react-native-wagmi-charts';

const data = [
  { timestamp: 1625945400000, value: 33575.25 },
  { timestamp: 1625946300000, value: 33545.25 },
  { timestamp: 1625947200000, value: 33510.25 },
];

export function MyChart() {
  return (
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path 
          color="blue" 
          width={2}
          strokeLinecap="round"
        />
      </LineChart>
    </LineChart.Provider>
  );
}
```

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

### LineChart API Reference

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/00-START-HERE.md

Documentation for the LineChart components is organized across 13 files, covering Provider, Container, Path, Cursor (Crosshair and Line), Dot Markers, Gradient, Highlight, HorizontalLine, Tooltip, PriceText, DatetimeText, and Axis.

```APIDOC
## LineChart Components API

This section details the API for the LineChart components. Each component's documentation is located in a separate file within the `api-reference/` directory.

### Components and their documentation files:

- **Provider**: `api-reference/line-chart-provider.md`
- **Container**: `api-reference/line-chart.md`
- **Path**: `api-reference/line-chart-path.md`
- **Cursor (Crosshair)**: `api-reference/line-chart-cursor-crosshair.md`
- **Cursor (Line)**: `api-reference/line-chart-cursor-line.md`
- **Dot Markers**: `api-reference/line-chart-dot.md`
- **Gradient**: `api-reference/line-chart-gradient.md`
- **Highlight**: `api-reference/line-chart-highlight.md`
- **HorizontalLine**: `api-reference/line-chart-horizontal-line.md`
- **Tooltip**: `api-reference/line-chart-tooltip.md`
- **PriceText**: `api-reference/line-chart-price-text.md`
- **DatetimeText**: `api-reference/line-chart-datetime-text.md`
- **Axis**: `api-reference/line-chart-axis.md`

Each file provides full type signatures, parameter tables, return types, usage examples, customization options, and animation details.
```

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

### CandlestickChart Custom Dimensions

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart.md

Sets explicit width and height for the CandlestickChart. Includes an example of nesting a Tooltip within the Crosshair.

```tsx
<CandlestickChart.Provider data={data}>
  <CandlestickChart width={400} height={300}>
    <CandlestickChart.Candles />
    <CandlestickChart.Crosshair>
      <CandlestickChart.Tooltip />
    </CandlestickChart.Crosshair>
  </CandlestickChart>
</CandlestickChart.Provider>
```

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

### CandlestickChart.useDatetime

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Hook to get the formatted datetime string for the CandlestickChart. Supports custom formatting, locale, and date formatting options.

```APIDOC
## CandlestickChart.useDatetime

### Description
Hook to format and retrieve the timestamp for the CandlestickChart. It allows for customization of the date format, locale, and specific formatting options.

### Arguments
#### Path Parameters
- **format** (`({ value, formatted }) => string`) - Optional - Custom format function of the timestamp.
- **locale** (`string`) - Optional - Locale of the timestamp. Defaults to "en-US".
- **options** (`{}`) - Optional - Options to pass to `toLocaleString()`. [Available options are here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString).

### Returns
#### Success Response
- **value** (`string`) - Timestamp value in milliseconds.
- **formatted** (`string`) - Formatted timestamp value.
```

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

### LineChart Highlight with Gradient, Dots, and Path

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-highlight.md

Demonstrates how LineChart.Highlight renders independently alongside other path children like gradients and dots.

```tsx
<LineChart.Path color="blue">
  <LineChart.Gradient />
  <LineChart.Highlight from={1} to={3} color="orange" />
  <LineChart.Dot at={0} color="darkblue" />
  <LineChart.Dot at={data.length - 1} color="darkblue" />
</LineChart.Path>
```

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

### Single Point LineChart Highlight

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-highlight.md

Highlights a single data point on the line chart by setting the same start and end index.

```tsx
<LineChart.Highlight from={5} to={5} color="yellow" width={6} />
```

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

### LineChart Provider with Multiple Data Sets

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-provider.md

Illustrates how to use the LineChart.Provider with multiple data sets by passing a dictionary of data arrays. Each data set can be rendered with different configurations, such as color.

```tsx
<LineChart.Provider 
  data={{
    setA: dataA,
    setB: dataB,
  }}
>
  <LineChart id="setA">
    <LineChart.Path />
  </LineChart>
  <LineChart id="setB">
    <LineChart.Path color="blue" />
  </LineChart>
</LineChart.Provider>
```

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

### CandlestickChart.useDatetime Hook Example

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-datetime-text.md

Illustrates how to use the CandlestickChart.useDatetime hook to access formatted and raw datetime values within a custom component.

```tsx
function MyComponent() {
  const { value, formatted } = CandlestickChart.useDatetime({
    locale: 'en-US',
    options: { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' },
  });

  return <Text>{formatted.value}</Text>;
}
```

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

### Multiple Datasets in LineChart

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/README.md

Demonstrates how to display multiple datasets on a single LineChart by providing an object with dataset IDs and corresponding data to the Provider. Each LineChart instance is then linked to its dataset via the 'id' prop.

```typescript
<LineChart.Provider data={{
  dataset1: data1,
  dataset2: data2,
}}>
  <LineChart id="dataset1">
    <LineChart.Path color="blue" />
  </LineChart>
  <LineChart id="dataset2">
    <LineChart.Path color="red" />
  </LineChart>
</LineChart.Provider>
```

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

### Custom Wick Rendering

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/candlestick-chart-candles.md

Customize the appearance of the wick/shadow lines of the candlesticks. This example demonstrates using a dashed line pattern for the wicks.

```tsx
<CandlestickChart.Candles 
  renderLine={({x1, x2, y1, y2, stroke, strokeWidth, candle}) => (
    <Line
      x1={x1}
      x2={x2}
      y1={y1}
      y2={y2}
      stroke={stroke}
      strokeWidth={strokeWidth}
      strokeDasharray="2,2"
    />
  )}
/>
```

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

### Get Current Candle OHLC Data

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/hooks.md

Retrieves the OHLC data for the currently selected candle. The returned value is a Reanimated SharedValue.

```typescript
function CandlestickChart.useCandleData(): Readonly<SharedValue<TCandle>>;
```

```typescript
type TCandle = {
  timestamp: number;
  open: number;
  high: number;
  low: number;
  close: number;
};
```

```tsx
function CurrentCandle() {
  const candle = CandlestickChart.useCandleData();

  return (
    <Animated.Text text={`Close: ${candle.value.close}`} />
  );
}
```

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

### Multiple LineChart Highlights

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-highlight.md

Demonstrates how to apply multiple highlight sections to a single line path.

```tsx
<LineChart.Path color="blue">
  <LineChart.Highlight from={0} to={2} color="red" />
  <LineChart.Highlight from={4} to={6} color="orange" />
</LineChart.Path>
```

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

### LineChart Props

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Configure the appearance and behavior of the LineChart.

```APIDOC
## LineChart Props

### Description

Represents the Line Chart component.

### Props

#### width

- **width** (number) - Optional - The width of the chart. Defaults to the device screen width.

#### height

- **height** (number) - Optional - The height of the chart. Defaults to the device screen height.

#### yGutter

- **yGutter** (number) - Optional - The gutter on the Y axis. Defaults to `16`.

#### shape

- **shape** (function) - Optional - The shape type/curve of the graph. Accepts a curve function from d3-shape. Defaults to `shape.curveBumpX`.

#### ...props

- **...props** (ViewProps) - This component also inherits React Native's `View` props.
```

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

### LineChart.DatetimeText Inside Tooltip

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-datetime-text.md

Example of nesting LineChart.DatetimeText within a LineChart.Tooltip, often used to display time alongside price information in a crosshair.

```tsx
<LineChart.CursorCrosshair>
  <LineChart.Tooltip position="top">
    <LineChart.PriceText />
  </LineChart.Tooltip>
  <LineChart.Tooltip position="bottom">
    <LineChart.DatetimeText 
      options={{hour: '2-digit', minute: '2-digit'}}
    />
  </LineChart.Tooltip>
</LineChart.CursorCrosshair>
```

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

### LineChart.DatetimeText Compact Time Format

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-datetime-text.md

Display only the time without the date by configuring the 'options' prop. This example shows a compact 12-hour time format.

```tsx
<LineChart.DatetimeText 
  options={{
    hour: '2-digit',
    minute: '2-digit',
    hour12: true,
  }}
/>
// Output: 01:30 PM
```

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

### LineChart Custom Sizing

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart.md

Shows how to set custom width and height for the LineChart component, along with a basic Path child.

```tsx
<LineChart.Provider data={data}>
  <LineChart width={350} height={450}>
    <LineChart.Path />
  </LineChart>
  <LineChart.PriceText />
</LineChart.Provider>
```

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

### LineChart.Provider Props

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Configure the LineChart data and axis ranges.

```APIDOC
## LineChart.Provider Props

### Description

Provides data and configuration for the LineChart.

### Props

#### data

- **data** (Array<{ timestamp: number, value: number }>) - Required - The line chart data as an array of timestamps and values.

#### yRange

- **yRange** ({ min?: number; max?: number }) - Optional - Sets a custom range for the y-axis values.

#### xDomain

- **xDomain** ([ min: number; max: number ]) - Optional - Scales x-values proportionate to their time scale.
```

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

### Get Candlestick Chart Price Data

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Use the usePrice hook from CandlestickChart to retrieve and format price data. Customize formatting and precision as needed.

```jsx
const { value, formatted } = CandlestickChart.usePrice({
  format,
  precision,
});
```

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

### Get Formatted Price Data

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/README.md

Use this hook to retrieve and format price data for display. You can provide a custom format function and specify the precision.

```jsx
const { value, formatted } = LineChart.usePrice({
  format,
  precision,
});
```

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

### Currency Formatting

Source: https://github.com/coinjar/react-native-wagmi-charts/blob/master/_autodocs/api-reference/line-chart-axis.md

Formats tick labels as currency values, demonstrating conversion and rounding for display.

```tsx
<LineChart.Axis 
  position="left"
  orientation="vertical"
  domain={[30000, 40000]}
  format={(v) => {
    if (typeof v === 'number') {
      return `$${(v / 1000).toFixed(0)}k`;
    }
    return v;
  }}
/>
```