Examples
One smoothed series with the area filled; points stay off by default for a clean silhouette.
Fills are translucent so overlapping series stay readable; turn ShowPoints on to mark each value.
Stacked draws each series on top of the running total, so the bands add up to the whole and the fills never mix; tooltips still show each series' own value.
Percent stacks the series to 100% at every label, so the fills show each one's share; tooltips show the value and the share.
Horizontal turns the chart so the labels run down the side and the areas fill from the left; here also Stacked and Step. References and Bands work as on LineChart.
Playground
<AreaChart
Smooth="true"
Title="API requests, 2025–2026 (millions)"
Labels="@_quarters"
Series="@_requests" />
@code {
private readonly string[] _quarters = ["Q1", "Q2", "Q3", "Q4", "Q1", "Q2", "Q3"];
private readonly ChartSeries[] _requests =
[
new("Requests", [118, 132, 127, 204, 141, 163, 176]),
];
}API
<AreaChart>
DaisyBlazor.ChartsParameters
- Bands IReadOnlyList<
ChartBand> = nullShaded value ranges (plot bands) drawn behind the areas, each with an optional label.
- Height string= "16rem"
CSS height of the SVG plot area.
- Horizontal bool= false
Rotate the chart: the labels run down the vertical axis and the values along the horizontal one, the areas filling from the left. Works with Smooth, Step, Stacked and Percent.
- Labels IReadOnlyList<
string> = nullX-axis category labels (index-aligned with each series' values).
- Markers IReadOnlyList<
ChartMarker> = nullMarkers on the category axis: a line at a category, or a shaded span over categories, each with an optional label (see Markers).
- Percent bool= false
100% stacked areas (implies Stacked): each fill shows its share of the total at its index, on a percent axis. Negative or missing values count as 0. Tooltips show the value and the share.
- References IReadOnlyList<
ChartReference> = nullReference lines across the plot at a value, drawn over the areas with their label inside the plot; the value axis grows to show them.
- Series IReadOnlyList<
ChartSeries> = []One or more named series to plot.
- ShowGrid bool= true
Draw horizontal gridlines and value labels.
- ShowLegend bool= true
Show a legend when more than one series is present.
- ShowPoints bool= false
Draw a marker at each data point.
- 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= false
Smooth the line with cubic curves instead of straight segments.
- Stacked bool= false
Stack the series so each fill sits on top of the previous ones instead of overlapping, for part-of-whole data. Fills are near-opaque so they match the legend swatches.
- Step bool= false
Draw the line and the fill as steps (step-after: each value holds until the next one). If both Step and Smooth are set, Step wins.
- Title string= null
Optional heading rendered above the chart.
- Trendline ChartTrendline= ChartTrendline.None
Fit and draw a dashed trend line per series, over the category index (0, 1, …) on the series' own values, through the category positions (also when Horizontal); its tooltip gives the equation and R², or the period of a moving average. Ignored when Stacked or Percent is on: a fit of the own values would not follow the stacked areas.
- TrendlineOrder int= 2
Degree of a Polynomial trend line, from 2 to 6 (other values are clamped).
- TrendlinePeriod int= 3
Number of points a MovingAverage trend line averages (at least 2).
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Extra CSS classes forwarded to the underlying LineChart.
- Style string= null
Inline CSS styles forwarded to the underlying LineChart.
<LineChart>
DaisyBlazor.ChartsParameters
- Area bool= false
Fill the area under each line.
- Bands IReadOnlyList<
ChartBand> = nullShaded value ranges (plot bands) drawn behind the data, cut to the plot, each with an optional label in its corner.
- Height string= "16rem"
CSS height of the SVG plot area.
- Horizontal bool= false
Rotate the chart: the labels run down the vertical axis and the values along the horizontal one, each line reading top to bottom. Works with every other option (Smooth, Step, Stacked, Percent, Area); a step then holds its value down to the next label.
- Labels IReadOnlyList<
string> = nullX-axis category labels (index-aligned with each series' values).
- Markers IReadOnlyList<
ChartMarker> = nullMarkers on the category axis: a line at a category (the month a pricing change shipped), or with To a shaded span over a run of categories, each with an optional label outside the plot. They run across the chart when it is Horizontal. A marker naming a category the chart does not have is ignored.
- Percent bool= false
100% stacked lines (implies Stacked): each value is drawn as its share of the total at its index, on a percent axis. Negative or missing values count as 0. Tooltips show the value and the share.
- References IReadOnlyList<
ChartReference> = nullReference lines across the plot at a value (a target, a limit, a break-even point), drawn over the data with their label inside the plot. The value axis grows to show every line.
- Series IReadOnlyList<
ChartSeries> = []One or more named series to plot.
- ShowGrid bool= true
Draw value gridlines and value labels.
- ShowLegend bool= true
Show a legend when more than one series is present.
- ShowPoints bool= true
Draw a marker at each data point.
- 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= false
Smooth the line with cubic curves instead of straight segments.
- Stacked bool= false
Stack the series: each one is drawn on top of the running total of the previous ones, and with Area each fill spans only its own band. Missing or non-finite values count as 0; tooltips still show each series' own value.
- Step bool= false
Draw the line as steps (step-after: each value holds until the next one). If both Step and Smooth are set, Step wins.
- Title string= null
Optional heading rendered above the chart.
- Trendline ChartTrendline= ChartTrendline.None
Fit and draw a dashed trend line per series, over the category index (0, 1, …) on the series' own values, through the category positions (also when Horizontal); its tooltip gives the equation and R², or the period of a moving average. Ignored when Stacked or Percent is on: a fit of the own values would not follow the stacked points.
- TrendlineOrder int= 2
Degree of a Polynomial trend line, from 2 to 6 (other values are clamped).
- TrendlinePeriod int= 3
Number of points a MovingAverage trend line averages (at least 2).
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Extra CSS classes merged onto the chart wrapper.
- Style string= null
Inline CSS styles appended to the chart wrapper after the width.