Wick Charts

High-performance timeseries charts for React, Vue, and Svelte. Canvas-rendered, tree-shakeable, zero runtime dependencies.

Live Demo · Docs

Features

• Candlestick, Line, Bar, Pie, Sparkline — all from one package
• Real-time streaming — append/update at 60fps with coordinated animations
• 22 built-in themes plus createTheme() for custom palettes
• Interactive — zoom, pan, crosshair, tooltips
• Stacking — normal and percent modes for line/bar
• Custom-render slots — keep the built-in positioning, replace the contents
• Tree-shakeable — import only what you use
• Zero runtime dependencies — just your framework

Install

npm install @wick-charts/react

Quick Start

import {
  ChartContainer, CandlestickSeries, Tooltip,
  Crosshair, YAxis, TimeAxis
} from '@wick-charts/react';

function Chart({ data }) {
  return (
    <ChartContainer>
      <CandlestickSeries data={data} />
      <Tooltip />
      <Crosshair />
      <YAxis />
      <TimeAxis />
    </ChartContainer>
  );
}

API

Every component, prop, type, and slot context lives in the docs site:

mo4islona.github.io/wick-charts/#/api/chart-container

Start there for ChartContainer, then drill into the series (Candlestick, Line, Bar, Pie, Sparkline) and overlays (Tooltip, InfoBar, Crosshair, Legend, YAxis, XAxis, Navigator, …).

Bundle size

Tree-shaken React scenarios via pnpm size (esbuild, minified, browser target, React/ReactDOM external):

| Scenario | Raw | Gzip | Brotli | |---|---:|---:|---:| | Candlestick only | 147 KB | 44 KB | 38 KB | | Line only | 147 KB | 44 KB | 38 KB | | Full React | 164 KB | 49 KB | 41 KB |

Migration

Upgrading across versions? See MIGRATION.md for per-version breaking-change notes and code snippets.

License

MIT