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).

v2.16.4

VueUiXy

• Fix harmless console errors in some edge cases where data is empty

getVueDataUiConfig utility function

• Improve TS type: use a generic, no more 'as' casting required

Before:

const config = ref(getVueDataUiConfig('vue_ui_donut') as VueUiDonutConfig);

After:

const config = ref(getVueDataUiConfig<VueUiDonutConfig>('vue_ui_donut'));

User options menu

• Set a min-width (in some rare environments, the user options menu button and drawer could have no width, leading to an invisible menu)

v3.0.0-next.0

v3.0.0-next.0 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.0 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

---

VueUiXy

v3.0.0-next.0 includes the following changes for VueUiXy:

• Layout is automatically computed so you don't have to tweak paddings to fit scale labels, time labels and axis labels anymore.
• Configuration changes (possible breaking changes):
  • config.chart.padding defaults are now set to 0 for top, right, bottom, left.

Components affected:

• VueUiXy
• VueUiRidgeline (embedded VueUiXy config padding was also modified)

v2.16.3

VueUiStackbar

• Add new config options:

const config = ref({
  style: {
    chart: {
      bars: {
        dataLabels: {
          hideUnderValue: null, // or number
          hideUnderPercentage: null, // or number, ej. 50 for 50%; used when showDistributedPercentage is true
        },
      },
      grid: {
        x: {
          // style horizontal grid lines
          linesColor: '#E1E5E8',
          linesThickness: 1,
          linesStrokeDasharray: 0
        },
        y: {
          // style vertical grid lines
          linesColor: '#E1E5E8',
          linesThickness: 1,
          linesStrokeDasharray: 0
        }
      }
    }
  }
})

Docs are up to date

v2.16.1

Shorthand hex colors are now supported in config objects

const config = ref({
  style: {
    chart: {
       backgroundColor:  '#FFF', // now works properly
    }
  }
})

useObjectBindings composable #226

Special thanks to @tjones-ieee for his original idea and contribution

useObjectBindings is a composable that flattens a reactive object into a set of refs (one for each “leaf” property) so you can easily bind to deeply nested values by their string paths.

Why use it?

• Automatic reactivity: Every nested property becomes a Ref, with automatic getters/setters that keep your source object in sync.
• Flat API surface: Access or update any nested field by its dot‑delimited path, without writing deep destructuring or ref plumbing.
• Dynamic path support: New paths added at runtime are discovered automatically (and proxied), so you never lose reactivity when mutating the structure.

import { useObjectBindings, getVueDataUiConfig } from "vue-data-ui";

const config = ref(getVueDataUiConfig('vue_ui_donut'));

const bindings = useObjectBindings(config);
//   Now `bindings` has refs for each leaf path:
//   bindings["style.chart.backgroundColor"] → Ref<string>
//   bindings["style.chart.color"] → Ref<string>
//   bindings["customPalette"] → Ref<boolean>
//   by default, arrays are skipped:
//   no "customPalette.0", unless you disable skipArrays

You can then use these in your template:

<template>
  <div>
    <input type="color" v-model="bindings['style.chart.backgroundColor'].value" />
  </div>
</template>

Note: this composable could have been tested further, but I just couldn't wait to ship it.

v2.15.5

VueUiCandlestick #232

• Add optional min and max values for yAxis scale:

const config = ref({
  style: {
    layout: {
      grid: {
        yAxis: {
          scale: {
            min: null, // default
            max: null // default
          }
        }
      }
    }
  }
})

• Add date time formatter for time series (xAxis), so you can pass directly timestamps in your dataset:

config.style.layout.grid.xAxis.dataLabels.datetimeFormatter

datetimeFormatter: {
  enable: boolean // default: false
  locale: string // default: 'en'
  useUTC: boolean // default: false
  januaryAsYear: boolean // default: false
  options: {
    year: string // default: 'yyyy'
    month: string // default: "MMM 'yy"
    day: string // default: 'dd MMM'
    hour: string // default: 'HH:mm'
    minute: string // default: 'HH:mm:ss'
    second: string // default: 'HH:mm:ss'
  }
}

v2.15.4

VueUiStackbar #229

• Add formatter for y axis labels

style.chart.grid.y.axisLabels.formatter

const config = ref({
  style: {
    chart: {
      grid: {
        y: {
          axisLabels: {
            formatter: ({ value }) => {
               return value // apply your formatting here
            }
          }
        }
      }
    }
  }
})

v2.15.3

All charts with fullscreen feature #222

• Fix dimension calculations leading to scrollbars appearing when escaping fullscreen mode on a responsive chart

VueUiXy

• Fix console error when toggling config attributes related to size calculations in responsive mode #225
• Fix wrong stacking order of area labels #221