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/svelte

Quick Start

<script>
  import {
    ChartContainer, CandlestickSeries, Tooltip,
    Crosshair, YAxis, TimeAxis
  } from '@wick-charts/svelte';

  export let data = [];
</script>

<ChartContainer>
  <CandlestickSeries {data} />
  <Tooltip />
  <Crosshair />
  <YAxis />
  <TimeAxis />
</ChartContainer>

API

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

wick-charts.eeff.io/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, …).

No framework? Use the engine directly

ChartInstance and every series/theme/painter has no framework dependency — it's a plain canvas engine that each of @wick-charts/react, @wick-charts/vue, and @wick-charts/svelte bundles and re-exports in full. Any one of them is a supported vanilla entry point; you don't need React/Vue/Svelte installed to use it this way (sideEffects: false + per-module ESM means the framework-specific components tree-shake out when unused):

import { CandlestickSeriesDef, ChartInstance, registerBuiltinSeries } from '@wick-charts/react';

registerBuiltinSeries();
const chart = new ChartInstance(document.getElementById('chart')!);
const seriesId = chart.addSeries(CandlestickSeriesDef, {});
chart.setSeriesData(seriesId, data);

There's no separate @wick-charts/core package on npm — the three framework packages are the supported way to install the engine.

Bundle size

Packages ship per-module ESM with sideEffects: false, and each series component carries its own renderer — your bundler only ships the chart types you import.

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

| Scenario | Raw | Gzip | Brotli | |---|---:|---:|---:| | Candlestick only | 83.3 kB | 25.9 kB | 22.9 kB | | Line only | 91.3 kB | 28.3 kB | 25.0 kB | | Full React | 180.3 kB | 55.5 kB | 47.1 kB |

Migration

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

License

MIT