🎯 Gráfico de Dispersión (Scatter Chart)

Utiliza puntos para representar los valores de dos variables numéricas diferentes, mostrando la relación entre ellas.

---

![Demostración del uso del componente]

1. Gráfico de Dispersión Básico

{
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Dataset 1',
      data: [
        { x: -10, y: 0 },
        { x: 0, y: 10 },
        { x: 10, y: 5 },
        { x: 0.5, y: 5.5 }
      ],
      backgroundColor: 'rgba(255, 99, 132, 1)'
    }]
  }
}

---

2. Gráfico con Múltiples Series de Datos

Puedes comparar diferentes grupos de datos añadiendo más objetos al array datasets.

{
  type: 'scatter',
  data: {
    datasets: [
      {
        label: 'Grupo A',
        data: [
          { x: 10, y: 20 }, { x: 15, y: 25 }, { x: 12, y: 18 }
        ],
        backgroundColor: 'rgba(255, 99, 132, 0.6)'
      },
      {
        label: 'Grupo B',
        data: [
          { x: 20, y: 10 }, { x: 25, y: 15 }, { x: 18, y: 12 }
        ],
        backgroundColor: 'rgba(54, 162, 235, 0.6)'
      }
    ]
  }
}

---

3. Gráfico con Estilos de Puntos Personalizados

Puedes personalizar la apariencia de los puntos, como su radio y color.

{
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Anomalías Detectadas',
      data: [
        { x: 5, y: 5 }, { x: 8, y: 3 }, { x: 12, y: 9 }
      ],
      backgroundColor: 'rgba(255, 206, 86, 0.8)',
      pointRadius: 8,
      pointHoverRadius: 10
    }]
  }
}

---

📖 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	{ x: number, y: number }[]	Array de objetos que definen cada punto con su coordenada x e y.
backgroundColor	string o string[]	Define el color de relleno de los puntos.
pointRadius	number	El radio de los puntos en píxeles.

---

📖 Propiedades Clave del objeto options

Propiedad	Tipo	Descripción
scales	object	Permite configurar los ejes x e y (ej. para definir un min y max).
title	string	Define un título para el gráfico (menor prioridad que el Input() title).
tooltipLabelFormat	string	Formato para los tooltips (ej. '{l}: (x:{v.x}, y:{v.y})').
tooltipCallback	function	Función para generar HTML personalizado en los tooltips (mayor prioridad que tooltipLabelFormat).