Charts

TwParallelCoordinatesChart

TwParallelCoordinatesChart is a Blazor parallel coordinates chart: one axis per variable and a line per item, each axis on its own scale.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

TwParallelCoordinatesChart draws one vertical axis per variable and a line per item crossing each axis at its value. Categories are the variables and each series is one item.

Laptop comparisonScore out of 10

RAZOR

<TwChart Title="Laptop comparison" Description="Score out of 10">
    <TwParallelCoordinatesChart Categories="@_attributes" Series="@_laptops" />
</TwChart>

CSHARP

@code {
    private readonly string[] _attributes = ["Battery", "Display", "Speed", "Weight", "Price"];
    
    private readonly ChartSeries[] _laptops =
    [
        new("Aero 13", [9, 7, 6, 9, 5]),
        new("Titan 16", [5, 9, 9, 4, 6])
    ];
}

Different units

Every axis has its own scale, labelled with its lowest and highest value, so variables in different units can sit side by side.

Car comparison

RAZOR

<TwChart Title="Car comparison">
    <TwParallelCoordinatesChart Categories="@_specs" Series="@_cars" CategoryHeader="Specification" />
</TwChart>

CSHARP

@code {
    private readonly string[] _specs = ["Price (£k)", "Range (miles)", "0-60 (s)", "Boot (litres)"];
    
    private readonly ChartSeries[] _cars =
    [
        new("Volt", [32, 250, 7.9, 380]),
        new("Halo", [45, 330, 5.6, 420]),
        new("Dash", [27, 190, 9.4, 310])
    ];
}

Reading it

Lines that run in parallel between two axes mean the variables rise together. Lines that cross mean one rises as the other falls.

Summary

Tooltips and the table view give the value of every series for each category.

Shared features

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.