Candlestick Chart

Stock candlesticks with volume and moving averages. Pro · Charts and analytics › Trends

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add candlestick-chart

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { CandlestickChart } from 'valyro-ui-pro';

Prop	Type	Default
`data` *	`CandlestickDatum[]`		One candle per period, oldest first. Gaps between dates (weekends) take no space.
`height`	`number`	`320`	Total height in px including the volume pane; width follows the container. Default 320.
`showVolume`	`boolean`		Volume bars under the candles. Default: shown when the data has volumes.
`movingAverages`	`number[]`	`[]`	Periods of simple moving averages of the close drawn over the candles, e.g. `[20, 50]`.
`valueFormatter`	`ValueFormatter`		Formats prices in the tooltip, the crosshair tag and the data table. Axis ticks keep its units, without spare decimals ("$210").
`tickFormatter`	`ValueFormatter`		Formats the price-axis ticks instead of the shortened `valueFormatter`.
`volumeFormatter`	`ValueFormatter`		Formats volumes. Default: compact numbers.
`dateFormatter`	`(date: Date) => string`		Formats the date of a candle in the tooltip and data table. Default: medium date (with time for intraday data).
`locale`	`string`		BCP 47 locale for the default number and date formatting. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<CandlestickChartLabels>`		Overrides for the built-in strings.
`showGrid`	`boolean`	`true`	Grid lines at the price ticks and at the labelled dates.
`loading`	`boolean`	`false`	Shows a placeholder of the same height while data loads.
`ariaLabel` *	`string`		Accessible name of the chart (also the caption of its sr-only data table).

Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Donut Chart — Donut charts
Treemap — Hierarchies as areas, with drill-down
Funnel Chart — Conversion funnels
Sankey Chart — Flow diagrams between stages
Radar Chart — Radar charts for comparing profiles
Heatmap — Heatmaps