Donut Chart

Display proportional data as a donut chart with a hollow center, perfect for dashboards and data visualization.

Loading chart...

Installation

npm

npx @galaxy-stack/nebula-cli@latest add donut-chart

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add donut-chart

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add donut-chart

bun

bunx @galaxy-stack/nebula-cli@latest add donut-chart

Dependencies

This component automatically installs the following dependencies:

• Vue: vue-echarts@^7.0.3, echarts@^5.5.1
• React: echarts-for-react@^3.0.2, echarts@^5.5.1
• Angular: ngx-echarts@^18.0.0, echarts@^5.5.1
• React Native: @wuba/react-native-echarts@^3.0.1, echarts@^5.5.1, @shopify/react-native-skia@^1.6.4
• Flutter: fl_chart@^0.68.0

Features

• 🍩 Hollow Center - Distinctive donut shape with customizable inner radius
• 📊 Data Visualization - Perfect for showing proportions and percentages
• 🎨 Customizable - Full control over colors, labels, and styling
• 📱 Responsive - Adapts to all screen sizes
• 🌓 Dark Mode - Built-in dark theme support
• ⚡ Performance - Optimized rendering for smooth interactions

Use Cases

• Dashboard KPIs - Display key metrics with visual impact
• Market Share - Show distribution across categories
• Budget Allocation - Visualize spending or resource distribution
• Progress Tracking - Show completion status
• Survey Results - Display poll or survey data

API Reference

Props

Prop	Type	Default	Description
data	ChartData	required	Chart data with labels and datasets
height	number	300	Chart height in pixels
width	number | string	"100%"	Chart width
theme	"light" | "dark"	"light"	Color theme
legend	boolean	true	Show/hide legend
legendPosition	"top" | "bottom" | "left" | "right"	"right"	Legend position
innerRadius	number	50	Inner radius percentage (0-100)
outerRadius	number	70	Outer radius percentage (0-100)
showPercentage	boolean	true	Show percentage in labels
labelPosition	"inside" | "outside" | "center"	"outside"	Label position
loading	boolean	false	Show loading state
emptyText	string	"No data available"	Text shown when no data

ChartData Interface

interface ChartData {
  labels: string[]
  datasets: ChartDataset[]
}

interface ChartDataset {
  label: string
  data: number[]
  backgroundColor?: string[]
}

Examples

Custom Inner Radius

Adjust the hollow center size:

Vue

<DonutChart :data="data" :innerRadius="60" />

React

<DonutChart data={data} innerRadius={60} />

Inside Labels

Display labels inside the segments:

Vue

<DonutChart :data="data" labelPosition="inside" />

React

<DonutChart data={data} labelPosition="inside" />

Dark Theme

Vue

<DonutChart :data="data" theme="dark" />

React

<DonutChart data={data} theme="dark" />

Related Components

• Pie Chart - For pie charts without hollow center
• Bar Chart - For categorical comparisons
• Line Chart - For trends over time