Charts

TwVennDiagramChart

TwVennDiagramChart is a Blazor Venn diagram: up to three sets as equal overlapping circles, with the shared count where each pair meets.

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

TwVennDiagramChart draws each ChartSet as a circle and overlaps them all. A ChartSetIntersection names two sets and how many elements they share; that number is written where the two circles meet.

Skills on the teamPeople with each skill

RAZOR

<TwChart Title="Skills on the team" Description="People with each skill">
    <TwVennDiagramChart Sets="@_skills" Intersections="@_sharedSkills" />
</TwChart>

CSHARP

@code {
    private readonly ChartSet[] _skills = [new("Research", 38), new("Design", 32), new("Engineering", 44)];
    
    private readonly ChartSetIntersection[] _sharedSkills =
    [
        new("Research", "Design", 14),
        new("Design", "Engineering", 9),
        new("Research", "Engineering", 6)
    ];
}

Two sets

With two sets the circles sit side by side. Intersections can name their sets in either order.

Newsletter and app usersThousands of customers

RAZOR

<TwChart Title="Newsletter and app users" Description="Thousands of customers">
    <TwVennDiagramChart Sets="@_audiences" Intersections="@_sharedAudience" LabelHeader="Audience" ValueHeader="Customers" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartSet[] _audiences = [new("Newsletter", 120), new("App", 85)];
    
    private readonly ChartSetIntersection[] _sharedAudience = [new("App", "Newsletter", 40)];
}

Missing overlaps

A Venn diagram always draws every possible overlap. A pair with no intersection given still overlaps on the plot but shows no number. To draw only the overlaps that exist, with circles sized by their sets, use TwEulerDiagramChart.

Features used last monthAccounts

RAZOR

<TwChart Title="Features used last month" Description="Accounts">
    <TwVennDiagramChart Sets="@_features" Intersections="@_sharedFeatures" ValueFormat="#,0" />
</TwChart>

CSHARP

@code {
    private readonly ChartSet[] _features = [new("Reports", 2400), new("Exports", 1100), new("Alerts", 860)];
    
    private readonly ChartSetIntersection[] _sharedFeatures = [new("Reports", "Exports", 940), new("Reports", "Alerts", 310)];
}

When to use

Use a Venn diagram to show which sets overlap. The circles are all the same size, so read the numbers, not the areas. Up to three sets are drawn, and sets with no size are left out. To size the circles by their sets, use TwEulerDiagramChart.

Summary

Tooltips and the table view give the size of each set and of each overlap.

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.

TwVennDiagramChart

Basic usage

Two sets

Missing overlaps

When to use

Summary

Shared features

Keyboard navigation