DocumentationNuxt Charts v3

Candlestick Chart

Learn how to implement and customize Candlestick Charts in your Nuxt application.

The CandlestickChart component renders OHLC (open, high, low, close) price action with an optional volume histogram — the standard view for stocks, crypto and other financial time series. New in v3.

Basic Usage

<script lang="ts" setup>
interface Candle {
  label: string;
  open: number;
  high: number;
  low: number;
  close: number;
  volume: number;
}

// Default accessors read label/open/high/low/close/volume — no config needed.
const candles: Candle[] = [
  { label: "Mon", open: 132, high: 138, low: 130, close: 136, volume: 2400 },
  { label: "Tue", open: 136, high: 141, low: 134, close: 139, volume: 3100 },
  { label: "Wed", open: 139, high: 140, low: 131, close: 133, volume: 2900 },
  { label: "Thu", open: 133, high: 135, low: 128, close: 129, volume: 3600 },
  { label: "Fri", open: 129, high: 137, low: 128, close: 136, volume: 4200 },
  { label: "Sat", open: 136, high: 144, low: 135, close: 143, volume: 3900 },
  { label: "Sun", open: 143, high: 147, low: 140, close: 141, volume: 2700 },
];

const usd = (v: number) => `$${v.toFixed(0)}`;
</script>

<template>
  <CandlestickChart
    :data="candles"
    :height="340"
    :y-formatter="usd"
    show-volume
  />
</template>

Props

Prop	Type	Default	Description
`data`	`T[]`	Required	Array of rows. Each row is one candle.
`height`	`number`	Required	Height of the chart in pixels.
`xAccessor`	`keyof T`	`'label'`	Row field used for the x (category) axis label.
`openAccessor`	`keyof T`	`'open'`	Row field for the open price.
`highAccessor`	`keyof T`	`'high'`	Row field for the high price.
`lowAccessor`	`keyof T`	`'low'`	Row field for the low price.
`closeAccessor`	`keyof T`	`'close'`	Row field for the close price.
`volumeAccessor`	`keyof T`	`'volume'`	Optional row field for the traded volume.
`upColor`	`string`	`'#10b981'`	Colour for rising candles (close ≥ open).
`downColor`	`string`	`'#ef4444'`	Colour for falling candles (close < open).
`candleWidth`	`number`	`18`	Max candle body width in pixels.
`wickWidth`	`number`	`1.5`	Wick (high-low line) width in pixels.
`showVolume`	`boolean`	`false`	Draw a volume histogram beneath the candles.
`yFormatter`	`(value: number) => string`	`undefined`	Formats y-axis ticks and tooltip prices.
`xFormatter`	`(index: number) => string`	`undefined`	Formats x-axis (category) ticks. Receives the row index.
`yNumTicks`	`number`	`undefined`	Desired number of y-axis ticks.
`yDomain`	`[number \| undefined, number \| undefined]`	data range	Fixed y-axis domain as `[min, max]`.
`xGridLine`	`boolean`	`false`	Show vertical grid lines.
`yGridLine`	`boolean`	`true`	Show horizontal grid lines.
`hideXAxis`	`boolean`	`false`	If true, hides the x-axis.
`hideYAxis`	`boolean`	`false`	If true, hides the y-axis.
`hideTooltip`	`boolean`	`false`	If true, hides the tooltip.
`tooltip`	`TooltipConfig`	`undefined`	Tooltip configuration.

Data Format

Each object is one candle. With the default accessors, a row shaped like the following works with no extra configuration.

types.ts

interface CandlestickData {
  label: string;
  open: number;
  high: number;
  low: number;
  close: number;
  volume?: number;
}

Funnel Chart

Learn how to implement and customize Funnel Charts in your Nuxt application.

Status Tracker Chart

Learn how to implement and customize Status Tracker Charts in your Nuxt application.