Data visualization components built on ApexCharts.Blazor with theme-aware styling

ShellUI includes 5 chart types built on ApexCharts.Blazor, offering beautiful, responsive, and theme-aware data visualizations for your Blazor applications.

Overview

Chart components are built with:

ApexCharts.Blazor: Professional charting library with rich interactivity
Generic Type System: TItem type parameter for strongly-typed data binding
Theme-Aware Containers: Charts use your CSS variables (--border, --card, --radius, --shadow)
Three Built-in Themes: Default, Colorful, and Monochrome color palettes

Chart Types

Bar Chart

Vertical bar charts for comparing values across categories

Line Chart

Smooth line charts for showing trends over time

Area Chart

Filled area charts for showing volume and trends

Pie Chart

Pie charts with custom tooltips for proportions

Multi-Series Chart

Multiple data series with mixed chart types

Installation

Install all chart components at once:

shellui add chart bar-chart line-chart pie-chart area-chart multi-series-chart
dotnet add package Blazor-ApexCharts

Or install just the chart types you need — chart and chart-variants auto-install as dependencies:

# Just a bar chart
shellui add chart bar-chart

# Bar and line charts
shellui add chart bar-chart line-chart

# All chart types
shellui add chart bar-chart line-chart pie-chart area-chart multi-series-chart

Quick Start

<BarChart TItem="SalesData"
    Data="@salesData"
    Title="Revenue by Quarter"
    XValue="@(e => e.Quarter)"
    YValue="@(e => (decimal?)e.Revenue)"
    Theme="ChartTheme.Default"
    Height="350px" />

@code {
    private List<SalesData> salesData = new()
    {
        new("Q1", 45000), new("Q2", 52000),
        new("Q3", 48000), new("Q4", 61000)
    };

    record SalesData(string Quarter, decimal Revenue);
}

Themes

All chart components support three themes via the ChartTheme enum:

Theme	Description
`ChartTheme.Default`	Subtle blue/slate palette, works in light and dark mode
`ChartTheme.Colorful`	Vibrant multi-color palette for distinguishing data series
`ChartTheme.Monochrome`	Minimal slate gray variations for a clean, professional look

NuGet Dependency

All chart components require Blazor-ApexCharts:

dotnet add package Blazor-ApexCharts

// Program.cs
builder.Services.AddApexCharts();

<!-- App.razor -->
<script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>

Charts