BulletChart: Blazor bullet chart component

Examples

Basic

Each BulletItem has a Value, an optional Target (the short line) and ascending Ranges for the bands behind the bar.

Quarterly goals

website/Examples/Charts/BulletChartBasicExample.razor Source

Vertical

Horizontal="false" stands the bullets up as columns; BarColor takes any CSS colour and ValueFormat shapes the tooltips.

Deployments this quarter, by team

website/Examples/Charts/BulletChartVerticalExample.razor Source

Playground

Quarterly goals

Horizontal

SharedAxis

BarColor

TargetColor

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<BulletChart Title="Quarterly goals" Items="@_goals" />

@code {
    // Ranges are ascending thresholds for the shaded bands behind each bar: behind, on track, ahead.
    private readonly BulletItem[] _goals =
    [
        new("Active seats", 8240, Target: 9000, Ranges: [6000, 8000, 10000]),
        new("Deployments", 412, Target: 380, Ranges: [250, 350, 450]),
        new("New workspaces", 1180, Target: 1400, Ranges: [800, 1200, 1600]),
        new("NPS", 46, Target: 50, Ranges: [20, 40, 60]),
    ];
}

API

<BulletChart>

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
= null
Colour of the value bar (any CSS colour). Defaults to the theme's primary colour.
Horizontal bool
= true
Lay the bullets out as rows (the default); false stands them up as columns.
Items IReadOnlyList<BulletItem>
= []
The measures, one bullet each. Rows whose Value is not a finite number are skipped.
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.
SharedAxis bool?
= null
Put every row on one scale with a single axis: under the last row, or beside the first column when not Horizontal. False gives each row its own scale and axis. Null (the default) shares the axis only when every row's own scale already spans the same range.
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.
TargetColor string
= "var(--color-base-content)"
Colour of the target line (any CSS colour).
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 tooltips and the description, e.g. "{0:N0} seats".
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	null	Colour of the value bar (any CSS colour). Defaults to the theme's primary colour.
Horizontal	bool	true	Lay the bullets out as rows (the default); false stands them up as columns.
Items	IReadOnlyList<BulletItem>	[]	The measures, one bullet each. Rows whose Value is not a finite number are skipped.
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.
SharedAxis	bool?	null	Put every row on one scale with a single axis: under the last row, or beside the first column when not Horizontal. False gives each row its own scale and axis. Null (the default) shares the axis only when every row's own scale already spans the same range.
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.
TargetColor	string	"var(--color-base-content)"	Colour of the target line (any CSS colour).
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 tooltips and the description, e.g. "{0:N0} seats".
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.