Use your preferred package manager:
pnpm add nuxt-charts@next
npm install nuxt-charts@next
yarn add nuxt-charts@next
vue-chrts peers), keeps the same config-prop API, and adds Radar, Radial Bar, Funnel, Candlestick and Status Tracker charts. Migrating from v2? See Upgrade to v3.vue-chrts for now. See Vue Charts. The Nuxt module is standalone and does not depend on it.Add the module to your nuxt.config.ts:
export default defineNuxtConfig({
modules: ["nuxt-charts"]
})
<script setup lang="ts">
const data = [
{ month: 'Jan', sales: 100, profit: 50 },
{ month: 'Feb', sales: 120, profit: 55 },
{ month: 'Mar', sales: 180, profit: 80 },
{ month: 'Apr', sales: 110, profit: 40 },
{ month: 'May', sales: 90, profit: 30 },
]
const categories = {
sales: {
name: 'Sales',
},
profit: {
name: 'Profit',
},
}
const xFormatter = (i: number) => data[i].month
</script>
<template>
<LineChart
:data="data"
:categories="categories"
:height="300"
:xFormatter="xFormatter"
xLabel="Month"
yLabel="Amount"
/>
</template>
If your app uses Nuxt UI v4, v3 automatically follows its semantic colors,
surfaces, text, borders, radius, font, and dark mode. Without Nuxt UI, complete
standalone defaults are used. In either case you can override the public
--vc-* tokens on the chart root. See Theming.
.vue-chrts {
--vc-tick-color: var(--ui-text-muted);
--vc-grid-color: var(--ui-border);
--vc-tooltip-bg: var(--ui-bg-elevated);
--vc-legend-color: var(--ui-text-muted);
}
When searching for the right charting solution, it's important to understand how different libraries stack up.
| Feature | Nuxt Charts v3 | Chart.js | Unovis |
|---|---|---|---|
| Rendering | SVG (vccs) | Canvas | SVG (native) |
| Type Safety | ✅ Full TypeScript | Partial | ✅ Full TypeScript |
| Style System | Tailwind / Nuxt UI | Custom CSS | Framework-agnostic |
| SEO Ready | ✅ Yes | ❌ Limited | ✅ Yes |
| Best For | Modern Nuxt apps | Legacy/Simple Apps | Complex Unovis dashboards |