Charts

TwEulerDiagramChart

TwEulerDiagramChart is a Blazor Euler diagram: sets as circles sized by their members, overlapping only where they share some.

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

TwEulerDiagramChart draws each ChartSet as a circle whose area follows its size. Two circles overlap only when a ChartSetIntersection says they share elements, and by an area that follows how many.

Shared interestsMembers of each group

RAZOR

<TwChart Title="Shared interests" Description="Members of each group">
    <TwEulerDiagramChart Sets="@_groups" Intersections="@_sharedMembers" />
</TwChart>

CSHARP

@code {
    private readonly ChartSet[] _groups = [new("Design", 42), new("Research", 35)];
    
    private readonly ChartSetIntersection[] _sharedMembers = [new("Design", "Research", 18)];
}

Separate sets

Sets with no intersection are drawn apart. Here two products share customers and a third has none in common with either.

Customers by productThousands

RAZOR

<TwChart Title="Customers by product" Description="Thousands">
    <TwEulerDiagramChart Sets="@_products" Intersections="@_sharedCustomers" LabelHeader="Product" ValueHeader="Customers" />
</TwChart>

CSHARP

@code {
    private readonly ChartSet[] _products = [new("Accounts", 64), new("Payroll", 38), new("Rostering", 12)];
    
    private readonly ChartSetIntersection[] _sharedCustomers = [new("Accounts", "Payroll", 22)];
}

A set inside another

When a set shares all of its elements with a larger one, it is drawn inside it. Every premium subscriber here is also a registered user.

AccountsThousands

RAZOR

<TwChart Title="Accounts" Description="Thousands">
    <TwEulerDiagramChart Sets="@_accounts" Intersections="@_accountOverlap" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartSet[] _accounts = [new("Registered", 90), new("Premium", 18)];
    
    private readonly ChartSetIntersection[] _accountOverlap = [new("Registered", "Premium", 18)];
}

Three overlapping sets

With three sets the circles are placed so each pair overlaps as closely as circles allow to the number given. Read exact figures from the labels, tooltips and table view.

Languages spoken by staff

RAZOR

<TwChart Title="Languages spoken by staff">
    <TwEulerDiagramChart Sets="@_languages" Intersections="@_bilingual" LabelHeader="Language" ValueHeader="Speakers" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartSet[] _languages = [new("English", 120), new("Spanish", 55), new("French", 30)];
    
    private readonly ChartSetIntersection[] _bilingual =
    [
        new("English", "Spanish", 32),
        new("English", "French", 18),
        new("Spanish", "French", 6)
    ];
}

When to use

Use an Euler diagram when the sizes of the sets matter. Up to three sets are drawn, and sets with no size are left out. To show every possible overlap with equal circles, use TwVennDiagramChart.

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.

TwEulerDiagramChart

Basic usage

Separate sets

A set inside another

Three overlapping sets

When to use

Summary

Shared features

Keyboard navigation