v2.6.37

VueUiXy

Improve datapoint tags behavior and config options

Tags are enabled in the dataset (no change there):

const dataset = ref(
  [
    {
       name: 'Serie A',
       type: 'line',
       series: [1, 2, 3, 5, 8],
       useTag: 'end', // or 'start'; to be set on line or plot types (does not apply on bars)
    }
  ]
)

Config options are added to customize tag content:

// For line datapoints
config.line.tag.followValue: boolean; // default: true
config.line.tag.fontSize: number; // default: 14
config.line.tag.formatter: () => string | null; // default: null

// For plot datapoints
config.plot.tag.followValue: boolean; // default: true
config.plot.tag.fontSize: number; // default: 14
config.plot.tag.formatter: () => string | null; // default: null

The formatter works like all others, for example:

const config = ref({
  line: {
    tag: {
      formatter: ({ value, config }) => {
        const { datapoint, serieName } = config;
        console.log(datapoint);
        return `<div><span>${ serieName }:</span><span>${value.toFixed(1)}</span></div>`
      }
    }
  }
})

v2.6.34

VueUiDonut #188

• Improve responsive behavior
• Add config option to display curved markers:

config.style.chart.layout.curvedMarkers: boolean; // default: false

v2.6.33

VueUiStackbar

Add missing content for #tooltip-before and #tooltip-after scoped slots.

v2.6.32

VueUiDonutEvolution #187

Add config options to hide donut labels under a given percentage value, under config.style.chart.donuts .
A different threshold can be applied on hover state or zoom state:

const config = ref({
  style: {
    chart: {
      donuts: {
        hover: {
          hideLabelsUnderValue: 5, // Any label with a percentage under 5 will be hidden
        },
        zoom: {
          hideLabelsUnderValue: 3, // Any label with a percentage under 3 will be hidden
        }
      }
    }
  }
})

v2.6.31

VueUiQuickChart

1. Show time labels only at modulo (ideal for large datasets)

Add config options to control the display of time labels at a given modulo:

const config = {
  ...,
  xyPeriodsShowOnlyAtModulo: boolean // default: false
  xyPeriodsModulo: number // default: 12
}

2. Fix tooltip trap remaining highlighted on mouseout in line mode

v2.6.30

Add llms.txt #185

Available:

• at the root of the npm package
• on the documentation website : LINK

v2.6.29

VueUiXy : scale groups #181

When useIndividualScale is set to true, datapoints with the same scaleLabel share the same yAxis scale.

Config attributes was added to set the color of grouped scales, and the x offset of the scale labels and values:

const config: VueUiXyConfig = {
  chart: {
    grid: {
      labels: {
        yAxis: {
          // New:
          groupColor: '#1A1A1A', // default: null, if not set, will default to a series color
          scaleLabelOffsetX: 0,  // default: 0
          scaleValueOffsetX: 0, // default: 0
        }
      }
    }
  }
}

See example on the docs website
('Grouped y axis scales' example)

v2.6.24

VueUiCirclePack #179

• The chart is now responsive out of the box. The circles will adapt as much as possible to the available space provided by the aspect ratio of the container.

v2.6.20

Cusomization of the user options menu icon

• A #menuIcon slot was added to customize the user options menu icon, if you don't like the default burger menu icon. The slot exposes a isOpen boolean, to show a different icon depending on the open state, and the color defined by your config for the general text color of the menu.

<template #menuIcon="{ isOpen, color }">
  <div class="text-2xl">
    {{ isOpen ? '👆' : '👇' }}
  </div>
</template>

Enregistrement.de.l.ecran.2025-03-17.a.08.09.20.mov

v2.6.19

VueUiSparkline : optional mini tooltip

Ideal if you prefer a minimalist layout without the title or the data label on the side.

Enregistrement.de.l.ecran.2025-03-15.a.10.48.56.mov

New config attribute: config.style.tooltip

tooltip: {
   show: boolean, // default: false
   fontSize: number, // default: 14
   color: string, // default: "#2D353C"
   backgroundColor: string, // default: "#FFFFFF"
   offsetY: number, // default: 0
   borderWidth: number, // default: 0
   borderColor: string, // default: "#E1E5E8"
   borderRadius: number, // default: 2
   backgroundOpacity: number, // from 0 to 100, default: 100
}

An example is visible here

Documentation is up to date, so is the chart maker for this component.