Vue Chrts - Charts for Vue 3

2.1.4 · active · verified Sun Apr 19

Vue Chrts (version 2.1.4, with recent releases indicating active maintenance) is a Vue 3 charting library designed to create beautiful, responsive data visualizations with minimal setup. Inspired by Tremor and built on top of Unovis, it offers a variety of chart types including Line, Bar, Area, Stacked Area, and Donut charts. Key differentiators include its intuitive API, full customizability, responsive design, and robust TypeScript support, making it well-suited for modern Vue.js and Nuxt 3 applications where aesthetic appeal and ease of integration are priorities. It handles the complexities of charting, allowing developers to focus on data presentation.

Common errors

```
[Vue warn]: Failed to resolve component: LineChart
```
cause The chart component (e.g., `LineChart`) was not correctly imported or registered in the Vue component where it's being used.

fix Ensure you have `import { LineChart } from 'vue-chrts';` at the top of your `<script setup>` block or explicitly registered it if using the Options API.
```
TypeError: Cannot read properties of undefined (reading 'month') in xFormatter
```
cause The `xFormatter` function is trying to access a property (`month`) from an element in the `data` array that either doesn't exist or is `undefined` due to an incorrect data structure or index.

fix Verify that your `data` array objects contain the `month` property (or whatever property `xFormatter` expects) and that the `xFormatter` logic correctly handles the data structure.
```
Error: Cannot find module 'vue-chrts' or 'nuxt-charts'
```
cause This error typically occurs if the package was installed incorrectly, the wrong package name (`vue-chrts` vs. `nuxt-charts`) was used for the project type, or the import path is incorrect.

fix Check your `package.json` for `vue-chrts` (for Vue projects) or `nuxt-charts` (for Nuxt projects). Ensure correct installation (`npm install vue-chrts` or `npm install nuxt-charts`) and that the import statement matches the installed package. For Nuxt, ensure the module is added to `nuxt.config.ts`.

Warnings

breaking Vue Chrts requires Vue 3.5.13 or higher as a peer dependency. Using older Vue 3 versions might lead to unexpected behavior or compilation errors due to API differences.
Fix: Ensure your project's `vue` dependency in `package.json` is set to `^3.5.13` or higher and reinstall dependencies.
gotcha The package name for standard Vue.js projects is `vue-chrts`, while for Nuxt applications, it's `nuxt-charts`. Using the wrong package name for your project type will result in installation or import errors. This is part of a monorepo strategy.
Fix: For Vue CLI/Vite projects, install `vue-chrts`. For Nuxt 3 projects, install `nuxt-charts` and configure it as a Nuxt module.
gotcha Ensure that the `data` prop's array structure and the `categories` prop's keys precisely match the chart's expectations. Mismatched property names or incorrect data shapes can lead to charts failing to render or displaying empty. For example, `xFormatter` relies on the `data` array's structure.
Fix: Refer to the official documentation for the specific chart type being used and verify your data and categories objects align with the expected format, especially the keys referenced by formatters or labels.
gotcha Mutating props directly in a child component, such as the `data` or `categories` props, is an anti-pattern in Vue and will trigger warnings. This breaks the one-way data flow.
Fix: If a prop needs to be modified, create a local copy within the component using `ref` or `reactive` and modify the copy. Emit an event to the parent component to request a change to the original prop value.

Install

npm install vue-chrts npm
yarn add vue-chrts yarn
pnpm add vue-chrts pnpm

Imports

LineChart
wrong:
```
const LineChart = require('vue-chrts');
```
correct:
```
import { LineChart } from 'vue-chrts';
```
Vue Chrts uses named exports for all its components and is ESM-first, aligning with modern Vue 3 development patterns. CommonJS `require` is not supported.
BarChart
wrong:
```
import BarChart from 'vue-chrts';
```
correct:
```
import { BarChart } from 'vue-chrts';
```
All chart components (e.g., LineChart, BarChart, AreaChart) are exported individually as named exports. There is no default export for the library.
DonutChart
```
import { DonutChart } from 'vue-chrts';
```
Similar to other chart types, DonutChart is directly imported as a named export. Ensure your build system supports ES modules.

Quickstart

This quickstart demonstrates importing and using the LineChart component within a Vue 3 `<script setup>` component, binding data, defining categories, and setting up axis formatters and labels. It illustrates a basic chart with two data series.

<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>

view raw JSON →