Charts

A collection of chart components built with pure Blazor SVG rendering. No JavaScript required.

Charts are designed to look great out of the box. They work with the existing theme system using CSS variables for colors, and are fully customizable.

Area Charts

Charts with filled areas below lines.

Bar Charts

Vertical and horizontal bar charts.

Line Charts

Line charts with various curve types.

Pie Charts

Pie and donut charts.

Radial Charts

Radial and gauge charts.

Getting Started

Charts use a composition pattern. You build your chart from components like ChartContainer, BarChart, Bar, etc.

Quick Example

A simple bar chart with two series.

Monthly Visitors

Desktop vs Mobile

JanFebMarAprMayJun 0100200300400
Desktop
Mobile
// 1. Define the chart config — maps data keys to labels and colors
var chartConfig = new ChartConfig
{
    ["desktop"] = new ChartConfigEntry
    {
        Label = "Desktop",
        Color = "hsl(var(--chart-1))"
    },
    ["mobile"] = new ChartConfigEntry
    {
        Label = "Mobile",
        Color = "hsl(var(--chart-2))"
    }
};

// 2. Define the data — any IReadOnlyList<object> (Dictionary or POCO)
var chartData = new List<Dictionary<string, object>>
{
    new() { ["month"] = "January",  ["desktop"] = 186, ["mobile"] = 80 },
    new() { ["month"] = "February", ["desktop"] = 305, ["mobile"] = 200 },
    new() { ["month"] = "March",    ["desktop"] = 237, ["mobile"] = 120 },
    new() { ["month"] = "April",    ["desktop"] = 73,  ["mobile"] = 190 },
    new() { ["month"] = "May",      ["desktop"] = 209, ["mobile"] = 130 },
    new() { ["month"] = "June",     ["desktop"] = 214, ["mobile"] = 140 },
}.Cast<object>().ToList();

// 3. Use in your Razor template
<ChartContainer Config="@chartConfig" Class="h-[300px]">
    <BarChart Data="@chartData" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis TickLine="false" AxisLine="false" />
        <YAxis TickLine="false" AxisLine="false" />
        <Bar DataKey="desktop" Fill="var(--color-desktop)" Radius="4" />
        <Bar DataKey="mobile" Fill="var(--color-mobile)" Radius="4" />
        <ChartTooltip />
    </BarChart>
    <ChartLegend />
</ChartContainer>