# react-native-livechart

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

- [react-native-livechart](https://react-native-livechart.brandtnewlabs.com/index.md): High-performance live line and candlestick charts for React Native, built on Skia and Reanimated.
- [Installation](https://react-native-livechart.brandtnewlabs.com/installation.md): Install react-native-livechart and configure its peer dependencies, Babel, and Metro.
- [Quickstart](https://react-native-livechart.brandtnewlabs.com/quickstart.md): Render your first live chart with simulated data.
- [Line & area](https://react-native-livechart.brandtnewlabs.com/guides/line-and-area.md): Customize the single-series line chart: gradient, badge, value line, dot, and live value.
- [Line denoising](https://react-native-livechart.brandtnewlabs.com/guides/line-denoising.md): Remove visually noisy path detail with a pixel tolerance while keeping the original chart data exact.
- [Candlestick](https://react-native-livechart.brandtnewlabs.com/guides/candlestick.md): Render OHLC candlestick bars with a live in-progress candle.
- [Volume and line QA](https://react-native-livechart.brandtnewlabs.com/guides/volume-line-qa.md): Exercise real live charts with volume spikes and changing geometry.
- [Chart gaps](https://react-native-livechart.brandtnewlabs.com/guides/empty-candles.md): Represent no-trade, unavailable, and unknown line or candle intervals without fabricating market data.
- [Multi-series](https://react-native-livechart.brandtnewlabs.com/guides/multi-series.md): Render several live series with a toggleable legend and per-series dots.
- [Sparklines](https://react-native-livechart.brandtnewlabs.com/guides/sparklines.md): Render many cheap, non-animated mini-charts in a list or grid with static mode.
- [Scrubbing](https://react-native-livechart.brandtnewlabs.com/guides/scrubbing.md): Pan a crosshair across history and read the value under it.
- [Scroll interaction](https://react-native-livechart.brandtnewlabs.com/guides/scroll-interaction.md): Suspend a live chart's frame work while its parent list scrolls.
- [Order ticket](https://react-native-livechart.brandtnewlabs.com/guides/order-ticket.md): Tap to drop a locked price reticle, drag to fine-tune, and press to fire an order callback.
- [Time-scroll](https://react-native-livechart.brandtnewlabs.com/guides/time-scroll.md): Pan back through history; auto-follow resumes at the live edge.
- [Manual Y-range scaling](https://react-native-livechart.brandtnewlabs.com/guides/y-range-scale.md): Drive TradingView-style price-axis scaling from your own gesture.
- [Axis auto-hide](https://react-native-livechart.brandtnewlabs.com/guides/axis-auto-hide.md): Keep a LiveChart minimal at rest while preserving axes during interaction.
- [Markers & trades](https://react-native-livechart.brandtnewlabs.com/guides/markers-and-trades.md): Annotate the chart with glyph markers and a live trade-fill stream.
- [Reference lines & bands](https://react-native-livechart.brandtnewlabs.com/guides/reference-lines-and-bands.md): Draw horizontal or time-varying lines, value/time bands, pill badges, and draggable working orders.
- [Overlay bridge](https://react-native-livechart.brandtnewlabs.com/guides/overlay-bridge.md): Hand-roll a React Native overlay glued to the chart's price↔pixel / time↔pixel scale.
- [Momentum & degen](https://react-native-livechart.brandtnewlabs.com/guides/momentum-and-degen.md): Momentum-based coloring plus optional particle bursts and screen shake.
- [Threshold split](https://react-native-livechart.brandtnewlabs.com/guides/threshold.md): Color the line above vs. below a live benchmark — green above, red below — with an optional P/L fill band.
- [Segments](https://react-native-livechart.brandtnewlabs.com/guides/segments.md): Label time ranges of the line — sessions, overnight windows — with a scrub-focus recolor.
- [Theming](https://react-native-livechart.brandtnewlabs.com/guides/theming.md): Theme the chart with a color scheme, accent color, palette overrides, and fonts.
- [Badge styling](https://react-native-livechart.brandtnewlabs.com/guides/badge-styling.md): Reshape the live-edge value pill — radius, colors, border, font, and offset.
- [Axes & grid](https://react-native-livechart.brandtnewlabs.com/guides/axes-and-grid.md): Tune the grid lines, hide or space the axes, float edge labels, and adjust the plot insets.
- [Extrema labels](https://react-native-livechart.brandtnewlabs.com/guides/extrema-labels.md): Pin the high / low readout to the actual data point where it occurs, not just the edge.
- [Android surface rendering](https://react-native-livechart.brandtnewlabs.com/guides/android-surface-rendering.md): Profile the experimental opaque SurfaceView canvas and know when to keep TextureView.
- [Loading data on scroll](https://react-native-livechart.brandtnewlabs.com/guides/loading-data-on-scroll.md): Fetch older history as the user pans, then merge live point or candle updates.
- [Playback](https://react-native-livechart.brandtnewlabs.com/guides/playback.md): Control the time window, pausing, smoothing, and the Y-axis range.
- [Automatic sleep](https://react-native-livechart.brandtnewlabs.com/guides/auto-sleep.md): Pause a live chart, let its engine sleep, and resume animation.
- [Historical data](https://react-native-livechart.brandtnewlabs.com/guides/historical-data.md): Render a fixed historical span edge-to-edge instead of a live-scrolling tail.
- [Volatile range stress](https://react-native-livechart.brandtnewlabs.com/guides/range-stress.md): Exercise range fitting with fast updates, sudden swings, and in-place history edits.
- [States & formatting](https://react-native-livechart.brandtnewlabs.com/guides/states-and-formatting.md): Loading and empty states, and worklet-safe value/time formatters.
- [Transitions](https://react-native-livechart.brandtnewlabs.com/guides/transitions.md): Animate between line and candle, or cross-fade between separate chart instances.
- [LiveChart](https://react-native-livechart.brandtnewlabs.com/api-reference/livechart.md): Props for the single-series line / candlestick component.
- [LiveChartSeries](https://react-native-livechart.brandtnewlabs.com/api-reference/livechart-series.md): Props for the multi-series line component.
- [Hooks & utilities](https://react-native-livechart.brandtnewlabs.com/api-reference/hooks-and-utilities.md): LiveChartTransition, formatters, the mono font constant, and advanced hooks.
- [Types](https://react-native-livechart.brandtnewlabs.com/api-reference/types.md): Exported TypeScript types — data shapes, config objects, and the palette.
- [Showcase](https://react-native-livechart.brandtnewlabs.com/showcase/index.md): LiveChart dropped into recreations of real finance & crypto apps.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.