Theming

Nuxt UI integration

Nuxt Charts v3 treats Nuxt UI v4 as a first-class design system without making it a dependency. When @nuxt/ui is installed, charts automatically inherit:

• semantic series colors (primary, secondary, success, info, warning, error)
• page and elevated surfaces
• default, highlighted, and muted text
• borders, radius, font family, dark mode, and runtime color changes

No adapter or extra configuration is required. Omit a category's color to use the semantic palette:

const categories = {
  revenue: { name: 'Revenue' }, // --ui-primary
  costs: { name: 'Costs' }      // --ui-secondary
}

Use without Nuxt UI

Nuxt UI is optional. Built-in light and dark values cover every token, so the same chart works in a plain Nuxt app. You can supply your own design system via the public --vc-* variables. The older --chart-color-0 through --chart-color-7 variables remain supported for series colors.

Global CSS variables

v3 charts expose --vc-* tokens on the .vue-chrts root. Override them globally or per chart:

.vue-chrts {
  /* Series palette */
  --vc-series-0: var(--brand-primary);
  --vc-series-1: var(--brand-secondary);

  /* Grid + axis */
  --vc-grid-color: var(--ui-border);
  --vc-axis-line-color: var(--ui-border);
  --vc-tick-color: var(--ui-text-muted);
  --vc-axis-label-color: var(--ui-text);

  /* Legend */
  --vc-legend-color: var(--ui-text-muted);
  --vc-legend-gap: 0.75rem;

  /* Tooltip */
  --vc-tooltip-bg: var(--ui-bg-elevated);
  --vc-tooltip-fg: var(--ui-text);
  --vc-tooltip-muted: var(--ui-text-muted);
  --vc-tooltip-border: var(--ui-border);
}

Per-chart theme

The theme prop overrides only the values you provide; everything else keeps following the host design system.

<BarChart
  :data="data"
  :categories="categories"
  :theme="{
    colors: ['var(--ui-primary)', 'var(--ui-warning)'],
    grid: { color: 'var(--ui-border-muted)' },
    tooltip: { radius: 'var(--ui-radius)' }
  }"
/>