Examples
Labels names the categories; value i of each series in Bars and Lines belongs to label i. Bar series sit side by side and colours run through the palette across the bars, then the lines.
SecondaryAxis="true" gives the lines their own scale on the right, formatted with SecondaryValueFormat; StackBars stacks the bar series and Smooth curves the lines. A series' Color overrides the palette.
Playground
<ComboChart
Title="Deployments and rollbacks per week"
Labels="@_weeks"
Bars="@_bars"
Lines="@_lines" />
@code {
// Bar series sit side by side in each week; the line shares their scale.
private readonly string[] _weeks = ["W14", "W15", "W16", "W17", "W18", "W19", "W20", "W21"];
private readonly ChartSeries[] _bars =
[
new("Deployments", [42, 51, 38, 57, 63, 48, 66, 71]),
new("Rollbacks", [3, 5, 2, 6, 4, 3, 5, 2]),
];
private readonly ChartSeries[] _lines =
[
new("Hotfixes", [8, 11, 6, 12, 9, 7, 10, 8]),
];
}API
<ComboChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- Bars IReadOnlyList<
ChartSeries> = []Series drawn as bars, side by side in each category (or stacked with StackBars).
- Labels IReadOnlyList<
string> = []The categories along the horizontal axis; value i of every series belongs to label i.
- Lines IReadOnlyList<
ChartSeries> = []Series drawn as lines through the category centres, over the bars.
- 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.
- SecondaryAxis bool= false
Give the lines their own value scale, labelled right of the plot.
- SecondaryAxisFormat string= "{0} (right axis)"
Format string for a line series' name in the legend and the description when SecondaryAxis is on; {0} is the name.
- SecondaryValueFormat string= "{0:#,0.##}"
Format string for the secondary axis ticks and the line tooltips when SecondaryAxis is on, e.g. "{0:0.#}%".
- ShowLegend bool= true
Show a legend of the bar and line series.
- 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
Draw the lines as smooth curves (monotone, so they never overshoot a value).
- StackBars bool= false
Stack the bar series in one bar per category instead of side by side.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- ValueFormat string= "{0:#,0.##}"
Format string for bar values (and line values without a secondary axis) in ticks and tooltips.
- 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.
ChartSeries
DaisyBlazor.ChartsA named numeric series for multi-series line, area and bar charts. The ordinal index of each value lines up with the chart's X labels.
Properties
- Color string= null
Optional CSS color override; falls back to the cycling palette when null.
- Data IReadOnlyList<
double> = []Ordered values; index i aligns with X label i.
- Name string= ""
Series display name (legend / tooltip label).
- Stack string= null
Optional stack name for a stacked BarChart: series with the same name stack together and different stacks stand side by side in each category. Series without one share a single stack. Ignored by other charts and when the bars are not stacked.