vue-data-ui-skilld

graphieros/vue-data-ui

vue-data-ui

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

Version: 3.15.11 (Mar 2026) Tags: beta: 2.15.6-beta.3 (Jul 2025), next: 3.1.19-next.1 (Sep 2025), latest: 3.15.11 (Mar 2026)

References: Docs — API reference, guides

API Changes

This section documents version-specific API changes for

vue-data-ui

v3.15.2 — prioritize recent v3.x releases.

NEW:
```
useCursorPointer
```
(opt-in) — default changed to
```
false
```
in v3.15.0; must be set to
```
true
```
in
```
userOptions
```
to enable pointer cursor on clickable elements source
NEW:
```
altCopy
```
action button — added to context menu in v3.15.0; exposes
```
dataset
```
and
```
config
```
in a callback to generate custom alt text source
NEW:
```
minimap
```
styling —
```
handleType
```
('grab', 'chevron', etc.),
```
handleWidth
```
, and
```
additionalHeight
```
added in v3.15.0 to customize zoom minimap handles source
NEW:
```
dashIndices
```
in
```
VueUiXy
```
— new dataset property in v3.15.0 allows displaying specific datapoints as dashed segments to indicate estimated data source
BREAKING:
```
locales
```
files removed — as of v3.14.3, individual locale files are removed in favor of
```
Intl
```
for computing time labels source
NEW:
```
isPrintingImg
```
and
```
isPrintingSvg
```
— booleans now exposed in the
```
#svg
```
slot since v3.14.10 to control content during print/export source
NEW:
```
zoomStart
```
,
```
zoomEnd
```
, and
```
zoomReset
```
— new emits added to
```
VueUiXy
```
in v3.14.9 to track zoom component interactions source
NEW:
```
selectAllToggle
```
in Legend — opt-in feature added in v3.13.0; displays a checkbox to select/unselect all series when more than 2 series exist source
NEW:
```
skeletonConfig
```
customization —
```
VueUiSparkline
```
now allows passing custom
```
skeletonConfig
```
and
```
skeletonDataset
```
in v3.13.7 source
NEW:
```
oklch
```
color support — added in v3.13.6, allowing the use of OKLCH color space across all components source
NEW:
```
side
```
in
```
zoom.customFormat
```
— the handle side ('left' | 'right') is now exposed in the zoom formatting callback since v3.13.5 source
NEW:
```
zoom.maxWidth
```
— added to multiple charts in v3.13.4 to control the maximum width of the zoom component source
NEW:
```
pulse
```
in
```
VueUiSparkline
```
— optional animated pulse effect with trail added to line mode in v3.13.3 source
NEW:
```
Annotator
```
modes — straight line and arrow modes added to the built-in annotator in v3.12.0 source

Also changed:

scaleMin

scaleMax

on minimap v3.11.1 ·

pulse

trail refinement v3.15.2 ·

zoom.startIndex

endIndex

support v2.4.42 ·

useCanvas

option (experimental) ·

Annotator

pixel labels v3.14.5 ·

dashIndices

in minimap v3.14.8

Best Practices

Use
```
VueUiXyCanvas
```
for large datasets (1000+ points) with frequent updates (e.g., 100ms) to avoid browser performance bottlenecks from managing thousands of SVG DOM nodes source
Enable
```
responsive: true
```
specifically for
```
VueUiXy
```
and
```
VueUiDonut
```
when placing them in flexible containers, ensuring they correctly fill parent height (set
```
height: 100%
```
on parent) source
Programmatically control series visibility using the exposed
```
showSeries(name)
```
and
```
hideSeries(name)
```
methods instead of manipulating the dataset or triggering legend events source
Opt-in to the cursor pointer for clickable chart elements via
```
userOptions.useCursorPointer: true
```
, as it is disabled by default for better accessibility compliance source
Implement custom alt text for charts by enabling
```
userOptions.buttons.altCopy: true
```
and providing a tailored string through the
```
userOptions.callbacks.altCopy
```
callback source
Configure PDF export orientation and scaling directly in
```
userOptions.print
```
to handle different chart aspect ratios without requiring manual JsPDF wiring source
Signal estimated or projected data in
```
VueUiXy
```
by passing
```
dashIndices
```
in the dataset to render specific line segments as dashed source
Prevent label overlapping in dense charts by setting
```
hideLabelsUnderValue
```
(in Donut) or
```
hideUnderProportion
```
(in Treemap) to suppress labels for small segments source
Reverse the y-axis (e.g., for ranking) by providing negative values in the dataset and using absolute value
```
formatters
```
for grid labels and tooltips source

// Reversed y-axis via negative values and absolute formatting
const config = {
  chart: {
    grid: { labels: { yAxis: { formatter: ({ value }) => Math.abs(value) } } }
  }
}

Fine-tune the responsive behavior of table-based charts (like
```
VueUiCarouselTable
```
) by adjusting
```
responsiveBreakpoint
```
to control exactly when the layout switches for mobile source

vue-data-ui-skilld

NPX Install

Tags

SKILL.md Content

graphieros/vue-data-ui
`vue-data-ui`

API Changes

Best Practices