Examples
Prices takes Candle records (only the closes build the chart). ChartKind="Renko" draws a brick of BoxSize each time a close is a whole box past the last brick, so a trend goes on after one box and reverses after two. Without a BoxSize, the brick is the average true range over AtrPeriod (14) periods.
ChartKind="Kagi" draws a line that goes on while closes extend it and turns when one comes back by Reversal (in value units, or a percentage of the line's end with ReversalPercent). The line turns thick (yang) where it rises above the previous shoulder and thin (yin) where it falls below the previous waist.
ChartKind="LineBreak" draws a new line each time a close passes the last line's top or bottom; a line against the trend must also pass the extreme of the last Lines lines (3 by default).
ChartKind="PointAndFigure" stacks X boxes of BoxSize while closes rise and O boxes while they fall; a column turns when a close is Reversal boxes (3 by default) past its end, starting one box away from it.
Playground
<PriceActionChart
BoxSize="5"
ValueFormat="{0:0.#} %"
Title="CPU utilisation, api-01 (%): 5-point bricks"
AspectRatio="2.4"
Prices="@_readings" />
@code {
// 96 quarter-hour CPU readings. A brick is drawn each time the reading moves a whole box past the
// last brick; noise inside a box draws nothing, so the x axis counts bricks, not time.
private static readonly Candle[] _readings = Enumerable.Range(0, 96)
.Select(i =>
{
double open = Level(i), close = Level(i + 1);
return new Candle(new DateTime(2026, 10, 19, 0, 0, 0).AddMinutes(15 * i), open, Math.Max(open, close) + 2, Math.Min(open, close) - 2, close);
})
.ToArray();
private static double Level(int i) =>
Math.Round(40 + 16 * Math.Sin((i - 24) / 96.0 * 2 * Math.PI) + (i is >= 44 and <= 54 ? 20 * Math.Sin((i - 44) / 10.0 * Math.PI) : 0) + 3 * Math.Sin(i * 1.7), 1);
}API
<PriceActionChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- AtrPeriod int= 14
Periods of the average true range used when BoxSize (or Kagi's Reversal) is not given.
- BoxSize double?= null
Size of a Renko brick or a point & figure box, in price units. Null (or 0) takes the average true range over AtrPeriod periods at the last price. A box so small it would draw more than 2,000 boxes is enlarged to draw 2,000.
- ChartKind PriceActionKind= PriceActionKind.Renko
Which chart to draw: Renko bricks, Kagi lines, line break lines or point & figure columns.
- DownColor string= "var(--color-error)"
CSS colour of falling bricks, lines and O columns, and of Kagi's thin (yin) lines.
- DownLabel string= null
Legend name of the falling colour (Kagi: of thin yin lines).
- Lines int= 3
Line break: how many lines a reversal must pass (3 for the usual three-line break).
- Prices IReadOnlyList<
Candle> = []The prices, sorted by time. Only the closes build the chart; the highs and lows set the automatic box (ATR). For a series of single values use new Candle(time, v, v, v, v).
- Reversal double?= null
Kagi: how far a close must come back from a line's end to turn it, in price units (or a percentage of the end with ReversalPercent); null takes the average true range, or 4 % with ReversalPercent. Point & figure: the boxes a reversal needs; null takes 3.
- ReversalPercent bool= false
Read Kagi's Reversal as a percentage of the line's end.
- 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 legend 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.
- 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 rising bricks, lines and X columns, and of Kagi's thick (yang) lines.
- UpLabel string= null
Legend name of the rising colour (Kagi: of thick yang lines).
- ValueFormat string= "{0:#,0.##}"
Format string for prices in tooltips and the description, 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.