v3.0.13

PDF (when used with peer JsPDF) #243

The following config options are added to control the orientation of the PDF document when the peer JsPDF dependency is used:

const config = ref({
  userOptions: {
    print: {
      scale: 2,
      orientation: 'auto', // New; 'auto' | 'l' | 'p'
      overflowTolerance: 0.2 // New; control the overflow percentage above which content will be shown on multiple pages
    }
  }
})

For the VueUiQuickChart component, these options are located:

const config = ref({
  userOptionsPrint {
    scale: 2,
    orientation: 'auto', // New; 'auto' | 'l' | 'p'
    overflowTolerance: 0.2 // New; control the overflow percentage above which content will be shown on multiple pages
  }
})

v3.0.11

VueUiXy

Add config options to customize time labels in:

• tooltip
• time tag
• zoom labels

Especially useful when datetimeFormatter is enabled, to show a precise date inside these labels, which would otherwise have the same format as the time labels on the x axis.

This is a non-breaking change.

tooltip

const config = ref({
  chart: {
    tooltip: {
      useDefaultTimeFormat: true, // default, same behavior as before
      timeFormat: 'yyyy-MM-dd HH:mm:ss' // when datetimeFormatter is enabled and useDefaultTimeFormat is false
    }
  }
})

time tag

const config = ref({
  chart: {
    timeTag: {
      show: true, // false by default
      useDefaultFormat: true, // default, same behavior as before
      timeFormat: 'yyyy-MM-dd HH:mm:ss' // when datetimeFormatter is enabled and useDefaulFormat is false
      // customFormat works exactly as for the tooltip. null by default, pass a callback which returns a string to enable. Will override timeFormat
      customFormat: ({ absoluteIndex }) => {
        return String(absoluteIndex);
      }
    }
  }
})

zoom labels

const config = ref({
  chart: {
    zoom: {
      useDefaultFormat: true, // default, same behavior as before
      timeFormat: 'yyyy-MM-dd HH:mm:ss' // when datetimeFormatter is enabled and useDefaulFormat is false
      // customFormat works exactly as for the tooltip. null by default, pass a callback which returns a string to enable. Will override timeFormat
      customFormat: ({ absoluteIndex }) => {
        return String(absoluteIndex);
      }
    }
  }
})

Documentation website is up to date

---

If you just realized this is version 3 now, here are all the details.

v3.0.8

VueUiScatter - Marginal bars highlighter

New optional highlighter on marginal bars:

const config = ref({
  style: {
    layout: {
      marginalBars: {
        show: true,
        // New:
        highlighter: {
          show: true,
          opacity: 0.1,
          color: '#2D353C',
          stroke: '#2D353C',
          strokeWidth: 0.5,
          strokeDasharray: 2,
          highlightBothAxes: true
        }
      }
    }
  }
})

Enregistrement.de.l.ecran.2025-08-30.a.10.55.18.mov

Documentation website is up to date

---

If you just realized this is version 3 now, here are all the details.

v3.0.7

VueUiXy

Bug fix - Sync zoom with selection rect (preview mode) when LTTB is active

---

If you just realized this is version 3 now, here are all the details.

v3.0.6

VueUiXy - Time tag custom format

A custom format can now be passed through a callback.

const config = ref({
  chart: {
    timeTag: {
      show: true,
      // The callback works exactly as the one available for the tooltip
      customFormat: ({ absoluteIndex }) => {
        return String(absoluteIndex);
      }
    }
  }
})

If you just realized this is version 3 now, here are all the details.

v3.0.5

VueUiXy - Interline coloring new feature

You can now color the cross section between pairs of lines.

// Obviously don't set these datapoints with useArea:true because it defeats the purpose
const dataset = ref([
  { name: 'Series A', type: 'line', series: [] },
  { name: 'Series B', type: 'line', series: [] },
])

const config = ref({
  line: {
    interLine: {
      pairs: [
        ['Series A', 'Series B']
      ],
      fillOpacity: 0.25
    }
  }
})

By default, colors of your dataset will be used.
Colors can be overridden:

const config = ref({
  line: {
    interLine: {
      pairs: [
        ['Series A', 'Series B']
      ],
      colors: [
        ['#00FF00', '#FF0000'] // first color will fill areas where 'Series A' is on top, second color when 'Series B' is on top
      ],
      fillOpacity: 0.25
    }
  }
})

If you just realized this is version 3 now, here are all the details.

v3.0.4

VueUiXy

• Dedupe time labels in some edge cases when using datetimeFormatter.

If you just realized this is version 3 now, here are all the details.

v3.0.3

Legend position #241

All charts with legend now have the config legend.position attribute ('top' or 'bottom'). Set to 'bottom' by default, to keep the current behavior.

If you just realized this is version 3 now, here are all the details.

Vue Data UI version 3

Features

Configuration

• responsive: config.responsive attribute

const config = ref({
  responsive: false // default
})

• autoSize: config.autoSize attribute, with smart resizing capabilities

const config = ref({
  autoSize: true // default. To restore v2 behavior, set to false
})

• loading: config.loading attribute, with beautiful skeleton loaders.

Note: skeleton loaders are improved in v3, using the same layout as the chart component. They reflect the looks of the configuration you devise for your component. If props.dataset is undefined, skeleton loaders will be visible, without JS errors (set config.debug to true during dev to see informative warnings when props.dataset is missing or badly formatted). Hopefully you will find these skeleton loaders to your taste, which will allow you to avoid using v-if="dataset.length" on your chart components.

const config = ref({
  loading: false // default; also triggered internally when props.dataset is missing or empty
})

• debug: config.debug attribute, if true, show built-in warnings. Switch to false for prod

const config = ref({
  debug: false // default
})

Utility functions

• formatSmallValue:
  Formats numeric values with a controlled number of decimal places, applying maxDecimals for all values when no fallbackFormatter is given, or calling the fallbackFormatter for values ≥ 1 if provided.

import { formatSmallValue } from "vue-data-ui";
// Zero value
formatSmallValue({ value: 0 }); // "0"
     
// Values < 1 use minimal decimals
formatSmallValue({ value: 0.9 }); // "0.9"
formatSmallValue({ value: 0.0042 }); // "0.0042"
formatSmallValue({ value: 0.00420001 }); // "0.0042"
     
// Retain trailing zeros
formatSmallValue({ value: 0.9, removeTrailingZero: false }); // "0.90"
     
// Values ≥ 1 without fallback apply maxDecimals
formatSmallValue({ value: 1.61803, maxDecimals: 3 }); // "1.618"
     
// Values ≥ 1 with fallbackFormatter
formatSmallValue({ value: 2.5, fallbackFormatter: v => v.toFixed(1) }); // "2.5"
     
// Negative values
formatSmallValue({ value: -0.056 }); // "-0.056"

New events in config

const config = ref({
  events: {
            // default
            datapointEnter: null,
            datapointLeave: null,
            datapointClick: null
        },
});

Usage:

const config = ref({
  events: {
            // default
            datapointEnter: ({ datapoint, seriesIndex }) => {
               console.log({ datapoint, seriesIndex })
             },
            // other events expose the same data
        },
});

Components	add responsive	add autoSize	add loading	add debug	add events	other changes ⚠️
VueUiDonut	✅ already v2	✅	✅	✅	✅	config.useCssAnimation: now false by default config.startAnimation.show: now false by default config.style.chart.layout.donut.radiusRatio (default 0.3, clamped between 0.1 and 0.5) Add #hollowslot which exposes total, average and dataset in a div on top of the chart svg
VueUiXy (refactored to composition API)	✅ already v2		✅	✅	✅	config.useCssAnimation: now false by default style.chart.padding is ignored in responsive mode Add config.chart.grid.labels.yAxis.rounding Add config.chart.grid.labels.xAxisLabels.autoRotate to rotate time labels automatically when they collide Add config.chart.grid.labels.yAxis.serieNameFormatter applied on individualScale and stacked modes Add selectedXIndex prop to cummunicate index selection through different instances of VueUiXy using events Add config.chart.zoom.preview ideal for large datasets to improve performance when using zoom Add config.bar.innerGap Drastic reduction of DOM nodes
VueUiVerticalBar	✅ already v2	✅	✅	✅	✅	Component is renamed to VueUiHorizontalBar but will remain usable as VueUiVerticalBar Add config.style.chart.layout.separators.fullWidth for line separators Default font sizes are increased
VueUiNestedDonuts	✅ already v2		✅	✅	✅	New config.style.chart.layout.labels.dataLabels.curvedDonutName attribute to show donut names on a curved path around the top of the donuts
VueUiStackbar	✅ already v2		✅	✅	✅	Add config.chart.grid.labels.xAxisLabels.autoRotate
VueUiCandlestick	✅ already v2		✅	✅	✅	Add config.chart.grid.labels.xAxisLabels.autoRotate
VueUiDonutEvolution	✅		✅	✅	✅	Add config.style.chart.layout.grid.axis object to set axis names Add config.style.chart.layout.grid.xAxis.dataLabels.autoRotate
VueUiSparkline	✅ already v2		✅	✅	✅	Add config.style.dataLabel.datetimeFormatter to handle timestamps passed in periods of the dataset
VueUiHeatmap	✅		✅	✅	✅	Add config.style.layout.dataLabels.xAxis.datetimeFormatter and config.style.layout.dataLabels.yAxis.datetimeFormatter Add config.style.layout.width and config.style.layout.height and remove config.style.layout.cells.height Legend now only displayed on the right. Remove config.style.legend.position and config.style.legend.scaleBorderRadius
VueUiWaffle	✅ already v2		✅	✅	✅
VueUiQuickChart	✅ already v2		✅	✅	✅	Add config.donutCurvedMarkers Add config.xyPeriodLabelsAutoRotate
VueUiBullet	✅		✅	✅		Add config.style.chart.target.show
VueUiParallelCoordinatePlot	✅ already v2		✅	✅	✅	Add config.style.chart.yAxis.labels.axisNamesRotation Add config.style.chart.yAxis.labels.axisNamesAutoRotate
VueUiFlow	✅		✅	✅	✅	Remove config.style.chart.nodes.minHeight Remove config.style.chart.links.width Add config.style.chart.width and config.style.chart.height
VueUiAgePyramid	✅ already v2		✅	✅	✅	Add config.style.layout.dataLabels.xAxis.rotation Add config.style.layout.dataLabels.xAxis.autoRotate
VueUiHistoryPlot	✅ already v2		✅	✅	✅	Add config.style.chart.axes.x.labels.autoRotate
VueUiRidgeline	✅ already v2		✅	✅	✅	Add config.style.chart.xAxis.labels.autoRotate
VueUiScatter	✅ already v2		✅	✅	✅
VueUiTreemap	✅ already v2		✅	✅	✅
VueUiRings	✅ already v2		✅	✅	✅
VueUiGauge	✅ already v2		✅	✅		Add config.style.chart.layout.segmentNames.minFontSize (applicable on non curved labels, to avoid overflow)
VueUiOnion	✅ already v2		✅	✅	✅	Add config.style.chart.layout.labels.minFontSize
VueUiTiremarks	✅		✅	✅		Add config.style.chart.width and config.style.chart.height
VueUiWheel	✅ already v2		✅	✅
VueUiThermometer	✅		✅	✅		Add config.style.chart.width Add config.style.chart.label.show Add config.style.chart.label.minFontSize Remove config.style.chart.padding.left Remove config.style.chart.padding.right
VueUiStripPlot	✅ already v2		✅	✅	✅	Add config.style.chart.width Remove config.style.chart.stripWidth Add config.style.chart.labels.xAxisLabels.rotation Add config.style.chart.labels.xAxisLabels.autoRotate
VueUiDumbbell	✅ already v2		✅	✅	✅	Add config.style.chart.grid.scaleMin Add config.style.chart.grid.scaleMax Add config.style.chart.comparisonLines Add config.style.chart.labels.axis Add config.style.chart.labels.xAxisLabels.rotation Add config.style.chart.labels.xAxisLabels.autoRotate Add config.style.chart.labels.yAxisLabels.formatter
VueUi3dBar	✅		✅	✅	✅	Add config.useCssAnimation
VueUiWordCloud	✅ already v2		✅	✅	✅
VueUiSparkbar			✅	✅	✅
VueUiSparkStackbar			✅	✅	✅
VueUiSparkHistogram	✅		✅	✅	✅	Add config.style.labels.value.minFontSize Add config.style.labels.valueLabel.minFontSize Add config.style.labels.timeLabel.minFontSize
VueUiSparkgauge			✅	✅
VueUiSparkTrend	✅		✅	✅		Add config.style.width Add config.style.height
VueUiGizmo			✅	✅
VueUiKpi				✅
VueUiRelationCircle	✅ already v2		✅	✅	✅	Add config.style.labels.minFontSize
VueUiChord	✅ already v2		✅	✅	✅
VueUiRadar	✅ already v2		✅	✅	✅
VueUiMoodRadar	✅		✅	✅	✅
VueUiQuadrant	✅ already v2		✅	✅	✅
VueUiGalaxy	✅		✅	✅	✅
VueUiChestnut			✅	✅
VueUiCirclePack	(built-in)		✅	✅	✅
VueUiMolecule			✅	✅	✅
VueUiWorld			✅	✅	✅

Other changes

Tooltips

All components with a config....tooltip receive the additional options:

tooltip: {
  smooth: true, // same as previous behavior. Set to false, will remove the smooth animation frame when moving the tooltip
  backdropFilter: true, // same as previous behavior. Set to false, removes the css backdrop filter, useful in some cases where performance is critical.
}

⚠️ Configuration padding

• Some charts padding config defaults are modified in v3. If you are migrating to v3, we recommend you verify the paddings in your chart configs. Most chart layouts are now automatically adjusted to prevent overflow, therefore your previous padding config could result in excessive white space.

And

Special thanks to @tjones-ieee for his good ideas !

v2.17.11

datetime formatter

• Fix display issues when passing timestamps with hour intervals