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

v2.9.5

VueUiTable

• Use VueUiXy and VueUiDonut as chart components instead of old built-in charts

• Config changes:

const vue_ui_table = ref({
    //...
    style: {
        chart: {
            layout: {
                line: {
                    smooth: true, // new
                    useArea: false, // new
                    selector: {
                        stroke: '#ccc', // Deprecated
                        strokeWidth: 1, // Deprecated
                        strokeDasharray: 5 // Deprecated
                    }
                },
            }
        }
    },
})