BumpChart: Blazor bump chart component

Examples

Basic

Each ChartSeries holds one value per period in Labels; the highest value in a period ranks first, and tooltips show the rank and the value.

Plans ranked by new sign-ups

website/Examples/Charts/BumpChartBasicExample.razor Source

Ranks as data

ValuesAreRanks="true" takes the data as places (1 = top) instead of values to rank; ShowPoints="false" leaves only the lines.

Most used features, quarterly survey

website/Examples/Charts/BumpChartRanksExample.razor Source

Playground

Plans ranked by new sign-ups

ValuesAreRanks

ShowPoints

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<BumpChart
           ValueFormat="{0:N0} sign-ups"
           Title="Plans ranked by new sign-ups"
           Series="@_plans"
           Labels="@_months" />

@code {
    private readonly string[] _months = ["Apr", "May", "Jun", "Jul", "Aug", "Sep"];

    // Values are ranked per month, highest first.
    private readonly ChartSeries[] _plans =
    [
        new("Free", [820, 760, 700, 640, 610, 590]),
        new("Starter", [540, 610, 720, 690, 650, 600]),
        new("Pro", [380, 450, 520, 710, 760, 820]),
        new("Team", [300, 280, 340, 420, 640, 700]),
        new("Enterprise", [120, 150, 160, 190, 230, 260]),
    ];
}

API

<BumpChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Labels IReadOnlyList<string>
= null
The name of each period, under the chart. Defaults to 1, 2, 3…
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.
Series IReadOnlyList<ChartSeries>
= []
The series. Data[i] is the series' value in period Labels[i]; a missing (NaN) value leaves the series unranked in that period.
ShowPoints bool
= true
Draw a dot at each ranked point (it carries the tooltip).
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 values in tooltips, e.g. "{0:N0} signups".
ValuesAreRanks bool
= false
The data already holds ranks (1 = top) instead of values to rank, highest first.
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.
Labels	IReadOnlyList<string>	null	The name of each period, under the chart. Defaults to 1, 2, 3…
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.
Series	IReadOnlyList<ChartSeries>	[]	The series. Data[i] is the series' value in period Labels[i]; a missing (NaN) value leaves the series unranked in that period.
ShowPoints	bool	true	Draw a dot at each ranked point (it carries the tooltip).
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 values in tooltips, e.g. "{0:N0} signups".
ValuesAreRanks	bool	false	The data already holds ranks (1 = top) instead of values to rank, highest first.
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.