ParetoChart: Blazor pareto chart component

Examples

Basic

Pass the categories in any order; the chart sorts them and fades the bars past the threshold.

Failed requests by cause

website/Examples/Charts/ParetoChartBasicExample.razor Source

Threshold and colours

Threshold moves the reference line (0.9 here); BarColor, LineColor and ThresholdColor take any CSS colour.

website/Examples/Charts/ParetoChartThresholdExample.razor Source

Playground

Failed requests by cause

Threshold

ValueFormat

BarColor

LineColor

ThresholdColor

Title

ShowTitle

AspectRatio

RowHeight

<ParetoChart
             ValueFormat="{0:N0}"
             Title="Failed requests by cause"
             Data="@_causes" />

@code {
    private readonly ChartDataPoint[] _causes =
    [
        new("DNS", 64),
        new("Timeout", 412),
        new("TLS", 22),
        new("Auth expired", 268),
        new("Bad payload", 41),
        new("Rate limited", 155),
        new("Other", 18),
    ];
}

API

<ParetoChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
BarColor string
= "var(--color-primary)"
CSS colour of the bars.
Data IReadOnlyList<ChartDataPoint>
= []
The categories. They are sorted by value, largest first; only positive values count.
LineColor string
= "var(--color-secondary)"
CSS colour of the cumulative line.
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.
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.
Threshold double
= 0.8
The cumulative share (0 to 1) marked by the reference line; bars up to the one that reaches it stay solid.
ThresholdColor string
= "var(--color-warning)"
CSS colour of the threshold line.
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 on the left axis and in 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.

Name	Type	Default	Description
AspectRatio	double	1.78	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
BarColor	string	"var(--color-primary)"	CSS colour of the bars.
Data	IReadOnlyList<ChartDataPoint>	[]	The categories. They are sorted by value, largest first; only positive values count.
LineColor	string	"var(--color-secondary)"	CSS colour of the cumulative line.
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.
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.
Threshold	double	0.8	The cumulative share (0 to 1) marked by the reference line; bars up to the one that reaches it stay solid.
ThresholdColor	string	"var(--color-warning)"	CSS colour of the threshold line.
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 on the left axis and in 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.