Examples
Points built with a date sit on a time axis; Low and High bound the band and Center draws the line. BandLabel and CenterLabel name them in the legend and tooltips.
Points built with a label sit on a category axis; Smooth="false" joins them with straight segments and Color picks the theme colour.
Step draws the band and the center line as steps that hold until the next point; it wins over Smooth, which is on by default.
Playground
<RangeAreaChart
BandLabel="p5–p95"
CenterLabel="Median (p50)"
ValueFormat="{0:N0} ms"
Title="API response time, last 30 days"
Points="@_points" />
@code {
// One point per day: the fastest and slowest 5% bound the band, the median runs through it.
private static readonly RangePoint[] _points = Enumerable.Range(0, 30)
.Select(i =>
{
double median = 120 + 18 * Math.Sin(i / 4.0) + (i % 7 == 5 ? 25 : 0);
return new RangePoint(new DateTime(2026, 9, 20).AddDays(i), Math.Round(median * 0.45), Math.Round(median * 2.4 + (i * 13) % 40), Math.Round(median));
})
.ToArray();
}API
<RangeAreaChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- BandLabel string= "Range"
Name of the band in the legend and tooltips, e.g. "p50–p95".
- CenterLabel string= "Center"
Name of the center line in the legend and tooltips, e.g. "Median".
- Color string= null
CSS colour of the band and line. Defaults to the theme's primary colour.
- Points IReadOnlyList<
RangePoint> = []The points, in order. Each has a Low and High value and an optional Center; points with dates use a time axis, points with labels a category axis.
- 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 a legend naming the band and the center line 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.
- Smooth bool= true
Draw the band and the center line as smooth curves (monotone, so they never overshoot the data).
- Step bool= false
Draw the band and the center line as steps (step-after: each value holds until the next point). Step wins over Smooth, which is on by default.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- ValueFormat string= "{0:#,0.##}"
Format string for values in tooltips, e.g. "{0:N0} ms".
- 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.