Donut Chart

Кольцевые диаграммы. Бесплатно, MIT · Графики и аналитика › Доли и структура

Установка

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).