v3.3.1

SVG export

• Fix cropped foreignObjects when custom content is added through slots

VueUiHeatmap

• FIx chart resizing not working when time labels are rotated

v3.3.0

New SVG export feature #256

This feature is now enabled by default on all svg charts.

To disable it from the config:

const config = ref({
  userOptions: {
    buttons: {
      svg: false,
    }
  }
})

To rename the label:

const config = ref({
  userOptions: {
    buttonTitles: {
      svg: 'Download SVG',
    }
  }
})

As for other export methods, a callback is available which returns the dataUrl, should you wish to plug your own SVG export thing instead of the default download:

const config = ref({
  userOptions: {
    callbacks: {
      svg: ({ dataUrl, blob, text, url }) => {
        console.log(dataUrl)
      }
    }
  }
})

Important: the downloaded svg will render system fonts

New svg icon usable in VueUiIcon

<VueUiIcon name="svg"/>

Docs are up to date

v3.2.8

All components

• Add vue-data-ui-component css class to all components

v3.2.7

VueUiAccordion

• Disable pointer events on content when the accordion is closed.

v3.2.6

VueUiTable

• Add config options to customize header action buttons

const config = ref({
  style: {
    th: {
      buttons: {
        filter: {
          inactive: {
            backgroundColor: '#E1E5E8',
            color: '#2D353C',
          },
          active: {
            backgroundColor: '#1f77b4',
            color: '#FFFFFF',
          },
        },
        cancel: {
          inactive: {
            backgroundColor: '#E1E5E8',
            color: '#2D353C',
          },
          active: {
            backgroundColor: '#F17171',
            color: '#FFFFFF',
          },
        },
      }
    }
  }
})

VueUiXyCanvas

• timeLabels configuration is moved to x instead of y. This change is backwards compatible: your existing time labels configuration under Y will still work.

VueUiXy

• Allow partial configuration for highlightArea

Docs are up to date

v3.2.5

VueUiTable #255

Add optional title:

const config = ref({
  style: {
    title: {
      text: 'My title',
      color: '#2D353C',
      backgroundColor: '#FFFFFF',
      fontSize: 16,
      bold: true,
      textAlign: 'center',
      paddingLeft: 0,
      paddingRight: 0,
      subtitle: {
        text: 'My subtitle',
        fontSize: 14,
        color: '#6A6A6A',
        bold: false,
      }
    }
  }
})

v3.2.4

VueUiAnnotator

Layout improvements (new icons)

New features:

• keyboard shortcuts
• undo + redo
• download PNG

New config attributes:

const config = ref({
  alwaysVisible: false, // New: when set to false, annotations are only visible when the annotations menu is open
  style: {
    showImage: true, // New: show download to PNG button
  },
  translations: {
    tooltipRedo: 'Redo last shape', // New
    tooltipImage: 'Download PNG', // New
  }
})

VueUiAccordion

• Add @toggle event

<VueUiAccordion
  :config="config"
  @toggle="onToggle"
>
...
</VueUiAccordion>

• New config attributes to customize the header icon:

const config = ref({
  head: {
    icon: 'arrowRight', // New: available built-in icons (see VueUiIcon)
    iconSize: 20, // New
  }
})

Docs are up to date

v3.2.2

VueUiTable

• Improve line & bar chart layouts with zoom input, and date labels

New config attributes:

const config = ref({
  style: {
    chart: {
      layout: {
        timeLabels: {  // new
          showOnlyAtModulo: true,
          modulo: 12
        },
        datetimeFormatter: {  //new
          enable: true,
          locale: 'en',
          useUTC: false,
          januaryAsYear: true,
          options: {
            year: 'yyyy',
            month: "MMM 'yy",
            day: 'dd MMM',
            hour: 'HH:mm',
            minute: 'HH:mm:ss',
            second: 'HH:mm:ss'
          }
        },
        zoom: {  // new
          show: true,
        }
      }
    }
  }
})

VueUiWheel

• Improve 3d options with depth

Enregistrement.de.l.ecran.2025-09-26.a.08.19.18.mov

New config option:

const config = ref({
  style: {
    chart: {
      layout: {
        wheel: {
          ticks: {
            depth3d: 0, // New: default 0.
          }
        }
      }
    }
  }
})

Other

• Fix trend calculation in VueUiXy (when dataset.useProgression is true) and VueUiTable (line & bar charts)

v3.2.1

VueUiWheel #254

Add new optional 3d mode

Enregistrement.de.l.ecran.2025-09-23.a.07.50.05.mov

wh.mov

Examples and code snippets in the docs

New config attributes:

const config = ref({
  layout: "3d", // New. Default: 'classic' (previous behavior)
  style: {
    chart: {
      layout: {
        wheel: {
          tiltAngle3d: 50, // New. Default: 50, used in 3d mode
        },
        percentage: {
          offsetX: 0, // New. Default: 0
          offsetY: 0, // New. Default:  0
          stroke: 'transparent', // New. Default: 'transparent', apply border color on the label
          strokeWidth: 0, // New. Default:  0
        }
      }
    }
  }
})

VueUiQuickChart

• Fix possible dasharray issues in line mode, when animation is enabled and line is too 'long'.

VueUiXy

• In zoom minimap, when cutNullValues is false, join non-null datapoints for line series (same behavior as main chart)

v3.2.0

Treeshaking #252

Usage:

BEFORE:
The old way, which still works, so nothing will break.

// still works, for backwards compatibility, but ships the whole library
import { VueUiXy } from "vue-data-ui";

AFTER:

// only ships the component and its dependencies
import VueUiXy from "vue-data-ui/vue-ui-xy";

In Nuxt, to declare components globally in vue-data-ui.client.ts for example:

import { defineNuxtPlugin } from '#app'
import { defineAsyncComponent } from 'vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VueUiXy', defineAsyncComponent(() => import('vue-data-ui/vue-ui-xy')))
  // add only the components you actually use
})

Checkout our Nuxt boilerplate to get started

⚠️ The VueDataUi universal component is not tree-shaking friendly

// Will include all components in the build, but will lazy load only the component consumed to the client (unchanged behavior)
import { VueDataUi } from "vue-data-ui";