Donut Chart

Donut charts. Free, MIT · Charts and analytics › Shares and composition

Installation

npx valyro-cli@latest add donut-chart

npx shadcn@latest add https://valyro.xyz/r/donut-chart.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { DonutChart } from 'valyro-ui';

Prop	Type	Default
`data` *	`DonutSegment[]`		Segments in drawing order, clockwise from the top; zero, negative and non-finite values take no space.
`size`	`number`	`200`	Diameter in px (shrinks to fit narrow containers). Default 200.
`thickness`	`number`		Ring thickness in px. Default 12% of the size.
`gap`	`number`		Gap between segments in px. Default: the theme's `--ui-donut-chart-gap`.
`label`	`string`		Caption under the total in the center, e.g. "Visitors".
`valueFormatter`	`ValueFormatter`		Formats the center total, legend values, data table and announcements.
`locale`	`string`		BCP 47 locale for the default number formatting. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<DonutChartLabels>`		Overrides for the built-in strings.
`showLegend`	`boolean`	`true`	Legend with values and percentages next to (or under) the ring. Default true.
`ariaLabel` *	`string`		Accessible name of the chart (also the caption of its sr-only data table).

Treemap — Hierarchies as areas, with drill-down
Funnel Chart — Conversion funnels
Sankey Chart — Flow diagrams between stages
Radar Chart — Radar charts for comparing profiles
Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages
Heatmap — Heatmaps