The PieChart component renders pie charts with custom HTML tooltips, ideal for showing proportions, distributions, and part-to-whole relationships. Built on ApexCharts.Blazor with ShellUI's shadcn-inspired tooltip styling.

Installation

shellui add chart pie-chart
dotnet add package Blazor-ApexCharts

Basic Usage

<PieChart TItem="BrowserShare"
    Data="@browserData"
    Title="Browser Market Share"
    Name="Share"
    XValue="@(e => e.Browser)"
    YValue="@(e => (decimal?)e.Percentage)"
    Theme="ChartTheme.Default"
    Height="350px" />

@code {
    private List<BrowserShare> browserData = new()
    {
        new("Chrome", 65), new("Firefox", 12),
        new("Safari", 15), new("Edge", 8)
    };

    record BrowserShare(string Browser, double Percentage);
}

Team Allocation

Visualize team distribution with the Colorful theme:

<PieChart TItem="TeamAllocation"
    Data="@teamData"
    Title="Team Size by Department"
    Name="Headcount"
    XValue="@(e => e.Department)"
    YValue="@(e => (decimal?)e.Count)"
    Theme="ChartTheme.Colorful"
    Height="400px" />

@code {
    private List<TeamAllocation> teamData = new()
    {
        new("Engineering", 42),
        new("Product", 12),
        new("Design", 8),
        new("Marketing", 15),
        new("Sales", 20),
        new("Support", 10),
        new("HR", 5)
    };

    record TeamAllocation(string Department, int Count);
}

Budget Breakdown

Show spending categories with the Monochrome theme for a clean, professional look:

<PieChart TItem="BudgetCategory"
    Data="@budgetData"
    Title="Monthly Budget Breakdown"
    Name="Amount"
    XValue="@(e => e.Category)"
    YValue="@(e => (decimal?)e.Amount)"
    Theme="ChartTheme.Monochrome"
    Height="350px" />

@code {
    private List<BudgetCategory> budgetData = new()
    {
        new("Infrastructure", 4500),
        new("Salaries", 35000),
        new("Marketing", 8000),
        new("Tools & Software", 2500),
        new("Office", 3000)
    };

    record BudgetCategory(string Category, decimal Amount);
}

Storage Usage

Display disk space distribution:

<PieChart TItem="StorageUsage"
    Data="@storageData"
    Title="Storage Distribution"
    Subtitle="Total: 500 GB"
    Name="Size (GB)"
    XValue="@(e => e.FileType)"
    YValue="@(e => (decimal?)e.SizeGB)"
    Theme="ChartTheme.Colorful"
    Height="350px" />

@code {
    private List<StorageUsage> storageData = new()
    {
        new("Documents", 120),
        new("Media", 200),
        new("Code", 80),
        new("Backups", 60),
        new("Other", 40)
    };

    record StorageUsage(string FileType, int SizeGB);
}

Custom Tooltips

The PieChart component includes custom HTML tooltips styled to match ShellUI's design system. Tooltips show:

Category label
Value
Percentage of total
Color-coded indicators

These are automatically generated — no additional configuration needed.

API Reference

Property	Type	Default	Description
`TItem`	Generic type	-	The data item type
`Data`	`IEnumerable<TItem>?`	`null`	Data collection to visualize
`Name`	`string`	`"Data"`	Series name shown in tooltip
`XValue`	`Func<TItem, object>?`	`null`	Function to extract category label
`YValue`	`Func<TItem, decimal?>?`	`null`	Function to extract numeric value
`Theme`	`ChartTheme`	`Default`	Color theme (Default, Colorful, Monochrome)
`Title`	`string?`	`null`	Chart title
`Subtitle`	`string?`	`null`	Chart subtitle
`Height`	`string?`	`"400px"`	Chart height
`Width`	`string?`	`"100%"`	Chart width
`Class`	`string?`	`null`	Additional CSS classes

When to Use

Proportions: Market share, budget breakdown, survey results
Part-to-whole: Showing how individual items relate to a total
Small datasets: Best with 3–7 categories; too many slices reduces readability
Distribution: File types, user demographics, traffic sources

When NOT to Use

Comparing values precisely: Bar charts are better for exact comparisons
Time series data: Use Line or Area charts instead
Many categories: More than 7 categories makes pie charts hard to read

Pie Chart