import { Component } from '@angular/core';
import { WrCandlestickChart } from 'ngwr/charts/candlestick-chart';
@Component({ imports: [WrCandlestickChart] })
export class MyComponent {}Candlestick Chart
Prices over time (OHLC): a candle per period, its wick from the low to the high and its body from the open to the close.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic
One candle per period, evenly spaced. The y axis fits the lows and highs and is not forced to zero.
<wr-candlestick-chart ariaLabel="ACME, daily" [data]="days" />days: WrCandlestickDatum[] = [
{ label: 'Jan 2', open: 120.4, high: 122.9, low: 119.8, close: 122.1 },
{ label: 'Jan 5', open: 122.3, high: 123.0, low: 118.6, close: 119.2 },
// …
];Up and down
A rising candle is hollow, a falling one filled, so the fill tells them apart without colour. increaseColor and decreaseColor swap the colours for a market that draws rises in red. The fill stays.
<wr-candlestick-chart
[data]="days"
increaseColor="var(--wr-color-danger)"
decreaseColor="var(--wr-color-success)"
/>Many candles
Bodies narrow with the room they have. Under 4px a rising body is dotted rather than hollow. The labels thin out to what fits.
<wr-candlestick-chart ariaLabel="ACME, 2026" [data]="year" />Number format
Prices follow LOCALE_ID. valueFormat replaces it for the ticks, the tooltip and the data table.
<wr-candlestick-chart [data]="days" [valueFormat]="format" />const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
format = (value: number): string => usd.format(value);Data table
dataTable renders every price as a table only screen readers reach: a row per period. Nothing changes on screen.
<wr-candlestick-chart ariaLabel="ACME, daily" dataTable [data]="days" />Accessibility
| Part | Behaviour |
|---|---|
| Plot | One role="img", named by ariaLabel. No tab stop. |
| Prices | Only in the tooltip, unless dataTable is on. |
| Up and down | Told apart by fill as well as colour: hollow or dotted up, filled down. Every body is drawn tall enough to show its fill, even when the price barely moved. |
| Tooltip | Pointer only. Escape closes it. |
| Forced colours | Candles keep their colours and their fill. |
Very many candles
Past one candle per pixel the candles overlap. Aggregate the periods first: weeks instead of days.
API
| Name | Description | Type | Default |
|---|---|---|---|
data | The periods, oldest first: one evenly spaced slot each. A period whose four prices are not all finite keeps its slot and its label, and draws no candle. | readonly WrCandlestickDatum[] | [] |
ariaLabel | Accessible name of the chart. The prices are nowhere in text unless dataTable puts them there, so say what the chart shows: the instrument and the period. Falls back to candlestickChart.label ("Candlestick chart"). It is also the data table's caption. | string | null | null |
increaseColor | The colour of a rising candle, any CSS colour. null keeps --wr-candlestick-chart-increase-color, which is var(--wr-color-success). A rising candle is hollow whatever its colour. | string | null | null |
decreaseColor | The colour of a falling candle, any CSS colour. null keeps --wr-candlestick-chart-decrease-color, which is var(--wr-color-danger). A falling candle is filled whatever its colour. | string | null | null |
valueFormat | Writes every price the chart shows: the y-axis ticks, the tooltip and the data table. null uses Intl.NumberFormat in LOCALE_ID: compact ticks (1.2K) unless the full numbers are shorter, and in the tooltip and the table every price at the data's own precision — as many fraction digits as the most precise price given, up to ten, and never fewer than the axis step needs — so a forex quote of 1.08345 is not written 1.083. | ((value: number) => string) | null | null |
height | The plot's height in px, at least 80. | number | 240 |
showGrid | Show the gridlines and the y-axis ticks. The period labels under the candles are the time axis, so they stay either way, as the line chart's xLabels do. | boolean | true |
tooltip | Show a tooltip with the period's open, high, low and close under the pointer. Pointer only. | boolean | true |
dataTable | Render every period's prices as a table only assistive technology reaches, beside the drawing: a row per period, headed by its label, and a column each for the open, the high, the low and the close. A price that is not a finite number is an empty cell. The drawing is one named image, so without it the prices are nowhere a screen reader can walk. | boolean | false |
Types
interface WrCandlestickDatum {
label: string;
open: number;
high: number;
low: number;
close: number;
}| Name | Description | Type | Default |
|---|---|---|---|
WrCandlestickDatum | One period and its four prices. | interface | — |
labelrequired | The period, as text. Printed under the candle when there is room. | string | — |
openrequired | The first price: one end of the body. | number | — |
highrequired | The highest price: the top of the wick. | number | — |
lowrequired | The lowest price: the bottom of the wick. | number | — |
closerequired | The last price. At or above open the candle is rising. | number | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/charts/candlestick-chart's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-candlestick-chart-body-border-width | 1px | .wr-candlestick-chart |
--wr-candlestick-chart-body-max-width | 1.5rem | .wr-candlestick-chart |
--wr-candlestick-chart-color | var(--wr-color-on-surface) | .wr-candlestick-chart |
--wr-candlestick-chart-cursor-bg | var(--wr-color-hover) | .wr-candlestick-chart |
--wr-candlestick-chart-decrease-color | var(--wr-color-danger) | .wr-candlestick-chart |
--wr-candlestick-chart-font-family | var(--wr-font-family-base) | .wr-candlestick-chart |
--wr-candlestick-chart-grid-color | color-mix(in srgb, var(--wr-border-base) 70%, transparent) | .wr-candlestick-chart +1 variant override |
--wr-candlestick-chart-increase-color | var(--wr-color-success) | .wr-candlestick-chart |
--wr-candlestick-chart-plot-inset-y | var(--wr-space-sm) | .wr-candlestick-chart |
--wr-candlestick-chart-tick-color | var(--wr-color-on-surface-muted) | .wr-candlestick-chart |
--wr-candlestick-chart-tick-font-size | var(--wr-text-xs) | .wr-candlestick-chart |
--wr-candlestick-chart-tick-gap | var(--wr-space-xs) | .wr-candlestick-chart |
--wr-candlestick-chart-tick-line-height | var(--wr-text-xs-leading) | .wr-candlestick-chart |
--wr-candlestick-chart-wick-width | 1px | .wr-candlestick-chart |
Dependencies
| Built on | Popover |
|---|
See also
Component Line ChartOne or more series of values as lines or as an area chart, overlaid or stacked.Component Box PlotHow the values of several groups are spread: the median, the middle half, the range and the outliers of each, side by side.Component Bar ChartBars for one or several series, grouped or stacked, standing up or lying along a row, with lines over them.Component SparklineA small trend line with no axes, to sit beside a number.Component PopoverShow a template, or a text tooltip, next to its trigger.