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

v2.13.4

Components with dual range zoom

• Merge tooltips when they collide:

Enregistrement.de.l.ecran.2025-07-07.a.08.20.26.mov

v2.13.3

VueUiXy

• Add responsiveProportionalSizing config option, (true by default = previous behavior). Set to true, it disables the text elements automatic resizing in responsive mode. #212

• Add useNiceScale config option to force a nice scale (false by default = previous behavior)

• Fix errors on straight line datasets when dataset starts with a null value and cutNullValues is true

• Add config options for xAxis and yAxis crosshair markers

• Add optional yAxis annotations, to draw either a line or an area following one or two y values, with a label. You can create multiple annotations:

Docs and examples are up to date

All charts with user options

• Add optional config callbacks to override default button behavior

const config = ref({
  userOptions: {
    // These callbacks will be called when user options buttons are clicked.
    callbacks: {
      pdf: (chart: HTMLElement) => {
        // use your own pdf solution
      },
      img: (base64: string) => {
        // do whatever you want with the base 64 image data of the chart
      },
      csv: (csvContent: string) => {
        // do whatever you want with the csv data
      },
      // all other buttons have also their callbacks (no params), with the same name as the button
    }
  }
})

v2.12.7

• Improve management of resizeObservers
• Import some atom components as async in chart components to improve treeshaking
• Fix - VueUiRidgeline & VueUiDonutEvolution - Display BaseDraggableDialog in direct parent in fullscreen mode

v2.12.6

Utility functions

Add getCumulativeAverage and getCumulativeMedian utility functions:

getCumulativeAverage

import { getCumulativeAverage } from "vue-data-ui";

// Simple usage
const arr = [0, 1, 2, 3, 4];
const cumulativeAvg = getCumulativeAverage({ values: arr });

// Ignore invalid values entirely
const arrWithInvalid = [0, 1, 2, null, undefined, NaN, Infinity, -Infinity];
const cumulativeAvgNoInvalid = getCumulativeAverage({
    values: arrWithInvalid,
    config: { keepInvalid: false }
});

// Convert invalid values to zero
const cumulativeAvgZeroed = getCumulativeAverage({
    values: arrWithInvalid,
    config: { convertInvalidToZero: true }
});

getCumulativeMedian

import { getCumulativeMedian } from "vue-data-ui";

// Simple usage
const arr = [0, 1, 2, 3, 4];
const cumulativeMed = getCumulativeMedian({ values: arr });

// Ignore invalid values entirely
const arrWithInvalid = [0, 1, 2, null, undefined, NaN, Infinity, -Infinity];
const cumulativeMedNoInvalid = getCumulativeMedian({
    values: arrWithInvalid,
    config: { keepInvalid: false }
});

// Convert invalid values to zero
const cumulativeMedZeroed = getCumulativeMedian({
    values: arrWithInvalid,
    config: { convertInvalidToZero: true }
});

v2.12.5

VueUiDonutEvolution

Improved datapoint focus behavior:

• Use VueUiDonut in a resizable and draggable dialog

Enregistrement.de.l.ecran.2025-06-24.a.06.47.04.mov

New config attributes to control the dialog and the embedded donut:

const config = ref({
  style: {
    chart: {
      dialog: {
        show: true,
        backgroundColor: '#FFFFFF',
        color: '#D2D353C',
        header: {
          backgroundColor: '#FFFFFF',
          color: '#2D353C',
        },
        donutChart: {
          // VueUiDonut config
        }
      }
    }
  }
})

Deprecated config attributes, related to the old way datapoints were focused on:

const config = ref({
  style: {
    chart: {
      donuts: {
        zoom: {...} // Deprecated
      }
    }
  }
})

Docs are up to date

v2.12.3

Technical release

• Harmonize some colors in default config, based on standard palette

v2.12.2

VueUiChord

• Add optional display of group percentages

const config = ref({
  style: {
    chart: {
      arcs: {
        labels: {
          showPercentage: true, // new
          roundingPercentage: 0, // new
        }
      }
    }
  }
})

View docs

v2.12.1

Remove cjs files from dist

50% lighter package size 🚀