1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Gráficos y Estadísticas dataanalyticschartdonutpie

Donut Chart

Gráfico circular de tipo dona con proporciones porcentuales y leyenda de colores interactiva.

Loading Chart...

Uso

Copia y pega este código directamente en tu página de Astro:

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" />

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/DonutChart.astro:

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']} />

Información Rápida

Categoría
Gráficos y Estadísticas
Nombre de archivo
DonutChart.astro
Dependencias
apexcharts (peer)
Etiquetas
dataanalyticschartdonutpie