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.

v2.15.0

VueUiDonut #218

• Remove opacity on donut arcs

Multi-line labels #217

• Generate multiline datalabels when they include a line break \n

Example: "This is a long\nlabel to show"

The table below shows which components accept this feature and where:

Component	Label displayed	Where to use line breaks
VueUiXy	Time labels (x axis)	config.chart.grid.labels.xAxisLabels.values
VueUiDonutEvolution	Time labels (x axis)	config.style.chart.layout.grid.xAxis.dataLabels.values
VueUiHistoryPlot	Plot labels	dataset names
VueUiParallelCoordinatePlot	Axis labels	config.style.chart.yAxis.labels.axisNames
VueUiQuadrant	Plot labels	dataset names
VueUiQuickChart	Time labels (x axis)	config.xyPeriods
VueUiRidgeline	Time labels (x axis)	config.style.chart.xAxis.labels.values
VueUiStackbar	Time labels (x axis)	config.style.chart.grid.x.timeLabels.values
VueUiStripPlot	x axis labels	dataset names

VueUiWaffle

• Show graceful layout when all datapoint values are empty arrays

v2.14.2

VueUiDonut & VueUiNestedDonuts #215

• Add width and height config attributes:

const config = ref({
  style: {
    chart: {
      width: 512,
      height: 360
    }
  }
})

Note: these dimensions will be ignored when responsive is set to true.

Docs are up to date:
VueUiDonut
VueUiNestedDonuts

v2.14.1

VueUiXy

• Improve series layout in stacked mode

• Add config option to set x axis crosshairs always on the bottom baseline, or on zero:

config.chart.grid.labels.xAxis.crosshairsAlwaysAtZero: boolean // default: false (previous behavior, always on the bottom baseline)

v2.14.0

Date time formatter

A config datetime formatter was added to the following components, to manage timestamp x axis values formatting:

• VueUiXy
• VueUiXyCanvas
• VueUiStackbar
• VueUiRidgeline
• VueUiDonutEvolution
• VueUiQuickChart

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'
  }
}

DOCS are up to date