DocumentationNuxt Charts v3

Upgrade to v3

Migrate from Unovis-powered nuxt-charts v2 to the vccs-powered nuxt-charts v3.

v3 swaps the rendering engine from Unovis to vccs (a Vue 3 port of Recharts) while keeping the config-prop API you already use — :data, :categories, :height, :y-axis, :curve-type, and friends. In most projects the upgrade is a dependency swap; your templates keep working.

While v3 is in prerelease it is published only under the next dist-tag. Install it as nuxt-charts@next in every app, package and workspace that depends on it — a plain nuxt-charts (or latest) still resolves to v2, so mixing the two leaves parts of a monorepo on the old Unovis engine.

What stays the same

  • The component names: AreaChart, BarChart, LineChart, DonutChart, BubbleChart.
  • The config-prop API and the auto-imported enums/types (CurveType, LegendPosition, Orientation, DonutType, BulletLegendItemInterface, AxisConfig, TooltipConfig, …).
  • Auto-imported, client-rendered, SSR-safe components.
  • The DonutChart center-content default slot (e.g. a % label in the middle of the ring).

What's new

  • New chart types: Radar, Radial Bar, Funnel, Sankey, Candlestick and Status Tracker.
  • New cross-cutting props on cartesian charts: referenceLines, syncId, xExplicitTicks / yExplicitTicks, and minMaxTicksOnly.
  • Standalone module — no vue-chrts / Unovis peer dependencies.
  • D3 maps: Dotted Map and TopoJSON Map include a world dataset, projections, pins, routes, choropleths, tooltips, and zoom.

Install

pnpm add nuxt-charts@next

Run this in every workspace that lists nuxt-charts, and pin the next tag in each package.json (for example "nuxt-charts": "next") so installs and CI don't silently fall back to v2. In a pnpm monorepo, pnpm -r add nuxt-charts@next updates all packages at once.

vccs and motion-v ship as dependencies of the module — no extra install needed.

Configure

nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-charts"]
})

Removed in v3 (for now)

These specialty charts from v2 are not in the v3 engine yet:

ComponentStatus
DualChartPlanned for v3.1 (ComposedChart)
GanttChartRemoved (Unovis-specific)
DagreGraphRemoved (Unovis-specific)

If you still need those, stay on nuxt-charts v2 (nuxt-charts@2) for that project, or split specialty views into a separate app that keeps the legacy module.

Migrate Maps

DottedMap and TopoJSONMap are available in v3 through D3. Remove the @unovis/ts/maps import and omit topoJson to use the bundled world geometry. Existing data.areas, data.points, data.links, pins, and style accessors remain supported. Supply your own TopoJSON through topoJson when you need the same boundaries as your v2 map.

The bundled map accepts ISO alpha-2, alpha-3, and numeric country IDs. Use featureId for custom join properties and mapFeatureKey for a custom TopoJSON object name. Custom D3 projections still work; named projections also work without importing D3 into your app.

Point clicks emit events without automatically zooming. Set zoomOnClick to enable that behavior. Wheel zoom requires zoomOnScroll; drag, pinch, and double-click zoom remain enabled by default. The DottedMap point-click event keeps its (event, dot) order and pin-click receives the original pin.

Default map height is 400px. DottedMap defaults to 60 rows, dot radius 0.3, and themed colors; zoom limits default to [1, 8]. Pass your previous values explicitly when preserving a v2 appearance.

Deprecated (inert) props

A handful of Unovis-only props have no vccs analog. They are kept on the type interfaces and marked @deprecated so existing templates still type-check — they simply have no effect: crosshairConfig, and on BarChart, stackAndGrouped / stackedGroupedSpacing (use stacked).