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.

v2.6.37

VueUiXy

Improve datapoint tags behavior and config options

Tags are enabled in the dataset (no change there):

const dataset = ref(
  [
    {
       name: 'Serie A',
       type: 'line',
       series: [1, 2, 3, 5, 8],
       useTag: 'end', // or 'start'; to be set on line or plot types (does not apply on bars)
    }
  ]
)

Config options are added to customize tag content:

// For line datapoints
config.line.tag.followValue: boolean; // default: true
config.line.tag.fontSize: number; // default: 14
config.line.tag.formatter: () => string | null; // default: null

// For plot datapoints
config.plot.tag.followValue: boolean; // default: true
config.plot.tag.fontSize: number; // default: 14
config.plot.tag.formatter: () => string | null; // default: null

The formatter works like all others, for example:

const config = ref({
  line: {
    tag: {
      formatter: ({ value, config }) => {
        const { datapoint, serieName } = config;
        console.log(datapoint);
        return `<div><span>${ serieName }:</span><span>${value.toFixed(1)}</span></div>`
      }
    }
  }
})

v2.6.34

VueUiDonut #188

• Improve responsive behavior
• Add config option to display curved markers:

config.style.chart.layout.curvedMarkers: boolean; // default: false

v2.6.33

VueUiStackbar

Add missing content for #tooltip-before and #tooltip-after scoped slots.

v2.6.32

VueUiDonutEvolution #187

Add config options to hide donut labels under a given percentage value, under config.style.chart.donuts .
A different threshold can be applied on hover state or zoom state:

const config = ref({
  style: {
    chart: {
      donuts: {
        hover: {
          hideLabelsUnderValue: 5, // Any label with a percentage under 5 will be hidden
        },
        zoom: {
          hideLabelsUnderValue: 3, // Any label with a percentage under 3 will be hidden
        }
      }
    }
  }
})