Charts dataanalyticschartdonutpie

Donut Chart

A minimalist donut chart with a centered label and interactive segments.

Loading Chart...

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { DonutChart } from 'astro-component-kit';

const labels = ['Desktop', 'Mobile', 'Tablet'];
const series = [65, 25, 10];
---

<DonutChart 
  title="Device Share"
  labels={labels}
  series={series}
  centerLabel="Devices"
/>
--- import { DonutChart } from 'astro-component-kit'; const labels = ['Desktop', 'Mobile', 'Tablet']; const series = [65, 25, 10]; --- <DonutChart title="Device Share" labels={labels} series={series} centerLabel="Devices" />

Manual Installation

If you are not using the npm package, create a new file src/components/lib/DonutChart.astro and paste the following code:

astro 
---
import { DonutChart } from 'astro-component-kit/charts';

// Example 1: Standard Donut
const labels1 = ['Desktop', 'Mobile', 'Tablet'];
const series1 = [65, 25, 10];

// Example 2: Full Pie
const labels2 = ['Completed', 'Pending', 'Delayed'];
const series2 = [70, 20, 10];
---

<!-- Standard Donut -->
<DonutChart 
  title="Device Distribution"
  labels={labels1}
  series={series1}
  centerLabel="Devices"
/>

<!-- Full Pie Chart -->
<DonutChart 
  title="Task Status"
  labels={labels2}
  series={series2}
  pie={true}
  colors={['#10b981', '#f59e0b', '#ef4444']}
/>
--- import { DonutChart } from 'astro-component-kit/charts'; // Example 1: Standard Donut const labels1 = ['Desktop', 'Mobile', 'Tablet']; const series1 = [65, 25, 10]; // Example 2: Full Pie const labels2 = ['Completed', 'Pending', 'Delayed']; const series2 = [70, 20, 10]; --- <!-- Standard Donut --> <DonutChart title="Device Distribution" labels={labels1} series={series1} centerLabel="Devices" /> <!-- Full Pie Chart --> <DonutChart title="Task Status" labels={labels2} series={series2} pie={true} colors={['#10b981', '#f59e0b', '#ef4444']} />

Quick Info

Category
Charts
Filename
DonutChart.astro
Dependencies
apexcharts (peer)
Tags
dataanalyticschartdonutpie