Releases: graphieros/vue-data-ui
Releases · graphieros/vue-data-ui
v3.1.12
v3.1.11
VueUiXy
Fix recursive update error in Firefox when using a large amount of data intensive chart instances with zoom + preview enabled.
v3.1.10
v3.1.8
VueUiXy, VueUiQuickChart : compact minimap with all visible series
Enregistrement.de.l.ecran.2025-09-16.a.14.02.34.mov
VueUiXy
const config = ref({
chart: {
zoom: {
minimap: {
show: true,
compact: true, // new (default true, set to false to get previous design)
merged: false, // new (default false, shows all series. Set to true to get previous design)
frameColor: '#A1A1A1' // new (set frame color when compact = true)
}
}
}
})
VueUiQuickChart
const config = ref({
zoomMinimap: {
show: true,
compact: true, // new (default true, set to false to get previous design)
merged: false, // new (default false, shows all series. Set to true to get previous design)
frameColor: '#A1A1A1' // new (set frame color when compact = true)
}
})
VueUiTable - Add filename input field in export menu #250

An optional default filename can be set in config.style.exportMenu.filename
(default: '')
VueUiNestedDonuts
Fix inverted donut names on Firefox
v3.1.7
VueUiXy - Custom gradients
New slots are available to use custom gradients on areas and bars.
#area-gradient
& #bar-gradient
slots
Use these slots to inject a gradient svg element (linearGradient, radialGradient) into the pre-existing defs element of the chart.
Slots expose the series data, as well as the id that must be used on the gradient to be recognized and applied.
<VueUiXy
:dataset="dataset"
:config="config"
>
<!-- This slot is applied on all line series with useArea set to true -->
<template #area-gradient="{ series, id }">
<linearGradient :id="id" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" :stop-color="series.color"/>
<stop offset="100%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
</linearGradient>
</template>
<!-- This slot is applied on all bar series -->
<template #bar-gradient="{ series, positiveId, negativeId }">
<!-- Gradient applied for positive datapoints -->
<linearGradient :id="positiveId" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" :stop-color="series.color"/>
<stop offset="100%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
</linearGradient>
<!-- Gradient applied for negative datapoints -->
<linearGradient :id="negativeId" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" :stop-color="isDarkMode ? '#3A3A3A' : '#FFFFFF'" stop-opacity="0"/>
<stop offset="100%" :stop-color="series.color"/>
</linearGradient>
</template>
</VueUiXy>


v3.1.6
Built-in chart data tables
- Hide data tables from the DOM when
userOptions.buttons.table
isfalse
v3.1.5
Tooltips
- Improve performance
- Add config options to control smooth params:
tooltip: {
smooth: true,
smoothForce: 0.18, // New. Lower = slower
smoothSnapThreshold: 0.25 // New
}
Zoom (double range input)
- Fix offset from the client position when dragging a zoom selection
v3.1.4
VueUiTable #248
- Add config option to show / hide export button
const config = ref({
style: {
exportMenu: {
show: true, // new, default: true
}
}
})
- Add
@page-change
event, fired when pagination buttons are used (all buttons, range input and items-per-page select)
<VueUiTable
:config="config"
:dataset="dataset"
@page-change="onPageChange"
/>
function onPageChange(pageData: VueUiTablePageChangeEvent) {
const {
currentPage,
totalPages,
itemsPerPage,
currentPageData
} = pageData;
console.log({ currentPage, totalPages, itemsPerPages, currentPageData });
}
v3.1.3
VueUiDashboard
- Set responsive font sizes for chart titles and legends
VueUiXy
- Prevent error when config is provided without the
chart
attribute
v3.1.2
VueUiDashboard improvements #246
- Add user options in config, with optional annotator; image and pdf
const config = ref({
userOptions: {
show: true,
showOnChartHover: false,
keepStateOnChartLeave: true,
position: 'right',
buttons: {
pdf: true,
img: true,
annotator: true
},
callbacks: {
pdf: null,
img: null,
annotator: null
},
buttonTitles: {
pdf: 'Download PDF',
img: 'Download PNG',
annotator: 'Toggle annotator'
},
print: {
scale: 2,
filename: ''
}
}
})
User options callbacks:
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
},
// all other buttons have also their callbacks (no params), with the same name as the button
}
}
})
PDF improvements
- The size of the PDF is based on
config.style.board.aspectRatio
(default: "1/1.4141", which is A4 in portrait mode) - The file name can be set in
config.userOptions.print.filename
Deprecated config options
config.allowPrint
is deprecated, but will still keep working. It is replaced withconfig.userOptions.show
. It is recommended to make the change.config.style.resizeHandles.border
is removed (was not applied anyway, so no breaking change here either)