The BarChart component renders vertical bar charts ideal for comparing discrete values across categories. Built on ApexCharts.Blazor with full ShellUI theme integration.

Installation

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

Basic Usage

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

@code {
    private List<SalesData> salesData = new()
    {
        new("Jan", 12000), new("Feb", 19000),
        new("Mar", 15000), new("Apr", 25000),
        new("May", 22000), new("Jun", 30000)
    };

    record SalesData(string Month, decimal Revenue);
}

With Colorful Theme

Use ChartTheme.Colorful for a vibrant multi-color palette:

<BarChart TItem="DepartmentBudget"
    Data="@budgetData"
    Title="Department Budgets"
    Name="Budget (USD)"
    XValue="@(e => e.Department)"
    YValue="@(e => (decimal?)e.Amount)"
    Theme="ChartTheme.Colorful"
    Height="400px" />

@code {
    private List<DepartmentBudget> budgetData = new()
    {
        new("Engineering", 250000),
        new("Marketing", 120000),
        new("Sales", 180000),
        new("Support", 95000),
        new("Design", 110000),
        new("HR", 75000)
    };

    record DepartmentBudget(string Department, decimal Amount);
}

Monochrome Theme

ChartTheme.Monochrome provides a minimal, understated look using slate gray variations:

<BarChart TItem="QuarterlyData"
    Data="@quarterlyData"
    Title="Quarterly Performance"
    Name="Revenue"
    XValue="@(e => e.Quarter)"
    YValue="@(e => (decimal?)e.Revenue)"
    Theme="ChartTheme.Monochrome"
    Height="350px" />

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

    record QuarterlyData(string Quarter, decimal Revenue);
}

Custom Sizing

Control chart dimensions with Height and Width:

<BarChart TItem="SalesData"
    Data="@salesData"
    Title="Compact Chart"
    Name="Revenue"
    XValue="@(e => e.Month)"
    YValue="@(e => (decimal?)e.Revenue)"
    Theme="ChartTheme.Default"
    Height="250px"
    Width="500px" />

With Subtitle

Add context with a subtitle:

<BarChart TItem="SalesData"
    Data="@salesData"
    Title="Monthly Revenue"
    Subtitle="FY 2024 - All Regions"
    Name="Revenue"
    XValue="@(e => e.Month)"
    YValue="@(e => (decimal?)e.Revenue)"
    Theme="ChartTheme.Default"
    Height="350px" />

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 legend/tooltip
`XValue`	`Func<TItem, object>?`	`null`	Function to extract X-axis category value
`YValue`	`Func<TItem, decimal?>?`	`null`	Function to extract Y-axis 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

Comparing categories: Revenue by month, users by region, scores by team
Discrete data: When X-axis values are distinct categories (not continuous)
Single series: For one data series — use MultiSeriesChart for multiple series

Bar Chart