Ravox KitData
Donut Chart
A donut chart to show how much each part weighs in the whole: payment methods, channels, plans. The total sits in the center and becomes the value of the slice the person points at or selects with the keyboard; the legend brings value and percentage and the View table button shows the numbers.
Use the arrow keys to read each part, or the View table button.
TotalR$ 97.600
- PixR$ 48.23049%
- Cartão de créditoR$ 31.84033%
- Cartão de débitoR$ 12.41013%
- BoletoR$ 5.1205,2%
Settings
Examples
Customer plans, with a fixed color per plan
Use the arrow keys to read each part, or the View table button.
Clientes754
- Essencial41255%
- Profissional26836%
- Empresa749,8%
Thin, with the rest in “Other”
Use the arrow keys to read each part, or the View table button.
Total1.215
- Site54044%
- Instagram31026%
- WhatsApp22819%
- iFood967,9%
- Outros413,4%
Installation
The command creates components/ui/donut-chart.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add donut-chartProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Visible title; also names the chart for screen readers. |
| slices | DonutSlice[] | — | { label, value, color? }. color: "blue" | "yellow" | "pink" | "lime" or any CSS color. |
| format | (value: number) => string | número pt-BR | Formats the values ($, %, units). |
| totalLabel | string | "Total" | What appears in the center above the total. |
| size | number | 180 | Side of the drawing in px. |
| thickness | number | 0.28 | Ring thickness as a fraction of the radius, from 0.1 to 0.5. |
| legend | "side" | "bottom" | "side" | Where the legend goes. |
| description | ReactNode | — | Line below the title (period, source). |
| tableToggle | boolean | true | Shows the View table button. |