Preview

Installation

npx sigma-ui@latest add chart-donut

Setup

Charts need the Unovis color variables from the Charts installation.

Usage

<script setup lang="ts">
import { DonutChart } from '@/components/ui/chart-donut';

const data = [
  { name: 'Direct', total: 400 },
  { name: 'Referral', total: 250 },
];
</script>

<template>
  <DonutChart
    :data="data"
    index="name"
    category="total"
  />
</template>

Set type to pie for a filled pie chart. Pass colors to override the generated palette.

Examples

Pie

Color

Custom tooltip

Pass a component to customTooltip. It receives title and data. See the Charts page for the prop shape.

API Reference

DonutChart

Props

Prop	Type	Default
datarequired The source data, in which each entry is a dictionary.	T[]	-
indexrequired Sets the key to map the data to the axis.	Extract<keyof T, string>	-
colors Change the default colors.	string[]	-
margin Margin of each the container	Spacing	{ top: 0, bottom: 0, left: 0, right: 0 }
filterOpacity Change the opacity of the non-selected field	number	0.2
showTooltip Controls the visibility of tooltip.	boolean	true
showLegend Controls the visibility of legend.	boolean	true
categoryrequired Sets the name of the key containing the quantitative chart values.	Extract<keyof T, string>	-
type Change the type of the chart	"donut" | "pie"	"donut"
sortFunction Function to sort the segment	((a: any, b: any) => number)	-
valueFormatter Controls the formatting for the label.	((tick: number, i?: number, ticks?: number[]) => string)	`${tick}`
customTooltip Render custom tooltip component.	Component	-

Slots

Slot	Scope
default The content of the component.	-

Accessibility

The chart is an SVG graphic. The legend lists each slice. Give the surrounding section a heading that states what the chart measures, and do not rely on color alone to tell the slices apart.

Key	Description
Tab	Moves focus past the chart. Slices are not individually focusable.