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

v2.15.2

VueUiDonut & VueUiNestedDonuts #223

Add config attribute to set color of the donut arc when data is empty:

config.style.chart.layout.donut: string // default: '#E1E5E8'

v2.15.1

VueUiNestedDonuts

Improve graceful layout management of empty data.