Bar Charts

Bar chart components with support for grouped bars, rounded corners, tooltips, and enter animations.

Default

A basic bar chart with two series. Bars animate in on first render.

Bar Chart

January - June 2024

JanFebMarAprMayJun
Desktop
Mobile
// Config — two series
var config = new ChartConfig
{
    ["desktop"] = new ChartConfigEntry { Label = "Desktop", Color = "hsl(var(--chart-1))" },
    ["mobile"]  = new ChartConfigEntry { Label = "Mobile",  Color = "hsl(var(--chart-2))" }
};

<ChartContainer Config="@config" Class="h-[300px]">
    <BarChart Data="@data" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis 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>

Single Series

A bar chart with a single data series and Y-axis.

Bar Chart - Single

Showing desktop visitors only

JanFebMarAprMayJun 0100200300400 
// Config — single series
var singleConfig = new ChartConfig
{
    ["desktop"] = new ChartConfigEntry { Label = "Desktop", Color = "hsl(var(--chart-1))" }
};

<ChartContainer Config="@singleConfig" Class="h-[300px]">
    <BarChart Data="@data" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis TickLine="false" AxisLine="false" />
        <YAxis TickLine="false" AxisLine="false" />
        <Bar DataKey="desktop" Fill="var(--color-desktop)" Radius="6" />
        <ChartTooltip />
    </BarChart>
</ChartContainer>

With Labels

Show data values above each bar using Label=true.

Bar Chart - Labels

Values displayed above bars

JanFebMarAprMayJun 0100200300400 18630523773209214 
// Use Label="true" to display values above each bar.
<ChartContainer Config="@singleConfig" Class="h-[300px]">
    <BarChart Data="@data" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis TickLine="false" AxisLine="false" />
        <YAxis TickLine="false" AxisLine="false" />
        <Bar DataKey="desktop" Fill="var(--color-desktop)" Radius="6" Label="true" />
        <ChartTooltip />
    </BarChart>
</ChartContainer>

Tooltip

Hover over bars to see a tooltip with data values. Non-active bars dim to highlight the hovered group.

Bar Chart - Tooltip

Hover to see values

JanFebMarAprMayJun
Desktop
Mobile
// Add <ChartTooltip /> inside the chart to show data on hover.
// Non-hovered bars dim automatically (opacity transition).
// Use <ChartLegend /> for a color legend below the chart.
<ChartContainer Config="@config" Class="h-[300px]">
    <BarChart Data="@data" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis 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>

Dynamic Data (Animation)

Click the button to randomize data — the bars animate in each time.

Bar Chart - Animated

Data updates trigger re-animation

JanFebMarAprMayJun 
// Animations are enabled by default (Animate="true").
// When Data changes, bars re-animate with staggered delays.
// Set Animate="false" to disable.

private void RandomizeData()
{
    // Create new data list — the BarChart detects the reference change
    // and increments DataVersion, which re-triggers @key and CSS animations
    dynamicData = months.Select(m => new Dictionary<string, object>
    {
        ["month"] = m, ["desktop"] = rng.Next(50, 350)
    }).Cast<object>().ToList();
}

<ChartContainer Config="@config" Class="h-[300px]">
    <BarChart Data="@dynamicData" XDataKey="month">
        <Bar DataKey="desktop" Fill="var(--color-desktop)" Radius="6" />
    </BarChart>
</ChartContainer>
<Button @onclick="RandomizeData">Randomize Data</Button>

Chart Config

How to define the ChartConfig for your chart.

ChartConfig maps data keys to labels and colors:

  • Key — matches the data property name (e.g., "desktop")
  • Label — human-readable name shown in tooltips/legends
  • Color — any CSS color or var(--chart-N)

Colors are injected as --color-{key} CSS variables, referenced via var(--color-desktop) in Fill/Stroke.

// The ChartConfig maps data keys to display properties.
// Keys must match the property names in your data objects.

var chartConfig = new ChartConfig
{
    // Key "desktop" matches data["desktop"] = 186
    ["desktop"] = new ChartConfigEntry
    {
        Label = "Desktop",                    // Shown in tooltips & legend
        Color = "hsl(var(--chart-1))"         // Uses theme CSS variable
    },
    ["mobile"] = new ChartConfigEntry
    {
        Label = "Mobile",
        Color = "#60a5fa"                     // Or use any CSS color directly
    },
    ["tablet"] = new ChartConfigEntry
    {
        Label = "Tablet",
        Color = "oklch(0.6 0.15 250)"         // oklch, hsl, hex all work
    }
};

// Colors are injected as CSS variables:
//   --color-desktop: hsl(var(--chart-1))
//   --color-mobile: #60a5fa
//
// Reference them in Fill/Stroke:
//   Fill="var(--color-desktop)"

// For pie/radial charts, colors can also come from the data itself:
var pieData = new List<Dictionary<string, object>>
{
    new() { ["browser"] = "chrome",  ["visitors"] = 275,
            ["fill"] = "var(--color-chrome)" },
    new() { ["browser"] = "safari",  ["visitors"] = 200,
            ["fill"] = "var(--color-safari)" },
};