ParallelCoordinatesChart: Blazor parallel coordinates chart component

Examples

Basic

Dimensions names the axes left to right; value i of each ParallelItem lines up with dimension i.

Plan limits

Starter Team Business Scale

website/Examples/Charts/ParallelCoordinatesChartBasicExample.razor Source

Highlight

Highlight brings one item forward and fades the others; a NaN value breaks that item's line on its axis.

Workspaces compared, Team plan highlighted
Workspaces compared, Team plan highlightedStarter plan: Active seats 4, Deployments 12, Response time (ms) 240, NPS 31; Team plan: Active seats 22, Deployments 85, Response time (ms) 190, NPS 46; Business plan: Active seats 80, Deployments 210, Response time (ms) 175, NPS 52; Scale plan: Active seats 230, Deployments 640, Response time (ms) no value, NPS 44Starter plan: Active seats 4, Deployments 12, Response time (ms) 240, NPS 31Business plan: Active seats 80, Deployments 210, Response time (ms) 175, NPS 52Scale plan: Active seats 230, Deployments 640, Response time (ms) no value, NPS 44Team plan: Active seats 22, Deployments 85, Response time (ms) 190, NPS 460501001502002500100200300400500600700170180190200210220230240303540455055Active seatsDeploymentsResponse time (ms)NPS
                Starter plan
                Team plan
                Business plan
                Scale plan

website/Examples/Charts/ParallelCoordinatesChartHighlightExample.razor Source

Playground

Plan limits

Starter Team Business Scale

Highlight

ShowLegend

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<ParallelCoordinatesChart
                          Title="Plan limits"
                          Dimensions="@_limits"
                          Items="@_plans" />

@code {
    // Each axis has its own scale, so seats, gigabytes and calls per minute sit side by side.
    private readonly string[] _limits = ["Seats", "Storage (GB)", "API calls / min", "Projects", "Support hours"];

    private readonly ParallelItem[] _plans =
    [
        new("Starter", [5, 10, 60, 3, 8]),
        new("Team", [25, 100, 300, 20, 24]),
        new("Business", [100, 500, 1200, 100, 72]),
        new("Scale", [250, 2000, 3000, 400, 168]),
    ];
}

API

<ParallelCoordinatesChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Dimensions IReadOnlyList<string>
= []
The axis names, left to right. At least two are needed.
Highlight string
= null
Label of an item to bring forward; the other lines fade. Null shows all lines alike.
Items IReadOnlyList<ParallelItem>
= []
The items, one line each; value i of an item lines up with dimension i. A missing or NaN value breaks the line there.
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.
ShowLegend bool
= true
Show a legend naming each line.
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 and the description, 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.
Dimensions	IReadOnlyList<string>	[]	The axis names, left to right. At least two are needed.
Highlight	string	null	Label of an item to bring forward; the other lines fade. Null shows all lines alike.
Items	IReadOnlyList<ParallelItem>	[]	The items, one line each; value i of an item lines up with dimension i. A missing or NaN value breaks the line there.
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.
ShowLegend	bool	true	Show a legend naming each line.
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 and the description, 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.