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 🚀

v2.11.0

VueUiChord - New component

A chord diagram is a circular network chart that uses arcs for each category and ribbons to encode the strength and direction of relationships between them.

Ideal for revealing patterns of flow or connectivity in complex matrix or network data.

Enregistrement.de.l.ecran.2025-06-20.a.18.11.58.mov

DOCS

v2.10.11

VueUiFlow : Node Categorization & Legend Support

Enregistrement.de.l.ecran.2025-06-15.a.09.57.16.mov

New Configuration Options

nodeCategories (config.nodeCategories)

Type: Record<string, string>
Map each Sankey node to a high-level category.

// e.g.
nodeCategories: {
   'Mining': 'raw',
   'Copper': 'component',
   'Lithium': 'component',
   'PCB Assembly': 'manufacturing',
   'Battery Production': 'manufacturing',
    // …
}

nodeCategoryColors (config.nodeCategoryColors)

Type: Record<string, string>
Assign a distinct color to each category name.

// e.g.
nodeCategories: {
   raw: '#8B4513',
   component: '#1E90FF',
   manufacturing: '#FFD700',
   // …
}

With both nodeCategories and nodeCategoryColors provided, your chart will automatically:

• Color every node according to its assigned category.
• Render an interactive legend below the chart, displaying each category name and its color swatch.
• Support drilling/filtering: clicking a legend item highlights only the nodes & links in that category (and fades out others).

Summing up:

const config = {
  nodeCategories: {},
  nodeCategoryColors: {},
  style: {
    chart: {
      legend: {
        backgroundColor: "#F3F4F6",
        color: "#1A1A1A",
        show: true,
        fontSize: 14,
        bold: false,
      }
    }
  }
}

Docs are up to date