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

v3.0.0-next.3

v3.0.0-next.2 pre-release

This prerelease is the first step toward our 3.x line, focused exclusively on improving layouts and responsive features across every component.

⚠️ Note: This is a prerelease. APIs may shift between 3.0.0‑next.2 and the final 3.0.0. We strongly encourage you to try it out, share feedback, and report any issue you encounter. It is not recommended to use it in production.

npm i vue-data-ui@next

---

V3 pre-release status details

v2.17.9

VueUiDonut & VueUiNestedDonuts

• Fix incomplete arc when values are way under 0 (ej. 0.00001) - (This affected all components containing donuts)
• Add config attribute to control the transparent color applied on arcs on hover:

const config = ref({
  style: {
    chart: {
      layout: {
        donut: {
          selectedColor: "#0000001A", // new
          borderColorAuto: true, // new (if true, defaults to the same color as the chart's backgroundColor)
          borderColor: "#CCCCCC" // used if borderColorAuto is false
        }
      }
    }
  }
})

v2.17.6

VueUiDonut & VueUiVerticalBar

• Add config events

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
        },
});

This feature will be gradually rolled out on other components where it makes sense.

v2.17.5

VueUiCandlestick

• Fix PNG & PDF generation not working

VueUiStackbar

• Fix unreactive title config

PNG & PDF in Safari

• Fix charts not showing in PNG & PDF exports in Safari

v2.17.2

Most chart components

• Add exposed method getImage which programmatically returns the dataUri of the chart

const chart = ref<InstanceType<typeof VueUiXy>>(null)

onMounted(async () => {
  if (chart.value) {
    const { 
      imageUri,
      base64,
      title, // as provided by your configuration in title.text
      width,
      height,
      aspectRatio
    } = await chart.value.getImage({ scale: 2 }) // optional scale param, defaults to 2, increase for better image quality
    console.log(imageUri)
  }
})

• Existing getData exposed method is now a Promise

const chart = ref<InstanceType<typeof VueUiXy>>()

onMounted(async () => {
  if (chart.value) {
    const data = await chart.value.getData()
    console.log(data)
  }
})

All components with pdf & image user options

• Expose PNG imageUri in pdf and img user options callbacks

const config = ref({
  userOptions: {
    callbacks: {
      // Override the default PDF and IMG generation to use your own solution 
      pdf: ({ imageUri, base64 }) => {
        console.log(imageUri) // will log when clicking on the user options menu PDF button
      },
      img: ({ imageUri, base64 }) => {
        console.log(imageUri) // will log when clicking on the user options menu IMG button
      }
    }
  }
})

Note: the old base64 exposed data is still available, returning a uri with a svg+xml prefix, which is not compatible with libs like pdfMake, contrary to imageUri, which returns a png type.

Add config options to control the display of values and percentages in the legends of some charts

const config = ref({
  style: {
    chart: {
      legend: {
        showValue: true,
        showPercentage: true
      }
    }
  }
})

The following components are concerned:

• VueUiDonut
• VueUiNestedDonuts
• VueUiDonutEvolution
• VueUiWaffle
• VueUitreemap
• VueUiRings
• VueUiGalaxy

VueUiDonut & VueUiNestedDonuts

• Add autoSize exposed function.
  The svg area has an overflow: visible set, to allow for big dataLabels to be visible in all cases.
  However, when converting the svg to an image (during a print to PNG or PDF for example), overflow gets ignored and labels cropped.
  Using autoSize before calling the print resizes the viewBox of the svg to fit all its contents. The resulting svg might not be centered anymore, but will feature all its elements uncut. After the print has finished, you can reset the chart by updating a key on the component.

const chart = ref<InstanceType<typeof VueUiDonut>>()

onMounted(() => {
  if (chart.value) {
    chart.value.autoSize()
  }
})

Legends

• Improve css on legend items, to avoid weird wrapping when converted to PNG or PDF

v2.16.5

VueUiStackbar

• Enable usage of dataLabels.hideUnderPercentage in value mode (see v2.16.3). Setting a percentage will hide labels when the value is below max value * percentage (max value being the current max visible value, also when segregating series from the legend).