Charts

TwCandlestickChart

TwCandlestickChart is a Blazor candlestick chart showing the open, high, low and close of each period. Also draws OHLC charts.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

TwCandlestickChart draws, for each ChartOhlc period, a body between the open and the close and a wick reaching the high and the low. Rising and falling periods differ by color, and the legend and tooltips name the direction.

Share pricePounds

Rising
Falling

RAZOR

<TwChart Title="Share price" Description="Pounds">
    <TwCandlestickChart Items="@_prices" />
</TwChart>

CSHARP

@code {
    private readonly ChartOhlc[] _prices =
    [
        new("Jan 02", 102.00, 103.76, 101.42, 103.40),
        new("Jan 03", 104.68, 105.31, 102.88, 104.80),
        new("Jan 06", 104.80, 105.27, 102.54, 103.10),
        new("Jan 07", 103.10, 106.24, 102.76, 105.60),
        new("Jan 08", 101.90, 109.20, 101.20, 107.20),
        new("Jan 09", 107.20, 107.91, 104.48, 105.30),
        new("Jan 10", 105.95, 107.30, 103.70, 106.10),
        new("Jan 13", 106.10, 109.23, 105.72, 108.40),
        new("Jan 14", 108.40, 109.08, 106.12, 107.00),
        new("Jan 15", 108.00, 108.80, 101.50, 104.10),
        new("Jan 16", 104.10, 104.87, 101.98, 102.80),
        new("Jan 17", 102.80, 104.23, 102.16, 103.70),
        new("Jan 20", 103.70, 104.08, 100.94, 101.90),
        new("Jan 21", 104.80, 105.60, 98.10, 99.50),
        new("Jan 22", 99.50, 101.16, 98.91, 100.70),
        new("Jan 23", 100.70, 101.24, 97.36, 98.20),
        new("Jan 24", 98.20, 98.63, 95.71, 96.40),
        new("Jan 27", 96.40, 103.90, 94.10, 98.60),
        new("Jan 28", 98.60, 99.03, 94.62, 95.70),
        new("Jan 29", 95.70, 96.12, 92.34, 93.10),
        new("Jan 30", 94.65, 96.30, 90.70, 94.80),
        new("Jan 31", 94.80, 95.04, 91.63, 92.40),
        new("Feb 03", 92.40, 98.80, 87.90, 95.60),
        new("Feb 04", 95.60, 98.91, 95.18, 98.30),
        new("Feb 05", 98.30, 98.76, 96.21, 96.90),
        new("Feb 06", 93.20, 101.50, 92.60, 99.70),
        new("Feb 07", 99.70, 103.18, 99.12, 102.50),
        new("Feb 10", 105.80, 106.50, 98.10, 100.20),
        new("Feb 11", 100.20, 100.63, 96.84, 97.60),
        new("Feb 12", 99.02, 101.40, 95.70, 99.10),
        new("Feb 13", 99.10, 102.74, 98.67, 101.80),
        new("Feb 14", 101.80, 105.28, 101.31, 104.60),
        new("Feb 17", 104.60, 105.13, 101.74, 102.70),
        new("Feb 18", 102.70, 106.02, 102.18, 105.30),
        new("Feb 19", 100.80, 109.40, 99.30, 107.90),
        new("Feb 20", 107.90, 108.31, 104.38, 105.20),
        new("Feb 21", 108.40, 109.10, 99.20, 102.60),
        new("Feb 24", 102.60, 103.02, 99.61, 100.40),
        new("Feb 25", 100.40, 101.18, 97.83, 98.70),
        new("Feb 26", 98.70, 103.00, 91.10, 96.10),
        new("Feb 27", 96.10, 99.06, 95.77, 98.40),
        new("Feb 28", 98.40, 102.13, 98.02, 101.20),
        new("Mar 03", 99.35, 106.10, 97.10, 99.30),
        new("Mar 04", 99.30, 103.17, 98.85, 102.50),
        new("Mar 05", 102.50, 106.24, 101.93, 105.60),
        new("Mar 06", 105.60, 109.08, 105.14, 108.20),
        new("Mar 07", 108.20, 108.74, 104.86, 106.30),
        new("Mar 10", 101.90, 112.50, 101.20, 109.70),
        new("Mar 11", 109.70, 113.28, 109.21, 112.40),
        new("Mar 12", 113.80, 114.50, 106.40, 110.10),
        new("Mar 13", 110.10, 110.72, 106.24, 107.60),
        new("Mar 14", 107.60, 108.13, 103.48, 104.80),
        new("Mar 17", 108.70, 109.40, 100.20, 102.90),
        new("Mar 18", 102.90, 106.18, 102.37, 105.70),
        new("Mar 19", 105.70, 109.27, 105.16, 108.60),
        new("Mar 20", 106.85, 112.20, 104.10, 106.80),
        new("Mar 21", 106.80, 110.83, 106.31, 110.20),
        new("Mar 24", 110.20, 117.00, 107.00, 113.10),
        new("Mar 25", 113.10, 113.58, 109.84, 111.40),
        new("Mar 26", 111.40, 115.73, 110.96, 115.20)
    ];
}

OHLC

Set Kind to CandlestickStyle.Ohlc to draw a tick for the open on the left and the close on the right instead of a body.

Share price

Rising
Falling

RAZOR

<TwChart Title="Share price">
    <TwCandlestickChart Items="@_prices" Kind="CandlestickStyle.Ohlc" />
</TwChart>

Labels and format

RisingLabel and FallingLabel rename the directions, and ValueFormat formats the prices.

Share price

Up
Down

RAZOR

<TwChart Title="Share price">
    <TwCandlestickChart Items="@_prices" RisingLabel="Up" FallingLabel="Down" ValueFormat="C2" LabelHeader="Day" />
</TwChart>

Summary

Tooltips and the table view give the open, high, low and close of each period.

Shared features

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.

TwCandlestickChart

Basic usage

OHLC

Labels and format

Summary

Shared features

Keyboard navigation