Candlestick Chart

OHLCV candlestick chart for financial price data with an optional volume panel.

Import

ts 
import CandlestickChart from '$lib/components/CandlestickChart.svelte';

Usage

Pass an array of candle objects with open, high, low, and close values. Add volume for the volume panel.

svelte 
<script lang="ts">
  const candles = [
    { date: '2024-10-01', open: 185.20, high: 188.50, low: 183.10, close: 187.30, volume: 12500000 },
    { date: '2024-10-02', open: 187.30, high: 190.80, low: 186.00, close: 189.90, volume: 9800000 },
    // ...30 candles total
  ];
</script>

<CandlestickChart {candles} />

Without Volume

Hide the volume bars by setting volume=false.

svelte 
<CandlestickChart {candles} :volume="false" />

Without Grid

svelte 
<CandlestickChart {candles} :grid="false" />

Custom Height

svelte 
<CandlestickChart {candles} :height="240" />

API Reference

PropTypeDefaultDescription
candles Candle[]—Array of OHLCV candle objects. Each: { date: string, open, high, low, close: number, volume?: number }.
height number320Total chart height in pixels (includes volume panel if shown).
volume booleantrueShow the volume bar panel beneath the price chart.
grid booleantrueShow horizontal price grid lines.
class string—Extra CSS classes applied to the root element.