🥧 Gráfico Circular (Pie Chart)

Muestra la proporción de cada categoría como un segmento de un círculo. Es funcionalmente idéntico al gráfico de dona, pero sin el centro hueco.

---

![Demostración del uso del componente]

1. Gráfico Circular Básico

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

{
  type: 'pie',
  data: {
    labels: ['Rojo', 'Azul', 'Amarillo'],
    datasets: [{
      data: [300, 50, 100]
    }]
  }
}

---

2. Gráfico Circular con Colores Personalizados

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

{
  type: 'pie',
  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 Circular 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: 'pie',
  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).