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

v2.10.7

VueUiFlow

• Add optional tooltip

const config = ref({
    style: {
        chart: {
            tooltip: {
                show: true,
                color: "#1A1A1A",
                backgroundColor: "#F3F4F6",
                fontSize: 14,
                showPercentage: true,
                roundingPercentage: 0,
                customFormat: null,
                borderRadius: 4,
                borderColor:"#e1e5e8",
                borderWidth: 1,
                backgroundOpacity: 30,
                position: "center",
                offsetY: 24,
                showPercentage: true,
                roundingPercentage: 0,
                translations: {
                    from: 'From:',
                    to: 'To:',
                    percentOfTotal: 'Percent of total:'
                }
            }
        }
    }
})

Documentation is up to date, as well as the chart maker.

v2.10.6

VueUiNestedDonuts

• Add optional start animation

Enregistrement.de.l.ecran.2025-06-14.a.10.52.32.mov

• Improve easing animation when segregating series (clicking on legends)

New config attributes:

const config = ref({
  // Animation used when segregating series from clicking the legend items
  serieToggleAnimation: {
    show: true,
    durationMs: 500,
  },
  // Animation used once on load
  startAnimation: {
    show: true,
    durationMs: 1000,
    staggerMs: 50
  },
})

Docs are up to date

v2.10.5

VueUiDashboard #208

• Add #top and #bottom slots to add extra content above or below the charts

        <VueUiDashboard :dataset="dataset" :config="config">
            <template #top="{ item }">
                <button>My button on top</button>
            </template>

            <template #content="{ item }">
                <component :is="item.component" v-bind="item.props" />
            </template>

            <template #bottom="{ item }">
                Content below
            </template>
        </VueUiDashboard>

v2.10.4

VueUiHeatmap

• Add @selectDatapoint emit, triggered when clicking on a cell

Emits the cell data:

{
  side: 'up' | 'down' // above or below average
  color: string
  ratio: number
  value: number
  xAxisName: string | number | undefined
  yAxisName: string | number | undefined
  id: string // internal uuid
}

v2.10.3

VueUiDonut

• Add optional start animation

Enregistrement.de.l.ecran.2025-06-11.a.14.57.47.mov

• Improve easing animation when segregating series (clicking on legends)

New config attributes:

const config = ref({
  // Animation used when segregating series from clicking the legend items
  serieToggleAnimation: {
    show: true,
    durationMs: 500,
  },
  // Animation used once on load
  startAnimation: {
    show: true,
    durationMs: 1000,
    staggerMs: 50
  },
})

Docs are up to date

v2.10.2

VueUiWordCloud

• Minor performance improvements

v2.10.1

Tooltips

• Apply a smoother subtle position transition for tooltips

v2.10.0

VueUiRidgeline

New component

A ridgeline chart (also known as a joyplot) is a series of line plots that are combined by vertical stacking to allow the easy visualization of changes through space or time. The plots are often overlapped slightly to allow the changes to be more clearly contrasted.

Ridgeline charts are perfect for comparing distributions across categories or time—especially when you want to show patterns, overlaps, or trends among many groups at once

Usage examples

• Visualize distributions over time of daily temperatures
• Analyze word frequencies across chapters in different books
• Compare the distribution of daily returns for various stock market sectors

Clicking on the label of a datapoint singles it out inside a resizable and draggable dialog.

🔗 View the docs

🔗 View examples

A chart maker is also available to quickly copy paste a turnkey boilerplate.

Enregistrement.de.l.ecran.2025-06-08.a.09.02.30.mov

v2.9.6

VueUiWorld

• Fix issue with legend colors