VueUiLabel new component
Use draggable labels in your chart components #svg slot, or inside any svg.
- Attach a label to target coordinates
Enregistrement.de.l.ecran.2026-08-29.a.17.22.54.mov
type VueUiLabelDataset = {
[key: string]: any;
id?: number | string;
x: number; // x coordinate for the target
y: number; // y coordinate for the target
position?: {
// optional specific coordinates for the label's box
x: number | null;
y: number | null;
};
};Example usage:
<VueUiDonut :dataset="datasetDonut" :config="configDonut">
<template #svg="{ svg }">
<VueUiLabel
:dataset="{
x: svg.drawingArea.width / 2,
y: svg.drawingArea.height / 2,
}"
:config="{
title: {
text: 'LABEL'
},
content: {
text: 'Lorem ispsum dolor sit amet...'
}
}"
/>
</template>
</VueUiDonut>Depending on your configuration, multiple instances of labels inside a same svg can reorder to avoid overlapping.
Labels can be dragged, and their coordinates can be persisted through available emits.
type VueUiLabelEmits = {
dragStart: (payload: VueUiLabelEmitDragStart) => void;
drag: (payload: VueUiLabelEmitDrag) => void;
dragEnd: (payload: VueUiLabelEmitDragEnd) => void;
mouseenter: (payload: VueUiLabelDataset) => void;
mouseleave: (payload: VueUiLabelDataset) => void;
click: (payload: VueUiLabelDataset) => void;
focus: (payload: VueUiLabelDataset) => void;
blur: (payload: VueUiLabelDataset) => void;
};Enregistrement.de.l.ecran.2026-08-29.a.17.24.38.mov
Documentation website is up to date.