The DonutChart component provides a flexible and customizable way to visualize proportional data relationships in a circular format, supporting single and multiple segments with customizable colors and legends.
<script setup lang="ts">
const data = ref([65.2, 18.7, 4.3, 3.2, 0.6])
const labels = [
{ name: 'Chrome', color: 'var(--color-primary-400)' },
{ name: 'Safari', color: 'var(--color-indigo-400)' },
{ name: 'Edge', color: 'var(--color-sky-400)' },
{ name: 'Firefox', color: 'var(--color-orange-400)' },
{ name: 'Brave', color: 'var(--color-lime-400)' },
]
const categories: Record<string, BulletLegendItemInterface> =
Object.fromEntries(
labels.map((i) => [i.name, { name: i.name, color: i.color }]),
)
</script>
<template>
<div class="relative">
<DonutChart
:data="data"
:height="275"
:categories="categories"
:hide-legend="true"
:radius="100"
:arc-width="20"
>
<div class="text-center">
<div class="font-semibold">Label</div>
<div class="text-muted">2 seconds ago</div>
</div>
</DonutChart>
</div>
</template>
<script setup lang="ts">
const donutData = ref([35, 25, 20, 15, 5])
const marketShareLabels = [
{ name: 'Product A', color: '#3b82f6' },
{ name: 'Product B', color: '#22c55e' },
{ name: 'Product C', color: '#f59e0b' },
{ name: 'Product D', color: '#a855f7' },
{ name: 'Other', color: '#06b6d4' },
]
const categories: Record<string, BulletLegendItemInterface> =
Object.fromEntries(
marketShareLabels.map((i) => [i.name, { name: i.name, color: i.color }]),
)
</script>
<template>
<DonutChart
:data="donutData"
:height="260"
:categories="categories"
:radius="80"
:pad-angle="0.1"
:arc-width="20"
>
<div class="text-center">
<div class="font-semibold">Label</div>
<div class="text-muted">2 seconds ago</div>
</div>
</DonutChart>
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
type | DonutType | 'full' | The type of donut chart to render. See DonutType for available options (half or full). |
data | number[] | required | The data to be displayed in the donut chart. Each number in the array represents a segment value. |
arcWidth | number | The arc width of the chart in pixels. | |
height | number | required | The height of the chart in pixels. |
radius | number | required | The radius of the donut in pixels. |
hideLegend | boolean | false | If true, hides the chart legend. |
legendPosition | LegendPosition | Optional position for the legend, if applicable. See LegendPosition for available options. | |
legendStyle | string | Record<string, string> | Optional style object for the legend container. Allows custom CSS styling. | |
categories | Record<string, BulletLegendItemInterface> | required | A record mapping category keys to BulletLegendItemInterface objects. This defines the visual representation and labels for each category in the chart's legend. |
padAngle | number | 0 | Pad angle between segments in radians. |
The data should be an array of numbers where each number represents a segment value:
type DonutChartData = number[]
Categories define the visual appearance and labels for each segment in the chart's legend:
interface BulletLegendItemInterface {
name: string
color: string
}
type DonutCategories = Record<string, BulletLegendItemInterface>
<script setup lang="ts">
const data = ref([35, 25, 20, 15, 5])
const labels = [
{ name: 'Product A', color: '#3b82f6' },
{ name: 'Product B', color: '#22c55e' },
{ name: 'Product C', color: '#f59e0b' },
{ name: 'Product D', color: '#a855f7' },
{ name: 'Other', color: '#06b6d4' },
]
const categories: Record<string, BulletLegendItemInterface> =
Object.fromEntries(
labels.map((i) => [i.name, { name: i.name, color: i.color }]),
)
</script>
<template>
<DonutChart
:data="data"
:height="260"
:categories="categories"
:radius="80"
:arc-width="20"
:pad-angle="0.1"
/>
</template>
Available donut chart types:
DonutType.Half or 'half' - Half donut chartDonutType.Full or 'full' - Full donut chart (default)Available legend positions:
LegendPosition.TopRight - Top right of the chartLegendPosition.BottomRight - Bottom right of the chartLegendPosition.Left - Left of the chartLegendPosition.Right - Right of the chart