HistogramChart: Blazor histogram chart component

Examples

Basic

Values takes the raw numbers; without Bins the count of bins follows Sturges' rule. Hover a bar for its range and count.

API response times, last hour

website/Examples/Charts/HistogramChartBasicExample.razor Source

Bins and median

Bins asks for about that many bins (D3 rounds to tidy edges) and ShowMedian marks the median with a dashed line.

website/Examples/Charts/HistogramChartMedianExample.razor Source

Playground

API response times, last hour

Bins

XTitle

YTitle

ShowMedian

MedianLabel

Color

ValueFormat

CountFormat

Title

ShowTitle

AspectRatio

RowHeight

<HistogramChart
                XTitle="Response time (ms)"
                YTitle="Requests"
                CountFormat="{0:N0} requests"
                Title="API response times, last hour"
                Values="@_responseTimes" />

@code {
    // Bins are picked by Sturges' rule unless you set Bins.
    private readonly double[] _responseTimes = DistributionSamples.Skewed(seed: 61, count: 1_000, median: 90, spread: 0.45);
}

API

<HistogramChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Bins int
= 0
About how many bins to use; D3 picks round bin edges near it. 0 uses Sturges' rule.
Color string
= "var(--color-primary)"
Colour of the bars (any CSS colour).
CountFormat string
= "{0:N0}"
Format string for a bin's count in its tooltip, e.g. "{0:N0} deployments".
MedianLabel string
= "Median"
Text before the median's value on its line, in its tooltip and the description.
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.
ShowMedian bool
= false
Mark the median with a dashed line and its value.
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.
Title string
= null
Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat string
= "{0:#,0.##}"
Format string for bin edges and the median, e.g. "{0:N0} ms".
Values IReadOnlyList<double>
= []
The raw values to count. Values that are not finite numbers are ignored.
Width string
= "100%"
CSS width of the chart wrapper.
XTitle string
= null
Title of the horizontal (value) axis.
YTitle string
= "Count"
Title of the vertical (count) axis.
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.
Bins	int	0	About how many bins to use; D3 picks round bin edges near it. 0 uses Sturges' rule.
Color	string	"var(--color-primary)"	Colour of the bars (any CSS colour).
CountFormat	string	"{0:N0}"	Format string for a bin's count in its tooltip, e.g. "{0:N0} deployments".
MedianLabel	string	"Median"	Text before the median's value on its line, in its tooltip and the description.
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.
ShowMedian	bool	false	Mark the median with a dashed line and its value.
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.
Title	string	null	Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat	string	"{0:#,0.##}"	Format string for bin edges and the median, e.g. "{0:N0} ms".
Values	IReadOnlyList<double>	[]	The raw values to count. Values that are not finite numbers are ignored.
Width	string	"100%"	CSS width of the chart wrapper.
XTitle	string	null	Title of the horizontal (value) axis.
YTitle	string	"Count"	Title of the vertical (count) axis.
Class	string	null	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended after the width on the wrapper.