Examples
A list of ChartDataPoint, one bar per label.
Labels name the groups; each ChartSeries adds one bar per group and a legend entry.
Horizontal flips the axes so categories read down the side; the label gutter grows with the names up to 40% of the width, and longer names are cut with an ellipsis.
Stacked puts the series in one bar per label; positive values stack up from zero and negative ones down, so mixed signs diverge. Tooltips keep each series' own value.
Percent stacks each bar to 100% of its total, here horizontal; tooltips show the value and the share.
Give each ChartSeries a Stack name: series with the same name stack together and the stacks stand side by side in each label.
Give a point any CSS colour; ChartPalette.FromColor maps a Color value to its theme token.
References draws a line across the bars at a value (a target, a limit) and Bands shades a value range behind them; on a Horizontal chart both run down the plot.
Trendline fits a dashed trend to each series over the categories and draws it through their centres, also on a Horizontal chart; the same kinds as LineChart, here Linear. Hover it for the equation and R². Ignored when Stacked or Percent.
Playground
<BarChart Title="Accounts by plan, 2026" Data="@_accounts" />
@code {
private readonly ChartDataPoint[] _accounts =
[
new("Free", 48_200),
new("Pro", 39_900),
new("Team", 21_100),
new("Enterprise", 8_300),
];
}API
<BarChart>
DaisyBlazor.ChartsParameters
- Bands IReadOnlyList<
ChartBand> = nullShaded value ranges (plot bands) drawn behind the bars, cut to the plot, each with an optional label in its corner.
- Data IReadOnlyList<
ChartDataPoint> = nullFlat data points; used when no Series are supplied.
- Height string= "16rem"
CSS height of the SVG plot area.
- Horizontal bool= false
Render bars horizontally instead of vertically.
- Labels IReadOnlyList<
string> = nullCategory labels for grouped Series mode (index-aligned with 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 bars (implies Stacked): each bar shows the shares of its stack's total (of absolute values) in the category, on a percent axis. Tooltips show the value and the share. Meant for grouped Series; a flat list fills every bar.
- References IReadOnlyList<
ChartReference> = nullReference lines across the plot at a value (a target, a limit, a break-even point), drawn over the bars with their label inside the plot. The value axis grows to show every line.
- RowHeight double?= null
Height of each category row in px when the bars lie Horizontal: the chart is then sized by its categories instead of Height, so a long list neither squeezes its rows nor leaves them sparse. Ignored for columns.
- Series IReadOnlyList<
ChartSeries> = nullGrouped series (one bar per series within each category). Takes precedence over Data.
- ShowGrid bool= true
Draw value gridlines and labels.
- ShowLegend bool= true
Show a legend when more than one series is present.
- 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.
- Stacked bool= false
Stack the series in one bar per category instead of side by side: positive values stack up from zero and negative ones down, so mixed signs diverge. Series with different Stack names form stacks standing side by side. Tooltips still show each series' own value.
- 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); a flat Data list is one series; 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 bars.
- 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 added to the chart wrapper.
- Style string= null
Inline CSS style appended to the chart wrapper.