nuxt-charts

Legacy Nuxt Charts module (Unovis / vue-chrts). Prefer nuxt-charts v3.
596,920 437
Install
npm install nuxt-charts@next
Latest Version:3.1.0
Vue:3
License:MIT
Last Updated:Oct 13, 2026
Links: GitHub  ·  npm
Maintainer: dennisadriaans

Vue-chrts

This is a monorepo for vue-chrts, the legacy Nuxt module, and the next nuxt-charts module.

A Vue 3 charts package inspired by Tremor, built on top of Unovis. Vue-Chrts provides beautiful, responsive charts for your Vue applications with minimal setup.

alt text

Check the docs and examples

Features

  • 📊 Multiple chart types: Line, Bar, Area, Stacked Area, Donut
  • 🎨 Customizable
  • 📱 Responsive design
  • 💡 Simple, intuitive API
  • 🚀 Built with Vue 3 and TypeScript

Check the docs and examples

Installation Nuxt

# npm
npm install nuxt-charts

# yarn
yarn add nuxt-charts

# pnpm
pnpm add nuxt-charts

# Add module to your nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-charts"]
});

Installation Vue.js

# npm
npm install vue-chrts

# yarn
yarn add vue-chrts

# pnpm
pnpm add vue-chrts

# import component
import { LineChart } from 'vue-chrts';

Check the docs and examples

Usage Example

<script setup>
import { LineChart } from 'vue-chrts';

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',
    color: '#3b82f6'
  },
  profit: {
    name: 'Profit', 
    color: '#10b981'
  }
};

const xFormatter = (i) => data[i].month;
</script>

<template>
  <LineChart
    :data="data"
    :categories="categories"
    :height="300"
    :xFormatter="xFormatter"
    xLabel="Month"
    yLabel="Amount"
  />
</template>

Check the docs and examples

Available Charts

  • LineChart
  • BarChart
  • AreaChart
  • AreaStackedChart
  • DonutChart

Vue charts

Make better dashboards with with Vue charts This library simplifies the process of integrating beautiful Vue charts into any modern web application or dashboard.

Credits

This library is inspired by Tremor and built on top of Unovis.

Angular

Looking for the Angular charts variant? Check the Angular Charts website or the GitHub repo here.

License

MIT

Related Packages

@josquin2/nuxt-charts

Nuxt Charts module (Unovis / vue-chrts).

0 439
vue-chrts

Vue 3 chart components built on Unovis — Area, Bar, Line, Donut, Sparkline and T...

692,258 439
@memotux/nuxt-vue-plot

Nuxt module for @memotux/vue-plot — declarative data visualization with Observab...

376 2
realchart-vue

Wooritech realchart vue component library

747
@antv/f-vue

FEngine for Vue.js

7,809 7,994

Version History

Version Released License
3.1.0 MIT
3.0.0 MIT
2.2.3 MIT
2.2.2 MIT
2.2.1 MIT
Pre-releases (106)
Version Released License
3.0.0-beta.4 MIT
3.0.0-beta.3 MIT
3.0.0-beta.2 MIT
3.0.0-beta.1 MIT
3.0.0-beta.0 MIT