v2.10.11

VueUiFlow : Node Categorization & Legend Support

Enregistrement.de.l.ecran.2025-06-15.a.09.57.16.mov

New Configuration Options

nodeCategories (config.nodeCategories)

Type: Record<string, string>
Map each Sankey node to a high-level category.

// e.g.
nodeCategories: {
   'Mining': 'raw',
   'Copper': 'component',
   'Lithium': 'component',
   'PCB Assembly': 'manufacturing',
   'Battery Production': 'manufacturing',
    // …
}

nodeCategoryColors (config.nodeCategoryColors)

Type: Record<string, string>
Assign a distinct color to each category name.

// e.g.
nodeCategories: {
   raw: '#8B4513',
   component: '#1E90FF',
   manufacturing: '#FFD700',
   // …
}

With both nodeCategories and nodeCategoryColors provided, your chart will automatically:

• Color every node according to its assigned category.
• Render an interactive legend below the chart, displaying each category name and its color swatch.
• Support drilling/filtering: clicking a legend item highlights only the nodes & links in that category (and fades out others).

Summing up:

const config = {
  nodeCategories: {},
  nodeCategoryColors: {},
  style: {
    chart: {
      legend: {
        backgroundColor: "#F3F4F6",
        color: "#1A1A1A",
        show: true,
        fontSize: 14,
        bold: false,
      }
    }
  }
}

Docs are up to date