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
}

v2.6.41

VueUiMolecule #190

Add an optional color attribute to datapoints, to customize individual datapoint colors.
Setting a color on a node will trickle down the color to its children, unless this children also has a defined color.

type VueUiMoleculeDatasetNode = {
    name: string
    details?: string
    nodes?: VueUiMoleculeDatasetNode[]
    color?: string // new
}

v2.6.40

VueUiHeatmap (patch to v2.6.38)

Fix issue with dynamic Y positioning of column totals.

v2.6.39

Zoom feature

This is a very minor improvement on the zoom feature. Now when hovering an input handle, the time label's z-index takes preeminence, to keep labels readable at all times.

v2.6.38

VueUiHeatmap

Add optional row and column totals, with colors.

New config attributes

const config = ref({
  style: {
    layout: {
      cells: {
        rowTotal: {
          value: {
            show: true, // default: false
          },
          color: {
            show: true, // default: false
          }
        },
        columnTotal: {
          value: {
            show: true, // default: false
            rotation: 0, // default: 0
            offsetX: 0, // default: 0
            offsetY: 0, // default: 0
          },
          color: {
            show: true, // default: false
          }
        }
      }
    }
  }
})

Docs are up to date, as well as the chart builder.