🍩 Gráfico de Dona (Doughnut Chart)

Similar al gráfico de pastel, pero con un centro hueco, ideal para mostrar proporciones de categorías.

---

![Demostración del uso del componente]

1. Gráfico de Dona Básico

Este es el ejemplo más simple, ideal para empezar.

{
  type: 'doughnut',
  data: {
    labels: ['Producto A', 'Producto B', 'Producto C'],
    datasets: [{
      data: [300, 50, 100]
    }]
  }
}

---

2. Gráfico de Dona con Colores Personalizados

Puedes definir colores específicos para cada segmento del gráfico usando la propiedad backgroundColor.

{
  type: 'doughnut',
  data: {
    labels: ['Ventas Online', 'Ventas en Tienda', 'Ventas por Teléfono'],
    datasets: [{
      data: [450, 210, 85],
      backgroundColor: [
        'rgba(54, 162, 235, 0.8)',
        'rgba(255, 99, 132, 0.8)',
        'rgba(255, 206, 86, 0.8)'
      ],
      hoverBackgroundColor: [
        'rgba(54, 162, 235, 1)',
        'rgba(255, 99, 132, 1)',
        'rgba(255, 206, 86, 1)'
      ]
    }]
  }
}

---

3. Gráfico de Dona con Título y Tooltips Formateados

Utiliza el objeto options para añadir un título y personalizar la información que se muestra en los tooltips.

{
  type: 'doughnut',
  data: {
    labels: ['Completado', 'Pendiente', 'Cancelado'],
    datasets: [{
      data: [120, 45, 15]
    }]
  },
  options: {
    title: 'Estado de Tareas',
    tooltipLabelFormat: '{l}: {v} tareas'
  }
}

---

📖 Propiedades Clave del Dataset

Propiedad	Tipo	Descripción
data	number[]	Array de valores numéricos que representan cada segmento del gráfico.
backgroundColor	string[]	Array de colores para cada segmento. Si no se provee, se usan los colores por defecto.
hoverBackgroundColor	string[]	Array de colores para cada segmento cuando el cursor pasa sobre ellos.

---

📖 Propiedades Clave del objeto data

Propiedad	Tipo	Descripción
labels	string[]	Array de etiquetas que corresponden a cada segmento en el dataset.
datasets	object[]	Arreglo que contiene el objeto del dataset. Ver la tabla "Propiedades Clave del Dataset".

---

📖 Propiedades Clave del objeto options

Propiedad	Tipo	Descripción
title	string	Define un título para el gráfico (menor prioridad que el Input() title).
tooltipLabelFormat	string	Formato para los tooltips (ej. '{l}: {v} unidades'). {l} es la etiqueta y {v} es el valor.
tooltipCallback	function	Función para generar HTML personalizado en los tooltips (mayor prioridad que tooltipLabelFormat).