Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radial Chart with Labels

Radial bars with each browser's name printed in white at the start of its ring, so the chart reads without a legend. Built in React.

Framework
Charting library

Preview

Preview width

About

Pick it over the plain radial chart when the card has no legend and the names should sit on the data. It suits a few short names: five browsers fit, longer labels run past the bar. For long category names, a horizontal bar chart with labels inside the bars reads better.

Five rings over muted tracks start near six o'clock and sweep counterclockwise, Chrome on the inside. Each browser's name is written small and white where its ring begins, tilted with the arc.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartRadialLabel } from "@/components/charts/chart-radial-label";
<ChartRadialLabel />

Customize

  • <LabelList dataKey="browser" position="insideStart" fontSize={11} /> inside <RadialBar> writes the names.
  • className="fill-white capitalize mix-blend-luminosity" on LabelList sets the text color, the capital letter and the blend.
  • startAngle={-90} and endAngle={380} on <RadialBarChart> start the rings at six o'clock; angles are degrees, counterclockwise from three o'clock.
  • background on <RadialBar> draws the muted track behind each ring.
  • <ChartTooltipContent hideLabel nameKey="browser" /> names the hovered ring by its browser.

FAQ

How are the names placed on the rings?

<LabelList dataKey="browser" position="insideStart" /> inside <RadialBar> writes each row's browser at the start of its bar. The classes fill-white capitalize mix-blend-luminosity make it white, capitalized and readable on every color.

What happens to the labels if I add a browser?

LabelList places each label from its own bar's geometry, so a new row gets its label without any change. Keep the names short: a label longer than the bar runs off its end.

Are white labels readable on every color?

mix-blend-luminosity blends the white text with the ring's color, which keeps it legible on lighter colors. For full contrast, drop the blend and pick darker --chart-N values, or use fill-background.

How do I change where the rings start?

startAngle={-90} and endAngle={380} on <RadialBarChart>, in degrees from three o'clock, counterclockwise. -90 is six o'clock; LabelList follows the start on its own.

Does it work in a small card?

Recharts keeps innerRadius={30} and outerRadius={110} in pixels. In a smaller card, pass percentage strings such as "20%" and "75%", and the labels follow their bars.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts