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   # React
npm install @wick-charts/vue     # Vue
npm install @wick-charts/svelte  # Svelte

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>
  );
}

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

<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:

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):

Migration

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

License

MIT