unovis-vue-skilld

f5/unovis

@unovis/vue

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript

Version: 1.6.4 Tags: beta: 1.6.5-topojson.0, latest: 1.6.4

References: GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs

API Changes

This section documents version-specific API changes for

@unovis/vue

— prioritize recent major/minor releases.

NEW:
```
VisPlotband
```
and
```
VisPlotline
```
— new auxiliary components for highlighting data ranges or specific values source
NEW:
```
VisRollingPinLegend
```
— new specialized legend component added in v1.6.0 source
NEW:
```
VisTreemap
```
— new hierarchical data visualization component; includes
```
tileShowHtmlTooltip
```
and
```
topLevelParent
```
props as of v1.6.4 source
NEW:
```
VisAnnotations
```
— new component for adding callouts and annotations to charts source
NEW:
```
onRenderComplete
```
— new callback available in
```
VisXYContainer
```
and
```
VisSingleContainer
```
to detect when rendering is finished source
NEW:
```
VisArea
```
enhancements — added
```
stackMinHeight
```
for better visibility of small values and optional line display via core config source
NEW:
```
VisSankey
```
updates — new
```
onLayoutCalculated
```
callback,
```
getSankeyDepth
```
method, and support for Zoom/Pan and Node selection source
NEW:
```
VisGraph
```
features — support for custom node rendering functions, SVG link labels, and Zoom start/end callbacks source
NEW:
```
VisCrosshair
```
additions — new
```
forceShowAt
```
prop,
```
onCrosshairMove
```
callback, and
```
skipRangeCheck
```
configuration source
NEW: SSR Readiness — major internal refactor to support SSR (Server-Side Rendering) for Nuxt and other frameworks source
NEW: Reactive Map Data —
```
VisLeafletMap
```
data property is now fully reactive in Vue source
NEW: Automatic Tooltip Placement —
```
VisTooltip
```
now automatically aligns when used in conjunction with
```
VisCrosshair
```
source
NEW:
```
VisBulletLegend
```
— now supports multiple colors per legend item source
NEW:
```
VisXYContainer
```
— improved
```
scaleByDomain
```
behavior to ensure consistency across multiple chart types source

Also changed:

calc()

support in Annotations ·

theme-patterns

accessible theme ·

VisFlowLegend

refactored wrapper ·

axis grid line dasharray

CSS variables ·

skipRangeCheck

Crosshair prop

Best Practices

Support ordinal values in XY components by returning the data index in the
```
x
```
accessor and providing a
```
tickFormat
```
to the
```
VisAxis
```
source

vue

<script setup lang="ts">
const x = (d, i: number) => i
const tickFormat = (i: number) => data[i].category
</script>

<template>
  <VisXYContainer :data="data">
    <VisStackedBar :x="x" :y="d => d.value" />
    <VisAxis type="x" :tick-format="tickFormat" />
  </VisXYContainer>
</template>

Define custom SVG gradients or patterns using the
```
svgDefs
```
property on
```
VisXYContainer
```
or
```
VisSingleContainer
```
source

vue

<template>
  <VisXYContainer :svg-defs="gradientDef">
    <VisArea :x="d => d.x" :y="d => d.y" color="url(#gradient-id)" />
  </VisXYContainer>
</template>

Display continuous lines across missing data points by filtering
```
null
```
values and passing the dataset directly to
```
VisLine
```
instead of the container source

vue

<template>
  <VisXYContainer>

    <VisLine :data="data.filter(d => d.value !== null)" :x="x" :y="y" />
  </VisXYContainer>
</template>

Attach events to axis ticks or other sub-elements using the
```
events
```
prop and component-specific selectors source

vue

<script setup lang="ts">
import { VisAxisSelectors } from '@unovis/vue'
const axisEvents = {
  [VisAxisSelectors.tick]: {
    click: (val: number) => console.log('Clicked tick:', val)
  }
}
</script>

<template>
  <VisAxis type="x" :events="axisEvents" />
</template>

Wrap Unovis components in
```
<ClientOnly>
```
when using Nuxt or SSR to prevent errors from top-level
```
document
```
or
```
window
```
references source

vue

<template>
  <ClientOnly>
    <VisXYContainer :data="data">
      <VisLine :x="x" :y="y" />
    </VisXYContainer>
  </ClientOnly>
</template>

Enable tooltips or interactions on TopoJSON map areas using the
```
feature
```
selector source

vue

<script setup lang="ts">
import { VisTopoJSONMapSelectors } from '@unovis/vue'
const triggers = {
  [VisTopoJSONMapSelectors.feature]: d => d.properties.name
}
</script>

<template>
  <VisTopoJSONMap :triggers="triggers" ... />
</template>

Fix clipped top or bottom axis labels by increasing the
```
margin
```
property on the
```
VisXYContainer
```
source

vue

<template>

  <VisXYContainer :margin="{ top: 10, right: 10, bottom: 10, left: 10 }">
    <VisStackedBar ... />
  </VisXYContainer>
</template>

Use
```
tickTextWidth
```
on
```
VisAxis
```
to enable automatic label wrapping and trimming for long axis labels source

vue

<template>
  <VisAxis type="x" :tick-text-width="100" />
</template>

Display multiple colors within a single legend bullet by passing an array to the
```
color
```
property of a legend item source

vue

<script setup lang="ts">
const items = [
  { name: 'Multi-segment', color: ['#ff0000', '#00ff00', '#0000ff'] }
]
</script>

<template>
  <VisBulletLegend :items="items" />
</template>

Programmatically control crosshair visibility and position using the
```
forceShowAt
```
property for custom sync or interaction logic source

vue

<template>

  <VisCrosshair :force-show-at="{ x: 1707093300 }" />
</template>

unovis-vue-skilld

NPX Install

Tags

SKILL.md Content

f5/unovis
`@unovis/vue`

API Changes

Best Practices