Candlestick

Basic setup

<script setup lang="ts">
import { aggregateCandles } from "livecharts/data";
import { LiveChart } from "livecharts/vue";
import { computed, ref } from "vue";

const width = 60; // seconds per candle
const mode = ref<"line" | "candle">("line");
const ticks = ref(/* your tick history */);

const bucket = computed(() => aggregateCandles(ticks.value, width));
</script>

<template>
  <LiveChart
    :data="ticks"
    :value="ticks.at(-1)?.value ?? 0"
    :mode="mode"
    :candles="bucket.candles"
    :live-candle="bucket.live ?? undefined"
    :candle-width="width"
    :momentum="mode === 'line'"
    @mode-change="(m) => (mode = m)"
  />
</template>

Live preview uses the shared engine via React bindings; copy the Vue snippet above.

Same data, two views. The toggle morphs between line and candlestick.

Props / events

Prop / event	Type	Role
`mode`	`"line" \| "candle"`	Active view; drives morph
`candles`	`CandlePoint[]`	Closed candles
`liveCandle`	`CandlePoint`	Forming candle (wicks update live)
`candleWidth`	`number`	Bucket width in seconds
`@mode-change`	`(mode) => void`	Fired by the built-in mode toggle

When candle data is present and you listen for @mode-change, LiveCharts shows a line / candle control. Prefer controlled mode — morph follows mode === "line" (no lineMode prop needed).

aggregateCandles

import { aggregateCandles } from "livecharts/data";

const { candles, live } = aggregateCandles(ticks, 60);
// candles — completed buckets
// live — current open bucket, or null

Prefer this helper over hand-rolled OHLC loops so buckets stay MECE and aligned to candleWidth.

Deprecated aliases

Prop	Status
`lineMode`	Deprecated — prefer `mode` / `@mode-change`
`lineData` / `lineValue`	Legacy overrides; use `data` / `value`

Alternative: LiveChartTransition

If you prefer two separate chart instances with a cross-fade instead of the built-in morph, use LiveChartTransition.