Radial Charts

Radial chart components for gauges, progress indicators, and radial bar charts.

Default

A basic radial chart with multiple segments.

Radial Chart

Browser usage

// Config for radial bars
var config = new ChartConfig
{
    ["chrome"]  = new ChartConfigEntry { Label = "Chrome",  Color = "hsl(var(--chart-1))" },
    ["safari"]  = new ChartConfigEntry { Label = "Safari",  Color = "hsl(var(--chart-2))" },
    ["firefox"] = new ChartConfigEntry { Label = "Firefox", Color = "hsl(var(--chart-3))" }
};

// Each data item becomes a radial bar. MaxValue sets the scale.
// Segments animate in with staggered scale effects.
<ChartContainer Config="@config" Class="h-[250px] w-[250px]">
    <RadialChart Data="@radialData">
        <Radial DataKey="visitors" NameKey="browser"
                OuterRadius="110" InnerRadius="50" MaxValue="300" />
    </RadialChart>
</ChartContainer>

With Center Text

A radial chart with content in the center.

Radial Chart - Gauge

Progress indicator

75% Complete
 
// For gauge/progress, use a single data item with CenterContent.
var gaugeConfig = new ChartConfig
{
    ["progress"] = new ChartConfigEntry { Label = "Progress", Color = "hsl(var(--chart-1))" }
};

var gaugeData = new List<Dictionary<string, object>>
{
    new() { ["name"] = "progress", ["value"] = 75, ["fill"] = "var(--color-progress)" }
};

<ChartContainer Config="@gaugeConfig" Class="h-[250px] w-[250px]">
    <RadialChart Data="@gaugeData">
        <Radial DataKey="value" NameKey="name"
                OuterRadius="110" InnerRadius="80"
                MaxValue="100" StartAngle="-90" EndAngle="270">
            <CenterContent>
                <div class="flex flex-col">
                    <span class="text-3xl font-bold">75%</span>
                    <span class="text-xs text-muted-foreground">Complete</span>
                </div>
            </CenterContent>
        </Radial>
    </RadialChart>
</ChartContainer>