Examples
Each ChartSeries is a layer; Dates put its values on a time axis. The default Wiggle offset centres the stream, and each layer is named where it is thick enough.
Offset="Percent" shows each layer's share of the total; Offset="Stacked" stacks the values on a zero baseline with a value axis. Labels put the values on a category axis.
Playground
<StreamChart
ValueFormat="{0:N0} users"
Title="Weekly active users by product area"
Series="@_series"
Dates="@_weeks" />
@code {
private static readonly DateTime[] _weeks = Enumerable.Range(0, 16).Select(i => new DateTime(2026, 6, 29).AddDays(7 * i)).ToArray();
private static ChartSeries Area(string name, double start, double growth, double swing, int phase) =>
new(name, _weeks.Select((_, i) => Math.Round(start + growth * i + swing * Math.Sin((i + phase) / 2.2))).ToArray());
private readonly ChartSeries[] _series =
[
Area("Dashboards", 4200, 60, 500, 0),
Area("API", 2600, 140, 300, 3),
Area("Alerts", 1500, 20, 650, 6),
Area("Integrations", 900, 90, 200, 1),
Area("Reports", 1200, -30, 350, 4),
];
}API
<StreamChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- Dates IReadOnlyList<
DateTime> = nullThe date of each position, in order, for a time axis. When null or shorter than the data, Labels are used instead.
- Labels IReadOnlyList<
string> = nullThe label of each position, for a category axis (when Dates is not set).
- Offset StreamOffset= StreamOffset.Wiggle
How the layers stack: a streamgraph (Wiggle, no value axis), a plain stacked area (Stacked) or shares of 100% (Percent).
- 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.
- Series IReadOnlyList<
ChartSeries> = []The layers. Each series' Data[i] is its value at Dates[i] (or Labels[i]); missing or negative values count as 0.
- ShowLabels bool= true
Write each series' name inside its layer, where the layer is thick enough.
- ShowLegend bool= true
Show a legend with a key per series 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.
- ValueFormat string= "{0:#,0.##}"
Format string for values in tooltips, e.g. "{0:N0} users".
- 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.