v3.19.1

VueUiCirclePack

Add support for recursive children.

type VueUiCirclePackDatasetItem = {
    name: string
    value: number
    color?: string
    children?: VueUiCirclePackDatasetItem[]
}

Other features:

• pan zoom:

Enregistrement.de.l.ecran.2026-05-03.a.10.24.44.mov

• new config attributes to control parent tooltips

Docs are up to date

v3.18.5

VueUiXy

• Expose resetZoom public method
• Add new config attribute to persist the zoom state when dataset or config are dynamically updated:

const config = computed<VueUiXyConfig>(() => {
  chart: {
    zoom: {
      keepState: false // default = previous behavior
    }
  }
})

v3.18.4

VueUiXy

• Expose the zoom start and end indices in the #svg slot
• Render gradients on a flat line when using temperatureColors

v3.18.3

Zoom component

• Fix handle dragging issue in Firefox

v3.18.2

VueUiScatter #326

• Expose new attributes to the #legend slot:

onEnter: () => void
onLeave: () => void
hasGroupSelection: boolean
isGroupSelected: boolean

A custom legend can now trigger datapoint highlighting.

🔗 Implementation example

v3.18.1

VueUiXy #331

Improve datapoint labels display options:

• enable multiline labels through the formatter:

const config = computed(() => {
    return {
        bar: {
            labels: {
                formatter: ({ value }) => `My prefix\n${value}`
            }
        }
    }
})

The formatter can now also return arrays, that will be converted into line breaks:

const config = computed(() => {
    return {
        bar: {
            labels: {
                formatter: ({ value }) => ['My prefix', value]
            }
        }
    }
})

• New config options to adjust label placement:

const config = computed(() => {
    return {
        bar: {
            labels: {
                formatter: ({ value }) => ['My prefix', value],
                offsetX: 0,
                rotation: 0,
                textAnchor: null, // or 'start' | 'middle' | 'end'
                alwaysOnTop: false // if true, will always position the label on top of the datapoint (can be handy for bar types when mixing positive and negative values)
            }
        }
    }
})

Tip

The same options are applied for the 3 series types (bar, line, plot)

Documentation website is up to date

v3.18.0

Add types to all slots

• Type definitions for all slots were improved and have autocomplete in the templates:

Examples of TS implementations for all components were added here.

VueUiXy: new option to show lines as steps (staircase) #329

const dataset = computed<VueUiXyDatasetItem[]>(() => {
  return [
    {
      name: 'Staircase',
      type: 'line',
      series: [0, 1, 1, 2, 3, 5, 8, 13, 21],
      useStepper: true // new, for line types only
    }
  ]
})

See examples here and here (with area)

VueUiCirclePack

• Improve packing algorithm to place more smaller circles in the spaces between larger ones

Zoom minimaps

• Fixed drag issue that could occur with very large datasets

New adaptColorToBackground utility function

• Handy when customising datapoint contents with texts, when not knowing in advance their background color.

import { adaptColorToBackground } from "vue-data-ui/utils";

// The background color can be of any format (rgb, rgba, hsl, oklch, name color)
const textColor1 = adaptColorToBackground('#000000') // Result: '#FFFFFF'
const textColor2 = adaptColorToBackground('#FFFFFF') // Result: '#000000',
const textColor3 = adaptColorToBackground('#000000', {
    light: '#00FF00',
    dark: '#FF0000'
}) // Result: '#00FF00'
const textColor4 = adaptColorToBackground('#FFFFFF', {
    light: '#00FF00',
    dark: '#FF0000'
}) // Result: '#FF0000'

Docs are up to date

v3.17.13

VueUiScatter

New configuration options to improve layouts for datasets with a small number of entries.
All new options:

const config = computed(() => ({
    style: {
        layout: {
            plots: {
                hoverRadiusRatio: 2,
                opacityNotSelected: 0.6,
                name: {
                    show: false,
                    fontSize: 12,
                    offsetY: 0,
                    color: '#2D353C',
                }
            },
            dataLabels: {
                reverseAxisLabels: false,
                xAxis: {
                    showValue: true,
                    scales: {
                        show: false,
                        steps: 10,
                        useNiceScale: true,
                        labels: {
                            formatter: null,
                            color: '#2D353C',
                            fontSize: 12,
                            offsetY: 0,
                        },
                        verticalLines: {
                            show: false,
                            stroke: '#E1E5E8',
                            strokeWidth: 1,
                        },
                    }
                },
                yAxis: {
                    showValue: true,
                    scales: {
                        show: false,
                        steps: 10,
                        useNiceScale: true,
                        labels: {
                            formatter: null,
                            color: '#2D353C',
                            fontSize: 12,
                            offsetX: 0,
                        },
                        horizontalLines: {
                            show: false,
                            stroke: '#E1E5E8',
                            strokeWidth: 1,
                        },
                    },
                }
            }
        }
    }
}))

📖 Docs are up to date
⚙️ Chart maker is up to date with these new options.

v3.17.11

This release fixes potential errors related to <Teleport> in some test environments, when a component is mounted with a configuration where the legend is disabled:

Failed to locate Teleport target
Invalid Teleport target on mount
Unhandled error during execution of component update

v3.17.9

VueUiQuadrant

Make zoom optional

const config = computed(() => ({
  zoomEnabled: true, // new
}))

Docs are up to date