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

Quick Start

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

const props = defineProps(['data']);
</script>

<template>
  <ChartContainer>
    <CandlestickSeries :data="props.data" />
    <Tooltip />
    <Crosshair />
    <YAxis />
    <TimeAxis />
  </ChartContainer>
</template>

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, …).

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