Donut Chart

Implement circular data visualizations with the Donut Chart component.

Basic Usage

<script lang="ts" setup>
const DonutData = [
  {
    color: '#3b82f6',
    name: 'Blue',
    value: 50,
  },
  {
    color: '#a855f7',
    name: 'Gray',
    value: 20,
  },
  {
    color: '#22c55e',
    name: 'Green',
    value: 30,
  },
]
</script>

<template>
  <DonutChart
    :data="DonutData.map((i) => i.value)"
    :height="275"
    :labels="DonutData"
    :hide-legend="true"
    :radius="0"
  >
    <div class="absolute text-center">
      <div class="font-semibold">Label</div>
      <div class="text-muted">2 seconds ago</div>
    </div>
  </DonutChart>
</template>

Donut Chart with Legend

<script setup lang="ts">
const donutData = ref([35, 25, 20, 15, 5]) // Percentages

const marketShareLabels = [
  { name: 'Product A', color: '#3b82f6' }, // Blue
  { name: 'Product B', color: '#22c55e' }, // Green
  { name: 'Product C', color: '#f59e0b' }, // Amber
  { name: 'Product D', color: '#a855f7' }, // Purple
  { name: 'Other', color: '#06b6d4' }, // Cyan
]
</script>

<template>
  <DonutChart
    :data="donutData"
    :height="300"
    :radius="0"
    :type="'full'"
    :labels="marketShareLabels"
  >
    <div class="absolute text-center">
      <div class="font-semibold">Label</div>
      <div class="text-muted">2 seconds ago</div>
    </div>
  </DonutChart>
</template>

Props

Prop	Type	Default	Description
`data`	`DonutChartData[]`	`[]`	Array of data points for the chart.
`categories`	`Record<string, DonutCategory>`	`{}`	Series configuration: name and color for each data key.
`height`	`number`	`300`	Height of the chart in pixels.
`width`	`number`	`300`	Width of the chart in pixels.
`inner-radius`	`number`	`0.6`	Inner radius ratio (0-1).
`outer-radius`	`number`	`1`	Outer radius ratio (0-1).
`pad-angle`	`number`	`0`	Padding angle between segments in radians.
`corner-radius`	`number`	`0`	Corner radius for segments.
`legend-position`	`LegendPosition`	`'none'`	Position of the legend.
`hide-legend`	`boolean`	`true`	Hide the chart legend.
`show-labels`	`boolean`	`false`	Show percentage labels on segments.
`label-formatter`	`(data: DonutChartData, key: string) => string`	-	Function to format segment labels.
`show-tooltip`	`boolean`	`true`	Show tooltip on hover.
`tooltip-formatter`	`(data: DonutChartData, key: string) => string`	-	Custom formatter for tooltip content.

Data Format

The data should be an array of objects where each object represents a segment:

interface DonutChartData {
  category: string
  value: number
  [key: string]: string | number
}

Categories Format

Categories define the visual appearance for the chart:

interface DonutCategory {
  name: string
  color: string
}

interface DonutCategories {
  [key: string]: DonutCategory
}

Color Mapping

For multi-category donut charts, you can define colors for each segment:

multi-color-donut.vue

<script setup lang="ts">
const data = [
  { category: 'Desktop', value: 65 },
  { category: 'Mobile', value: 25 },
  { category: 'Tablet', value: 10 },
]

const categories = {
  desktop: { name: 'Desktop', color: '#3b82f6' },
  mobile: { name: 'Mobile', color: '#10b981' },
  tablet: { name: 'Tablet', color: '#f59e0b' },
}
</script>

<template>
  <DonutChart
    :data="data"
    :categories="categories"
    :height="300"
  />
</template>

Legend Positions

Available legend positions:

LegendPosition.Top - Above the chart
LegendPosition.Bottom - Below the chart
LegendPosition.Left - Left of the chart
LegendPosition.Right - Right of the chart
'none' - No legend displayed

Line Chart

Create single and multiple line visualizations in your Nuxt application.

Progress Circle

Display circular progress indicators with the ProgressCircle component.