LollipopChart: Blazor lollipop chart component

Examples

Basic

Data takes ChartDataPoint values; they are sorted largest first, and negative values hang on the other side of zero.

NPS by team

website/Examples/Charts/LollipopChartBasicExample.razor Source

Vertical, in order

Horizontal="false" stands the stems up, Sort="LollipopSort.None" keeps the data's order, and a point's Color overrides the chart's.

Deployments by weekday

website/Examples/Charts/LollipopChartVerticalExample.razor Source

Playground

NPS by team

Horizontal

Sort LollipopSort

ShowValues

Color

Min

Max

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<LollipopChart Title="NPS by team" Data="@_teams" />

@code {
    // Sorted largest first by default; a negative score hangs left of zero.
    private readonly ChartDataPoint[] _teams =
    [
        new("Support", 52),
        new("Billing", 41),
        new("Platform", 39),
        new("Mobile", 27),
        new("Search", 35),
        new("Onboarding", -8),
    ];
}

API

<LollipopChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Color string
= null
Colour of every stem and dot (any CSS colour). Defaults to the theme's primary colour.
Data IReadOnlyList<ChartDataPoint>
= []
The categories and their values. Points whose Value is not a finite number are skipped; a point's Color overrides the chart colour.
Horizontal bool
= true
Lay the stems out as rows (the default); false stands them up as columns.
Max double?
= null
High end of the value axis, e.g. 100 for percentages. Defaults to the largest value, rounded; larger values are clamped to it.
Min double?
= null
Low end of the value axis, e.g. 0 for rates. Defaults to zero or the smallest value, rounded; smaller values are clamped to it.
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.
ShowValues bool
= true
Write each value past its dot.
Sort LollipopSort
= LollipopSort.Descending
Order of the categories.
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 labels and tooltips, e.g. "{0:N0}".
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.
Color	string	null	Colour of every stem and dot (any CSS colour). Defaults to the theme's primary colour.
Data	IReadOnlyList<ChartDataPoint>	[]	The categories and their values. Points whose Value is not a finite number are skipped; a point's Color overrides the chart colour.
Horizontal	bool	true	Lay the stems out as rows (the default); false stands them up as columns.
Max	double?	null	High end of the value axis, e.g. 100 for percentages. Defaults to the largest value, rounded; larger values are clamped to it.
Min	double?	null	Low end of the value axis, e.g. 0 for rates. Defaults to zero or the smallest value, rounded; smaller values are clamped to it.
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.
ShowValues	bool	true	Write each value past its dot.
Sort	LollipopSort	LollipopSort.Descending	Order of the categories.
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 labels and tooltips, e.g. "{0:N0}".
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.