> ## Documentation Index
> Fetch the complete documentation index at: https://react-native-livechart.brandtnewlabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# react-native-livechart

> High-performance live line and candlestick charts for React Native, built on Skia and Reanimated.

**react-native-livechart** renders real-time line and candlestick charts on the UI thread.
Data and live values flow through Reanimated `SharedValue`s, so the chart animates at native
frame rates without per-frame JS bridge traffic.

It's built on [`@shopify/react-native-skia`](https://shopify.github.io/react-native-skia/),
[`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/), and
[`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/).

<Frame caption="Every overlay, toggled live in the example app's Playground">
  <video autoPlay loop muted playsInline controls poster="/media/playground.jpg" src="https://mintcdn.com/brandtnewlabs/3aK_iydbC8Ff9g3s/media/playground.mp4?fit=max&auto=format&n=3aK_iydbC8Ff9g3s&q=85&s=175878ec2c4f01219563b8f48335e7c4" data-path="media/playground.mp4" />
</Frame>

<CardGroup cols={2}>
  <Card title="Line & candlestick" icon="chart-line">
    Single-series line/area or OHLC candlestick mode in one component, with a smooth
    line/candle morph.
  </Card>

  <Card title="Multi-series" icon="layer-group">
    Several live series with a toggleable legend, per-series dots, and a shared crosshair.
  </Card>

  <Card title="Scrubbing & order ticket" icon="crosshairs">
    Pan a crosshair across history with a worklet-friendly `onScrub` payload — or drop a
    locked price reticle and press its badge to fire an order callback (`scrubAction`).
  </Card>

  <Card title="Momentum & degen" icon="bolt">
    Auto-detected momentum coloring plus optional particle bursts and screen shake on swings.
  </Card>

  <Card title="Markers & references" icon="location-dot">
    Trade-fill markers, custom glyphs, and reference lines / bands.
  </Card>

  <Card title="Theming" icon="palette">
    Light/dark themes with an accent-driven palette and full per-key overrides.
  </Card>
</CardGroup>

## Get started

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Install the package and its peer dependencies, and configure Babel + Metro.
  </Card>

  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Render your first live chart in a few lines.
  </Card>
</CardGroup>

<Info>
  **Using an AI assistant?** Connect it to these docs through our hosted MCP server:

  ```
  https://react-native-livechart.brandtnewlabs.com/mcp
  ```

  Add that URL in Claude, Cursor, or any MCP-compatible client to let it search
  and cite the library's documentation directly.
</Info>

<Note>
  The design and API are conceptually inspired by
  [liveline](https://github.com/benjitaylor/liveline) by Benji Taylor — reimagined for React
  Native on Skia and Reanimated. This is not a fork; see the project
  [acknowledgments](https://github.com/brandtnewlabs/react-native-livechart#acknowledgments).
</Note>