Donut

Alpha

A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.

Component Source

Installation ​

Run the following command ​

pnpm dlx shadcn-vue@latest add chart-donut

Setup ​

Follow the guide to complete the setup.

API ​

Prop

colors
string[]

Change the default colors.

index
stringRequired*

Sets the key to map the data to the axis.

data
Record<string, any>[]Required*

The source data, in which each entry is a dictionary.

margin
Spacing

Margin of each the container

filterOpacity
number

Change the opacity of the non-selected field

showTooltip
boolean

Controls the visibility of tooltip.

showLegend
boolean

Controls the visibility of legend.

category
stringRequired*

Sets the name of the key containing the quantitative chart values.

type
'donut' | 'pie'

Change the type of the chart

sortFunction
((a: any, b: any) => number)

Function to sort the segment

valueFormatter
((tick: number, i?: number, ticks?: number[]) => string)

Controls the formatting for the label.

customTooltip
Component

Render custom tooltip component.

Example ​

Pie Chart ​

If you want to render pie chart instead, pass type as pie.

Color ​

We generate colors automatically based on the primary and secondary color and assigned them accordingly. Feel free to pass in your own array of colors.

Custom Tooltip ​

If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition here.

Edit this page on GitHub