chartjs-chart-treenode

Renderiza gráficos de árbol (tree node) personalizados en Chart.js a partir de enlaces (from, to, value) usando canvas, sin crear nuevos tipos de gráfico, compatible con scatter.

📦 Instalación

npm install chartjs-chart-treenode

O si usas CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treenode"></script>

Versión de prueba:
Si quieres probar una versión experimental (puede contener errores o cambios inestables), puedes instalar:

npm install chartjs-chart-treenode-test

O por CDN:

<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treenode-test"></script>

⚠️ Esta versión es solo para pruebas y puede no ser estable.

🧠 ¿Qué es esto?

Este plugin de Chart.js permite visualizar nodos y relaciones jerárquicas (tipo árbol) usando datasets con enlaces from → to. Calcula automáticamente la profundidad, la posición vertical y dibuja conexiones suavizadas entre nodos, con soporte para colores personalizados, bordes y tooltips flotantes personalizados.

📊 Ejemplo de uso

import Chart from 'chart.js/auto';
import { treeNodePlugin } from 'chartjs-chart-treenode';

Chart.register(treeNodePlugin);

const ctx = document.getElementById('treeChart').getContext('2d');

new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      label: "Cantidad",
      data: [
        { from: "Root1", to: "A", value: 300 },
        { from: "A", to: "B", value: 200 }
      ],
      nodeColors: {
        "A": "#1976d2",
        "B": "orange"
      },
      nodeBorder: "4px",
      nodeBorderColor: "black"
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: { legend: { display: false } },
    scales: {
      x: { display: false, min: 0, max: 1 },
      y: { display: false, min: 0, max: 1 }
    }
  },
  plugins: [treeNodePlugin]
});

🧩 Opciones adicionales en el dataset

• nodeColors: Objeto { label: color } para cambiar el color de cada nodo.
• nodeBorder: Borde de cada nodo (ej. "2px").
• nodeBorderColor: Color del borde.
• column: Objeto { label: columnIndex } para forzar columna de un nodo.
• priority: Objeto { label: prioridad } para definir el orden vertical dentro de una columna.

🧪 Requisitos

• Chart.js ^4.x
• Navegador moderno con soporte para <canvas>

🧑‍💻 Contribuciones

¡Bienvenidas! Puedes abrir un issue o hacer un pull request.

📄 Licencia

MIT