v2.7.5

Built-in annotator: text mode

• Allow users to add text annotations on charts

Enregistrement.de.l.ecran.2025-05-24.a.22.20.30.mov

v2.7.2

VueUiXy

• Add a config option to cut lines and areas on null values. Set to false by default, so it does not lead to breaking changes.

const config = {
  line: {
    cutNullValues: false,
  }
}

VueUiChestnut

• Improve the proportions of expanded donuts so it's more visually pleasing
  

v2.7.1

VueUi3dBar #192

• Remove default labels when using formatter

v2.7.0

Remove html2canvas dependency

html2canvas was removed as a dependency, in favor of a tailor-made dom to image solution which fits the specific needs of vue-data-ui, to generate chart images or pdfs.

The vue-ui-screenshot component was removed.

v2.6.51

VueUiWordCloud & VueUiMolecule

• Add a reset button when zoom is active

Enregistrement.de.l.ecran.2025-05-17.a.07.51.26.mov

If you need to customize the button, a #reset-action slot is available.
Use reset(true) to reset the animation with the animation, or just reset() without animation.

<VueUiWordCloud :dataset="dataset" :config="config">
  <template #reset-action="{ reset }">
    <button @click="reset(true)">REFRESH</button>
  </template>
</VueUiWordCloud>

v2.6.50

VueUiWordCloud

• Improve word packing algorithm
• Use pan zoom instead of a range input (zoom now works with the mouse wheel, and pinch on touch devices)

Enregistrement.de.l.ecran.2025-05-16.a.07.53.59.mov

The following config attributes (color, highlightColor, useResetSlot), which were related to the old range input zoom, are deprecated:

const config = {
  style: {
    chart: {
      zoom: {
        show: true,
        color: #E1E5E8, // deprecated
        highlightColor: #CCCCCC, // deprecated
        useResetSlot: false // deprecated
      }
    }
  }
}

v2.6.48

VueUiIcon

Add new icons:

name	icon
computer
home
homeFilled
hourglass
htmlTag
curlyBrackets
curlySpread

Check out all available icons

v2.6.47

VueUiDonut & VueUiNestedDonuts

Add padding config option in config.style.chart.padding

const config = {
  style: {
    chart: {
      padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    }
  }
}

DOCS and chart builder pages are up to date

v2.6.46

VueUiTreemap

• Improve drilling feature

• Add breadcrumbs

Enregistrement.de.l.ecran.2025-05-05.a.20.24.09.mov

Clicking breadcrumbs will drill back to the selected node. Breadcrumbs are only visible when drilling down.
Breadcrumbs are customizable through scoped slots:

#breadcrumb-label and #breadcrumb-arrow

<VueUiTreemap :dataset="dataset" :config="config">
  <template #breadcrumb-label="{ crumb, isRoot }">
    <span v-if="isRoot">Home</span>
    <span v-else>{{ crumb.label }}</span>
  </template>

  <template #breadcrumb-arrow>
    <!-- Use your own icon here -->
    <VueUiIcon name="arrowRight" />
  </template>
</VueUiTreemap>

You can also target the following css classes to override the basic styling of breadcrumbs:

.vue-ui-treemap-breadcrumbs{} /* nav wrapping element*/

.vue-ui-treemap-crumb{} /* individual wrapper for each breadcrumb */

.vue-ui-treemap-crumb-unit{} /* sub-wrapper for each breadcrumb */

.vue-ui-treemap-crumb-unit-label{} /* wrapper for the label */

.vue-ui-treemap-crumb-unit-arrow{} /* wrapper for the arrow */

v2.6.43

Print options

Add optional control over html2canvas options for pdf and image generation, in userOptions.print:

print: {
    allowTaint: boolean // default: false
    backgroundColor: string // default: '#FFFFFF'
    useCORS: boolean // default: false
    onclone: (doc: Document) => void || null // default: null
    scale: number // default: 2
    logging: boolean // default: false
}