Candlestick Chart ^0.1.15

OHLC candle chart for financial data. Green candles when close ≥ open, red otherwise. Supports volume bars underneath.

Basic

<script setup>
import { VxCandlestickChart } from 'veloxui'

const data = [
  { t: 'Mon', o: 100, h: 108, l: 98,  c: 104 },
  { t: 'Tue', o: 104, h: 112, l: 103, c: 110 },
  // ...
]
</script>

<template>
  <VxCandlestickChart :data="data" :height="320" />
</template>

With volumes ^0.1.15

Pass a volumes array (aligned with data) to render volume bars below the candles. Volume bars are colored by the candle's direction.

<VxCandlestickChart
  :data="ohlc"
  :volumes="[42, 58, 36, 28, 74, 52, 44, 30, 38, 66, 48, 52, 62, 40]"
  :volume-height="70"
/>

Custom colors

<VxCandlestickChart :data="data" upColor="#06b6d4" downColor="#f97316" />

Wider candles (smaller gap)

<VxCandlestickChart :data="data" :candle-gap="0.08" />

Compact layout

<VxCandlestickChart :data="data" :height="220" :y-ticks="3" :wick-width="0.8" />

Larger dataset (40 bars + volume)

Trading dashboard

BTC / USD

$122.00

▲ 2.48 (+2.07%) today

1D2W1M

API

Data shape

interface Candle {
  t: string | number   // time / label
  o: number            // open
  h: number            // high
  l: number            // low
  c: number            // close
}

Props

Prop	Type	Default	Description
data	Candle[]	[]	OHLC data
height	number	320	Chart height
upColor	string	#22c55e	Color when c ≥ o
downColor	string	#ef4444	Color when c < o
wickWidth	number	1.2	Wick stroke width
candleGap	number	0.25	Gap ratio (0..1) between candles
volumes	number[]	[]	Volume per candle (aligned with data)
volumeHeight	number	60	Height of volume panel in px
volumeOpacity	number	0.5	Volume bar opacity
grid	boolean	true	Horizontal grid
axis	boolean	true	Axis labels
tooltip	boolean	true	Hover OHLC tooltip
animate	boolean	true	Pop-in animation
animationDuration	number	700	Animation duration
yTicks	number	5	Y-axis tick count
min / max	number	auto	Force price bounds
formatValue	(v) => string	abbreviates 1.2k	Price formatter

Events

Event	Payload
hover	{ index, candle }
click	{ index, candle }