📊 Gráfico de Barras Vertical (Bar Chart)

Este es el gráfico de barras estándar, ideal para comparar valores entre diferentes categorías.

---

1. Gráfico de Barras Básico

Un ejemplo simple con una única serie de datos.

![Demostración del uso del componente]

Modelo:

{
  type: 'bar',
  data: {
    labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'],
    datasets: [{
      label: 'Ventas',
      data: [65, 59, 80, 81, 56]
    }]
  }
}

2. Gráfico de Barras Horizontal

Para cambiar la orientación a horizontal, se utiliza la propiedad orientation en las opciones.

![Demostración del uso del componente]

Modelo de datos (IAlpuraChart):

{
  type: 'bar',
  data: {
    labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'],
    datasets: [{
      label: 'Ventas',
      data: [65, 59, 80, 81, 56]
    }]
  },
  options: {
    orientation: 'horizontal'
  }
}

3. Gráfico de Barras Apiladas (Stacked)

Permite apilar múltiples datasets en una sola barra para mostrar la contribución de cada parte al total.

![Demostración del uso del componente]

Modelo de datos (IAlpuraChart):

{
  type: 'bar',
  data: {
    labels: ['Enero', 'Febrero', 'Marzo'],
    datasets: [
      {
        label: 'Ventas Online',
        data: [65, 59, 80],
        backgroundColor: 'rgba(54, 162, 235, 0.8)'
      },
      {
        label: 'Ventas en Tienda',
        data: [28, 48, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.8)'
      }
    ]
  },
  options: {
    scales: {
      x: { stacked: true },
      y: { stacked: true }
    }
  }
}

4. Gráfico Mixto (Barras y Líneas)

Combina diferentes tipos de gráficos en uno solo. El tipo principal se define en type y los secundarios en cada dataset.

![Demostración del uso del componente]

Modelo de datos (IAlpuraChart):

{
  type: 'bar', // Tipo principal
  data: {
    labels: ['Enero', 'Febrero', 'Marzo', 'Abril'],
    datasets: [
      {
        label: 'Ventas (Barras)',
        data: [50, 60, 70, 80],
      },
      {
        label: 'Objetivo (Línea)',
        data: [55, 62, 75, 85],
        type: 'line', // Tipo secundario
        tension: 0.2
      }
    ]
  }
}

---

📖 Propiedades Clave del Dataset

Propiedad	Tipo	Descripción
label	string	El nombre del conjunto de datos, que aparece en la leyenda y los tooltips.
data	number[]	El arreglo de valores numéricos para cada barra.
backgroundColor	string	Define el color de relleno de las barras.
borderColor	string	Define el color del borde de las barras.
borderWidth	number	Define el grosor del borde de las barras.
type	`'bar'	'line'`

---

📖 Propiedades Clave del objeto data

Propiedad	Tipo	Descripción
labels	string[]	Arreglo de etiquetas para el eje X. Cada barra corresponderá a una de estas etiquetas.
datasets	object[]	Arreglo de objetos que representan cada serie de datos. Ver la tabla "Propiedades Clave del Dataset".

---

📖 Propiedades Clave del objeto options

Propiedad	Tipo	Descripción
orientation	string	Puede ser 'horizontal' para cambiar la orientación del gráfico.
scales	object	Permite configurar los ejes. Ver la tabla "Propiedades Clave del objeto scales" para más detalles.
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').
tooltipCallback	function	Función para generar HTML personalizado en los tooltips (mayor prioridad que tooltipLabelFormat).

---

📖 Propiedades Clave del objeto scales

Este objeto se usa dentro de options para configurar los ejes x e y.

Propiedad	Tipo	Descripción
stacked	boolean	Si es true en ambos ejes, apila las barras en lugar de agruparlas.
min	number	Valor mínimo para el rango del eje.
max	number	Valor máximo para el rango del eje.
beginAtZero	boolean	Si es true, fuerza al eje a comenzar en 0.
title	string	Muestra un título para el eje correspondiente (ej. options: { scales: { y: { title: 'Ventas ($)' } } }).