DonutChart
One slice per row of a data array, labelField naming the slice and valueField sizing it. The chart fetches nothing, so pass rows you already have, and a row whose valueField is not a number above zero is a gap: it draws no slice. It is an add-on: import it from @chelone/react/charts or @chelone/vue/charts, and install recharts for React or @unovis/vue and @unovis/ts for Vue.
Installation
pnpm dlx shadcn@latest add @chelone/donut-chartOne slice per row of a data array, labelField naming the slice and valueField sizing it. The chart fetches nothing, so pass rows you already have, and a row whose valueField is not a number above zero is a gap: it draws no slice. It is an add-on: import it from @chelone/react/charts or @chelone/vue/charts, and install recharts for React or @unovis/vue and @unovis/ts for Vue.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| bare | boolean | — | Leaves out the card and the title. |
| className | string | — | |
| colors | readonly string[] | — | Any CSS colors, cycled over the slices. Defaults to the theme's chart colors. |
| data | readonly TRow[] | — | |
| height | number | — | In pixels. Defaults to 200. |
| labelField | keyof TRow & string | — | |
| loading | boolean | — | |
| title | string | — | |
| valueField | keyof TRow & string | — | A row whose value is not a number above zero draws no slice. |