graphieros/vue-data-ui v3.26.0 on GitHub

New features

Drag to zoom

Enregistrement.de.l.ecran.2026-10-02.a.07.22.15.mov

The zoom configuration adds an optional drag-to-zoom feature for the following components:

This new feature is disabled by default to avoid any breaking change in your setups:

zoom: {
    // New
    dragToZoom: {
        show: false,
        selection: {
            fill: "#1f77b4",
            stroke: "#A1A1A1",
            fillOpacity: 0.2,
            strokeOpacity: 0.5,
            strokeWidth: 1,
            strokeDasharray: 0,
        }
    }
}

When in zoom state, hitting Esc or double-clicking on the chart will reset the zoom state.
Drag-to-zoom is also added to the VueUiSparkline component, also disabled by default:

const config = computed<VueUiSparklineConfig>(() => ({
    // New
    zoom: {
        show: false,
        selection: {
            fill: "#2D353C",
            stroke: "transparent",
            fillOpacity: 0.1,
            strokeOpacity: 0.5,
            strokeWidth: 1,
            strokeDasharray: 0,
        },
        // A tiny reset button appears at the bottom right of the chart when the zoom is active
        resetButton: {
            show: true,
            title: "Reset zoom · double-click chart or press Esc",
            ariaLabel: "Reset zoom",
            color: "#2D353C",
        },
    },
}));

Zoom sync between component instances

It is now possible to sync zoom states between components (that have the zoom feature). It is preferable for these instances' datasets to have the same range of data points.
It is possible to sync zoom states between components that have this feature.

Enregistrement.de.l.ecran.2026-10-02.a.19.37.44.mov

// Declare this ref in the component where chart instances are placed
const zoomState = ref<VueUiZoomState>(null);

<template>
    <!-- Just use the model on all instances to sync their zoom state -->
    <VueUiXy
        v-model:zoom-state="zoomState"
        :dataset="datasetXy"
        :config="configXy"
    />
    <VueUiStackbar
        v-model:zoom-state="zoomState"
        :dataset="datasetBars"
        :config="configBars"
    />
</template>

Fixes

`VueUiSparkline`

fix bars overflow in bar mode, especially visible when only a few data points are provided

Other

`VueUiSparkline`

disable animation by default

`VueUiXyCanvas`

add events in config:

const config = computed<VueUiXyCanvasConfig>(() => ({
    // Default:
    events: {
        datapointEnter: null,
        datapointLeave: null,
        datapointClick: null,
    },
    /**
     * For example:
     *
     * datapointEnter: ({ seriesIndex }) => {
     *  selectedIndex.value = seriesIndex;
     * },
     * datapointLeave: () => {
     *  selectedIndex.value = null;
     * }
     */
}));

And, as always, docs are up to date.