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
                    }
                },
            }
        }
    },
})

v2.9.2

VueUiTable #203

• Fix dataset reactivity issue

v2.9.1

VueUiWorld #202

To accommodate different perspectives and use cases, the VueUiWorld component now includes a configuration option:

config.style.chart.territory.showTaiwanAsPartOfChina

const config = ref({
  style: {
    chart: {
      territory: {
        showTaiwanAsPartOfChina: true
      }
    }
  }
})

When set to true, Taiwan is displayed as part of China on the map.
When set to false (the default), Taiwan is shown as a separate entity.

This approach is intended to offer flexibility for developers and organizations with varying requirements. We do not take a position on political matters and aim to provide a configurable solution for all users.