Examples
Each Candle gives a Time and its Open, High, Low and Close values; a candle's body runs from open to close and its wick from low to high.
CandleStyle="Ohlc" draws ticks for the open and close; CandleStyle="HighLow" only the range. UpLabel and DownLabel name the colours in the legend.
Indicators takes ChartIndicator records computed over the closes. Sma is the mean of the last Period closes; Ema uses α = 2 / (Period + 1), seeded with the first SMA; Bollinger draws the SMA ± StdDev population standard deviations. Rsi (Wilder's smoothing, lines at 30 and 70) and Macd (EMA 12 − EMA 26, signal EMA 9, histogram) get a panel each under the candles. Each indicator takes a palette colour other than the rising and falling ones, is named in the legend and shows its value in the candle's tooltip.
Give each Candle a Volume (an init property: new Candle(...) { Volume = 1200 }) and set ShowVolume="true": the volumes are drawn as bars in a panel under the price, on the same time axis, in the period's rising or falling colour. A ChartIndicator's Label renames it in the legend.
CandleStyle="Line" draws the closes as a line and CandleStyle="Area" fills under it; the value axis fits the closes, PriceColor sets the colour and each period's tooltip still gives its four values. Indicators draw over them as usual.
CandleStyle="HeikinAshi" draws candles computed from the periods: close = (O + H + L + C) / 4, open = (previous HA open + previous HA close) / 2 (the first one (O + C) / 2), high and low the extremes of the period's high or low and the HA open and close. Indicators still use the real values.
CandleStyle="EquiVolume" draws a box from low to high and CandleStyle="CandleVolume" a candle, each as wide as its Volume (the largest takes 90% of the space between periods), centred on its time so the time axis reads as usual. When any period has no positive Volume, every mark falls back to the same width.
IndicatorKind.PriceChannel draws the highest high and the lowest low of the last Period periods (default 20, the current one included) as a band, with their midpoint as the line.
Playground
<CandlestickChart
ValueFormat="{0:0.#} %"
Title="CPU utilisation per hour, api-01 (%)"
Candles="@_hours" />
@code {
// Each hour's first, highest, lowest and last CPU reading: a daytime peak and a nightly batch job.
private static readonly Candle[] _hours = Enumerable.Range(0, 24)
.Select(h =>
{
double open = Level(h);
double close = Level(h + 1);
double spread = 4 + (h * 7) % 9;
return new Candle(new DateTime(2026, 10, 19, h, 0, 0), open, Math.Max(open, close) + spread, Math.Min(open, close) - spread / 2, close);
})
.ToArray();
private static double Level(int hour) =>
Math.Round(30 + 28 * Math.Max(0, Math.Sin((hour - 7) / 11.0 * Math.PI)) + (hour is 2 or 3 ? 25 : 0) + (hour * 5) % 6, 1);
}API
<CandlestickChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- CandleStyle CandlestickStyle= CandlestickStyle.Candle
How each period is drawn: a candle (body and wick), an OHLC bar (open and close ticks), a high–low bar, a close price line or area, a Heikin-Ashi candle, or a box (EquiVolume) or candle (CandleVolume) as wide as its volume.
- Candles IReadOnlyList<
Candle> = []The periods. Each has a Time and Open, High, Low and Close values; they are sorted by time.
- CloseLabel string= "Close"
Legend name of the close price in the Line and Area styles.
- DownColor string= "var(--color-error)"
CSS colour of periods that close below their open.
- DownLabel string= "Falling"
Legend name of falling periods.
- Indicators IReadOnlyList<
ChartIndicator> = []Technical indicators computed over the closes: SMA, EMA and Bollinger bands are drawn over the candles, RSI and MACD in a panel each under them. Each takes a palette colour other than the rising and falling ones, is named in the legend and its value at each period shows in the candle's tooltip.
- PriceColor string= "var(--color-base-content)"
CSS colour of the close price line and area (Line, Area).
- RowHeight double?= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
- ShowLegend bool= true
Show the rising/falling legend (and the indicators) under the chart.
- ShowTitle bool= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
- ShowVolume bool= false
Show each period's Volume as bars in a panel under the price, in the rising or falling colour.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- UpColor string= "var(--color-success)"
CSS colour of periods that close at or above their open.
- UpLabel string= "Rising"
Legend name of rising periods.
- ValueFormat string= "{0:#,0.##}"
Format string for values in tooltips, e.g. "{0:0.#} %".
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles appended after the width on the wrapper.