# Wick Charts

> Realtime, animated charts for React, Vue and Svelte. Candlestick, line, bar, heatmap, pie and more stream at 60fps on a canvas engine, with zoom, pan, crosshair and tooltips. Built-in and custom themes, tree-shakeable, zero runtime dependencies.

## Docs

- [Overview](https://wick-charts.eeff.io/): Realtime, animated charts for React, Vue and Svelte. Candlestick, line, bar, heatmap, pie and more stream at 60fps on a canvas engine, with zoom, pan, crosshair and tooltips. Built-in and custom themes, tree-shakeable, zero runtime dependencies.

## Charts

- [Candlestick](https://wick-charts.eeff.io/charts/candlestick/): Canvas-rendered OHLC candlestick charts with real-time streaming, zoom, pan, crosshair and tooltips. 60fps, tree-shakeable, zero runtime dependencies.
- [Line & Area](https://wick-charts.eeff.io/charts/line/): Animated line and area charts with live streaming, gradient fills, multiple series, crosshair and tooltips. Canvas-rendered at 60fps.
- [Band](https://wick-charts.eeff.io/charts/band/): Canvas band charts that fill between a low and a high edge: Bollinger bands, confidence intervals and fan charts, with live streaming and tooltips.
- [Bar](https://wick-charts.eeff.io/charts/bar/): Canvas bar and column charts with real-time updates, custom colors and tooltips. Lightweight, tree-shakeable and dependency-free.
- [Pie & Donut](https://wick-charts.eeff.io/charts/pie/): Animated pie and donut charts with legends, tooltips and custom themes. Canvas-rendered, smooth and dependency-free.
- [Heatmap](https://wick-charts.eeff.io/charts/heatmap/): Realtime, animated charts for React, Vue and Svelte. Candlestick, line, bar, heatmap, pie and more stream at 60fps on a canvas engine, with zoom, pan, crosshair and tooltips. Built-in and custom themes, tree-shakeable, zero runtime dependencies.
- [Order Book](https://wick-charts.eeff.io/charts/depth/): Live order book charts: cumulative bid and ask walls around the mid price, with smooth morphing updates, mid and spread marker, zoom around mid and tooltips.
- [Sparkline](https://wick-charts.eeff.io/charts/sparkline/): Tiny inline sparkline charts for dashboards and tables. Streaming-ready, canvas-rendered, with near-zero overhead.

## Use Cases

- [Realtime Data](https://wick-charts.eeff.io/use-cases/realtime-data/): Stream live data into Wick Charts two ways: declaratively via the series data prop, or imperatively with appendData / updateData / keepLast. 60fps canvas updates in React, Vue and Svelte.
- [Multi-chart Sync](https://wick-charts.eeff.io/use-cases/multi-chart-sync/): Synchronize crosshair, zoom and pan across multiple charts to build linked trading dashboards with Wick Charts in React, Vue or Svelte.
- [Custom renders](https://wick-charts.eeff.io/use-cases/custom-renders/): Render chart types the library doesn’t ship by combining a data transform with a custom painter. A worked Renko example built on the candlePainter escape hatch in Wick Charts.
- [Custom intro animation](https://wick-charts.eeff.io/use-cases/custom-intro/): Realtime, animated charts for React, Vue and Svelte. Candlestick, line, bar, heatmap, pie and more stream at 60fps on a canvas engine, with zoom, pan, crosshair and tooltips. Built-in and custom themes, tree-shakeable, zero runtime dependencies.
- [Annotations](https://wick-charts.eeff.io/use-cases/annotations/): Realtime, animated charts for React, Vue and Svelte. Candlestick, line, bar, heatmap, pie and more stream at 60fps on a canvas engine, with zoom, pan, crosshair and tooltips. Built-in and custom themes, tree-shakeable, zero runtime dependencies.
- [Data loading](https://wick-charts.eeff.io/use-cases/data-loading/): Realtime, animated charts for React, Vue and Svelte. Candlestick, line, bar, heatmap, pie and more stream at 60fps on a canvas engine, with zoom, pan, crosshair and tooltips. Built-in and custom themes, tree-shakeable, zero runtime dependencies.
- [Secondary Y scale](https://wick-charts.eeff.io/use-cases/secondary-scale/): Overlay two unrelated measures on one pane — price and RSI, rate and error rate — each on its own named Y scale with its own autoscale and axis, sharing the time axis. React, Vue and Svelte.
- [Numeric & category X](https://wick-charts.eeff.io/use-cases/x-axis-types/): Plot and stream line, bar and band series over plain numbers or named categories instead of time — a load-test curve, users by region, a live elevation profile and a live poll. React, Vue and Svelte.

## Resources

- [Theme editor](https://wick-charts.eeff.io/use-cases/theme/): Customize colors, typography, grid and axes with built-in themes or your own. Live theme editor for Wick Charts in React, Vue and Svelte.
- [Migration Guide](https://wick-charts.eeff.io/migration/): Upgrade to Wick Charts: breaking changes, renamed props and step-by-step notes for moving from earlier versions or other charting libraries.

## API — Charts

- [BandSeries](https://wick-charts.eeff.io/api/band-series/): Band (range) series that fills between a low and a high edge — percentile bands, min/max envelopes, Bollinger bands and fan charts.
- [BarSeries](https://wick-charts.eeff.io/api/bar-series/): Bar and histogram series with multi-layer data, stacking, per-layer colors, rounded corners and entry animations.
- [CandlestickSeries](https://wick-charts.eeff.io/api/candlestick-series/): OHLC candlestick series with volume bars, body width and corner radius options, entry animations and custom painters.
- [DepthSeries](https://wick-charts.eeff.io/api/depth-series/): Props, types, defaults and live examples for the DepthSeries component in Wick Charts.
- [HeatmapSeries](https://wick-charts.eeff.io/api/heatmap-series/): Props, types, defaults and live examples for the HeatmapSeries component in Wick Charts.
- [LineSeries](https://wick-charts.eeff.io/api/line-series/): Line and area series with multiple layers, stacking, curve interpolation, gradient fills and a live pulse effect.
- [PieSeries](https://wick-charts.eeff.io/api/pie-series/): Pie and donut series with inner radius control, hover animation and animated slice updates.
- [Sparkline](https://wick-charts.eeff.io/api/sparkline/): Self-contained inline mini chart with an optional value label — renders without a ChartContainer (React only).

## API — Components

- [ChartContainer](https://wick-charts.eeff.io/api/chart-container/): Root chart component — theme, axes, padding, viewport, grid, gradient, animations and interactivity for the series inside.
- [Crosshair](https://wick-charts.eeff.io/api/crosshair/): Cursor-tracking crosshair that pins axis labels to the hovered time and value.
- [HeatmapTooltip](https://wick-charts.eeff.io/api/heatmap-tooltip/): Props, types, defaults and live examples for the HeatmapTooltip component in Wick Charts.
- [InfoBar](https://wick-charts.eeff.io/api/info-bar/): Top info bar showing OHLC or values for the hovered (or last) bar across every visible series, with sorting and number formatting.
- [Legend](https://wick-charts.eeff.io/api/legend/): Series legend below or beside the chart with toggle / isolate visibility modes and a custom render slot.
- [Marker](https://wick-charts.eeff.io/api/marker/): Props, types, defaults and live examples for the Marker component in Wick Charts.
- [Navigator](https://wick-charts.eeff.io/api/navigator/): Overview mini-chart with a draggable window for panning and zooming the visible range.
- [NumberFlow](https://wick-charts.eeff.io/api/number-flow/): Standalone animated number that rolls digits on change, with format and spin-duration props.
- [PieLegend](https://wick-charts.eeff.io/api/pie-legend/): Slice list for pie charts showing value or percent per slice, with formatting and a custom render slot.
- [PieTooltip](https://wick-charts.eeff.io/api/pie-tooltip/): Hover tooltip for pie slices with formatting and a custom render slot.
- [Title](https://wick-charts.eeff.io/api/title/): Chart title bar with optional subtitle, hoisted above the canvas.
- [Tooltip](https://wick-charts.eeff.io/api/tooltip/): Floating tooltip near the cursor with per-series value snapshots, sorting, formatting and a custom render slot.
- [XAxis](https://wick-charts.eeff.io/api/x-axis/): Horizontal axis for time, numeric or category X with automatic tick density and label formatting.
- [YAxis](https://wick-charts.eeff.io/api/y-axis/): Vertical value axis with auto, fixed, percent-padded or computed bounds and tick formatting.
- [YLabel](https://wick-charts.eeff.io/api/y-label/): Floating last-price badge with a dashed line pinned to the Y axis, tracking live updates per series.

## API — Hooks

- [useChartInstance](https://wick-charts.eeff.io/hooks/use-chart-instance/): Access the underlying chart instance for imperative calls like appendData, updateData and setVisibleRange.
- [useTheme](https://wick-charts.eeff.io/hooks/use-theme/): Read the resolved chart theme from context inside custom overlays and slots.
- [useCrosshairPosition](https://wick-charts.eeff.io/hooks/use-crosshair-position/): Reactive crosshair position — media coordinates, time and value under the cursor, or null when inactive.
- [useLastYValue](https://wick-charts.eeff.io/hooks/use-last-y-value/): Live last Y value of a series, with an isLive flag — drives badges and streaming readouts.
- [usePreviousClose](https://wick-charts.eeff.io/hooks/use-previous-close/): Previous bar close value of a series, for change and delta readouts.
- [useVisibleRange](https://wick-charts.eeff.io/hooks/use-visible-range/): Reactive visible X range of the viewport as { from, to }.
- [useYRange](https://wick-charts.eeff.io/hooks/use-y-range/): Reactive Y bounds of the viewport as { min, max }.

## Optional

- [Full documentation](https://wick-charts.eeff.io/llms-full.txt): Complete API guide with chart-type references and runnable use-case examples in a single file