# 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.

Source: https://ngwr.dev/charts/candlestick-chart  
Added in v15.1

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrCandlestickChart } from 'ngwr/charts/candlestick-chart';

@Component({ imports: [WrCandlestickChart] })
export class MyComponent {}
```

```scss
@use 'ngwr/charts/candlestick-chart';
```

## Basic

One candle per period, evenly spaced. The y axis fits the lows and highs and is not forced to zero.

```angular-html
<wr-candlestick-chart ariaLabel="ACME, daily" [data]="days" />
```

```angular-ts
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.

```angular-html
<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.

```angular-html
<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.

```angular-html
<wr-candlestick-chart [data]="days" [valueFormat]="format" />
```

```angular-ts
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.

```angular-html
<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

```angular-ts
interface WrCandlestickDatum {
  label: string;
  open: number;
  high: number;
  low: number;
  close: number;
}
```

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `WrCandlestickDatum` | One period and its four prices. | `interface` | — |
| `label`required | The period, as text. Printed under the candle when there is room. | `string` | — |
| `open`required | The first price: one end of the body. | `number` | — |
| `high`required | The highest price: the top of the wick. | `number` | — |
| `low`required | The lowest price: the bottom of the wick. | `number` | — |
| `close`required | 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](https://ngwr.dev/reference/components/popover) |
| --- | --- |

## See also

- [Line Chart](https://ngwr.dev/charts/line-chart) — One or more series of values as lines or as an area chart, overlaid or stacked.
- [Box Plot](https://ngwr.dev/charts/boxplot-chart) — How the values of several groups are spread: the median, the middle half, the range and the outliers of each, side by side.
- [Bar Chart](https://ngwr.dev/charts/bar-chart) — Bars for one or several series, grouped or stacked, standing up or lying along a row, with lines over them.
- [Sparkline](https://ngwr.dev/charts/sparkline) — A small trend line with no axes, to sit beside a number.
- [Popover](https://ngwr.dev/reference/components/popover) — Show a template, or a text tooltip, next to its trigger.