@wick-charts/vue

Wick Charts

Realtime, animated charts for React, Vue and Svelte. Canvas-rendered, tree-shakeable, zero runtime dependencies.

Live demo · Documentation · License

Why Wick Charts

• 8+ chart types: candlestick, line, bar, heatmap, pie and more, or draw your own
• Real-time streaming — append/update at 60fps with coordinated animations
• Themes — built-in themes, createTheme() for your own palette, and a theme editor
• 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
• TypeScript-first — type definitions ship with every package
• Zero runtime dependencies — just your framework
• Always free and open — MIT licensed

Install

npm install @wick-charts/react   # React
npm install @wick-charts/vue     # Vue
npm install @wick-charts/svelte  # Svelte
npm install @wick-charts/nuxt    # Nuxt module

Quick start

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

export function Chart({ data }: { data: OHLCInput[] }) {
  return (
    <ChartContainer>
      <CandlestickSeries data={data} />
      <Tooltip />
      <Crosshair />
      <YAxis />
      <TimeAxis />
    </ChartContainer>
  );
}

<script setup lang="ts">
import {
  ChartContainer, CandlestickSeries, Tooltip,
  Crosshair, YAxis, TimeAxis, type OHLCInput
} from '@wick-charts/vue';

defineProps<{ data: OHLCInput[] }>();
</script>

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

<script lang="ts">
  import {
    ChartContainer, CandlestickSeries, Tooltip,
    Crosshair, YAxis, TimeAxis, type OHLCInput
  } from '@wick-charts/svelte';

  let { data }: { data: OHLCInput[] } = $props();
</script>

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

ChartContainer fills its parent (width and height are 100%), so give the parent a height. The container also has a 240px min-height, so a parent with no height still shows a chart. For a smaller chart, such as a sparkline in a table row, set min-height: 0 (minHeight: 0 in React) in the container's style.

Each chart page listed below has a Code tab next to its controls: copy, paste, ship.

Live data

When the data changes, pass a new array to data. The series compares it with the previous array: a changed last point eases to its new value, a few new points are appended, anything else replaces the data. The Realtime Data guide shows both this and the imperative appendData / updateData calls.

• React: setData((prev) => [...prev, point]). An array changed in place keeps its reference, so the series does not see the change.
• Vue: keep large datasets in a shallowRef and assign a new array: data.value = [...data.value, point]. A deep ref wraps every point in a proxy. triggerRef after an in-place push does not reach the chart.
• Svelte 5: keep chart data in $state.raw (or a store) and assign a new array: data = [...data, point]. With a deep $state, the chart reads every point through a proxy, and a large dataset (100k+ points) blocks the main thread for seconds instead of milliseconds. On Svelte 4, assign a new array the same way.

Chart types

• Candlestick · Order book
• Line & Area · Band · Bar
• Pie & Donut · Heatmap · Gauge & Radial
• Sparkline

Put them on numeric or category X axes or a secondary Y scale, sync several charts, stream them in real time, or draw your own.

shadcn/ui

A shadcn/ui registry adds Wick Charts to a shadcn project as source files you own: a theme hook that reads your CSS variables, a WickChart wrapper, and chart blocks in shadcn Cards. Add an item with the shadcn CLI:

npx shadcn@latest add @wick-charts/chart-line-live

The shadcn/ui page shows every block live, with its install command and a usage example.

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, type OHLCInput } from '@wick-charts/react';

const el = document.getElementById('chart');
if (!el) throw new Error('No #chart element');

const data: OHLCInput[] = [
  { time: Date.now() - 60_000, open: 100, high: 104, low: 98, close: 103 },
  { time: Date.now(), open: 103, high: 107, low: 101, close: 102 },
];

const chart = new ChartInstance(el);
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.

Drop-in <script> — no build step

For a CodePen, JSFiddle, or a plain HTML page, load the prebuilt UMD bundle from a CDN — no npm, no bundler. It exposes the whole engine (every ChartInstance, series def, theme, and painter) as a WickCharts global:

<div id="chart" style="width: 640px; height: 320px"></div>

<script src="https://cdn.jsdelivr.net/npm/@wick-charts/react/dist/wick-charts.umd.min.js"></script>
<script>
  const { ChartInstance, LineSeriesDef } = WickCharts;

  const chart = new ChartInstance(document.getElementById('chart'));
  const id = chart.addSeries(LineSeriesDef);
  chart.setLayerColors(id, ['#22c55e']);
  chart.setSeriesData(id, [
    { time: Date.now() - 2 * 86_400_000, value: 100 },
    { time: Date.now() - 86_400_000, value: 118 },
    { time: Date.now(), value: 109 },
  ]);
</script>

The same file is on unpkg (https://unpkg.com/@wick-charts/react/dist/wick-charts.umd.min.js); pin a version with @x.y.z for production. ~96 kB gzipped, self-contained.

Bundle size: ship only what you use

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

Measure performance

Pass perfHud() to the perf prop to put a small FPS panel on the chart. Click the panel to see frame times, draw calls and the render time of each series.

import { ChartContainer, perfHud } from '@wick-charts/react';

<ChartContainer perf={perfHud()}>
  {/* series and overlays */}
</ChartContainer>

<script setup lang="ts">
import { ChartContainer, perfHud } from '@wick-charts/vue';

const hud = perfHud();
</script>

<template>
  <ChartContainer :perf="hud">
    <!-- series and overlays -->
  </ChartContainer>
</template>

<script lang="ts">
  import { ChartContainer, perfHud } from '@wick-charts/svelte';
</script>

<ChartContainer perf={perfHud()}>
  <!-- series and overlays -->
</ChartContainer>

The chart reads perf once, when it mounts. The perf code is in your bundle only if you import perfHud. To collect the numbers without the panel, pass a PerfMonitor instead and read them with monitor.onFrame((stats) => …).

Documentation

Every component, prop, type, and slot context lives in the docs site. Start at ChartContainer, then pick a series or an overlay in the sidebar.

Migration

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

Contributing

Bug reports, feature requests and pull requests are welcome. Open an issue first for anything larger than a small fix, so we can agree on the approach.

pnpm install
pnpm dev         # docs site with every chart type at http://localhost:5173
pnpm test        # unit and integration tests
pnpm lint        # Biome
pnpm typecheck

A pull request should pass pnpm test, pnpm lint and pnpm typecheck, and add a test for each bug fix.

License

MIT — always free and open.