Skip to main content
twblazor
Home
  • Get started
  • Tailwind with Blazor
  • Why twblazor?
  • Theme
  • Class Merge
    • Configuring localization
    • RTL Provider
  • Breadcrumb
  • Card
  • Carousel
  • Collapse
  • Footer
  • MenuNew
  • Navbar
  • On This PageNew
  • Sidebar
  • Stepper
  • Tabs
  • Tree List
  • Button
  • Checkbox
  • Color Picker
    • Date
    • Date Range
    • Datetime
    • Datetime Range
    • Time
    • Time Range
  • File Upload
  • NumericNew
  • Radio Button
  • RatingNew
  • Select
  • Slider
  • Switch
  • Textfield
  • Alert
  • Avatar
  • Chip
  • Icon
  • Progress
  • Skeleton
  • Spinner
  • TooltipNew
  • Data Table
  • Pagination
  • Pick List
  • BarcodeNew
  • QR CodeNew
  • CalendarNew
  • Table
  • Overview
  • Area
  • Bar
  • Box Plot
  • Bullet
  • Bump
  • Candlestick
  • Column
  • Dot Plot
  • Dumbbell
  • Funnel
  • Gantt
  • Gauge
  • Heatmap
  • Histogram
  • Icon
  • Line
  • Lollipop
  • Matrix
  • Nightingale
  • Parallel Coordinates
  • Pie
  • Quadrant
  • Radar
  • Radial Bar
  • Range
  • Scatter
  • Slope
  • Small Multiples
  • Strip Plot
  • Treemap
  • Waffle
  • Waterfall
  • Arc Diagram
  • Barcode
  • Beeswarm
  • Bump Area
  • Categorical Scatter
  • Chord Diagram
  • Circular Treemap
  • Contour
  • Convex Treemap
  • Density Plot
  • Dendrogram
  • Euler Diagram
  • Flowchart
  • Hexagonal Binning
  • Horizon
  • Marimekko
  • Network Diagram
  • Radial Histogram
  • Ridgeline
  • Sankey
  • Stream Graph
  • Sunburst
  • Venn Diagram
  • Violin Plot
  • Word Cloud
  • Dialog Service
  • Toast Service
API DocumentationAI Agents & Skills
Home Get Started

Charts

TwArcDiagramChart

TwArcDiagramChart is a Blazor arc diagram: nodes set out along a line and joined by an arc for every link.

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

TwArcDiagramChart sets ChartGraphNode values out along a line in the order given and draws an arc above it for every ChartGraphLink. The further apart two linked nodes are, the higher their arc. Links refer to nodes by Id.
Related topics
Layout → Color: 2Layout → Type: 1Color → Type: 3Layout → Motion: 1
Layout→ Color 2→ Type 1→ Motion 1
Color→ Type 3← Layout 2
Type← Layout 1← Color 3
Motion← Layout 1
LayoutColorTypeMotion
RAZOR
<TwChart Title="Related topics">
    <TwArcDiagramChart Nodes="@_topics" Links="@_related" />
</TwChart>
CSHARP
@code {
    private readonly ChartGraphNode[] _topics = [new("a", "Layout"), new("b", "Color"), new("c", "Type"), new("d", "Motion")];
    
    private readonly ChartGraphLink[] _related = [new("a", "b", 2), new("a", "c", 1), new("b", "c", 3), new("a", "d", 1)];
}

Order reveals structure

The order of the nodes is the design. With the members of each group listed together, links inside a group are short low arcs and the few links between groups rise above them.
Who reviews whose codeTwo squads and the reviews between them
Ana → Bo: 14Bo → Cy: 9Cy → Di: 11Ana → Cy: 6Bo → Di: 4Eli → Fay: 12Fay → Gus: 8Gus → Hal: 10Eli → Gus: 5Di → Eli: 3Ana → Hal: 1
Ana→ Bo 14→ Cy 6→ Hal 1
Bo→ Cy 9→ Di 4← Ana 14
Cy→ Di 11← Bo 9← Ana 6
Di→ Eli 3← Cy 11← Bo 4
Eli→ Fay 12→ Gus 5← Di 3
Fay→ Gus 8← Eli 12
Gus→ Hal 10← Fay 8← Eli 5
Hal← Gus 10← Ana 1
AnaBoCyDiEliFayGusHal
RAZOR
<TwChart Title="Who reviews whose code" Description="Two squads and the reviews between them">
    <TwArcDiagramChart Nodes="@_engineers" Links="@_reviews" SourceHeader="Author" TargetHeader="Reviewer" ValueHeader="Reviews" Height="ChartHeight.Large" />
</TwChart>
CSHARP
@code {
    private readonly ChartGraphNode[] _engineers =
    [
        new("ana", "Ana"), new("bo", "Bo"), new("cy", "Cy"), new("di", "Di"),
        new("eli", "Eli"), new("fay", "Fay"), new("gus", "Gus"), new("hal", "Hal")
    ];
    
    private readonly ChartGraphLink[] _reviews =
    [
        new("ana", "bo", 14), new("bo", "cy", 9), new("cy", "di", 11), new("ana", "cy", 6), new("bo", "di", 4),
        new("eli", "fay", 12), new("fay", "gus", 8), new("gus", "hal", 10), new("eli", "gus", 5),
        new("di", "eli", 3), new("ana", "hal", 1)
    ];
}

A sequence

When the nodes have a natural order, such as chapters or stops on a route, arcs show what jumps ahead and what calls back.
Chapters that refer to one another
Ch. 1 → Ch. 2: 1Ch. 2 → Ch. 3: 1Ch. 1 → Ch. 5: 1Ch. 3 → Ch. 4: 1Ch. 4 → Ch. 6: 1Ch. 2 → Ch. 6: 1
Ch. 1→ Ch. 2 1→ Ch. 5 1
Ch. 2→ Ch. 3 1→ Ch. 6 1← Ch. 1 1
Ch. 3→ Ch. 4 1← Ch. 2 1
Ch. 4→ Ch. 6 1← Ch. 3 1
Ch. 5← Ch. 1 1
Ch. 6← Ch. 4 1← Ch. 2 1
Ch. 1Ch. 2Ch. 3Ch. 4Ch. 5Ch. 6
RAZOR
<TwChart Title="Chapters that refer to one another">
    <TwArcDiagramChart Nodes="@_chapters" Links="@_references" ShowTableToggle="false" Height="ChartHeight.Small" />
</TwChart>
CSHARP
@code {
    private readonly ChartGraphNode[] _chapters =
    [
        new("1", "Ch. 1"), new("2", "Ch. 2"), new("3", "Ch. 3"), new("4", "Ch. 4"), new("5", "Ch. 5"), new("6", "Ch. 6")
    ];
    
    private readonly ChartGraphLink[] _references = [new("1", "2"), new("2", "3"), new("1", "5"), new("3", "4"), new("4", "6"), new("2", "6")];
}

When to use

Use an arc diagram when the order of the nodes matters, or to show clusters as runs of short arcs. Links that name a missing node, or join a node to itself, are left out. To show how much flows along each link, use TwChordDiagramChart.

Summary

Tooltips and the table view give the source, target and value of each link.

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.

Keyboard navigation

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.

On this page

  • Basic usage
  • Order reveals structure
  • A sequence
  • When to use
  • Summary
  • Shared features
  • Keyboard navigation
Discord (opens in a new tab) • GitHub (opens in a new tab) • Documentation (opens in a new tab) • MIT License (opens in a new tab) • llms.txt (opens in a new tab)

twblazor is and always will be free and open source.

An unhandled error has occurred. Reload