Registry / web-framework / vue-chrts

vue-chrts

JSON →
library2.1.4jsnpmunverified

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.

web-framework
npm install vue-chrts
package ↗
INSTALL
IMPORT
SIG · VUE-CHRTS
V
vue-chrts
web-frameworkjavascriptv2.1.4
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

LineChart
✓ import { LineChart } from 'vue-chrts';
✗ const LineChart = require('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
✓ import { BarChart } from 'vue-chrts';
✗ 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.

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>
Debug
Known issues
breakingVue 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.
affects: <3.5.13
gotchaThe 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.
affects: >=2.0.0
gotchaEnsure 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.
affects: >=2.0.0
gotchaMutating 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.
affects: >=2.0.0
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: LineChart
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
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'
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`.
Upgrade
Version history
2.1.4latest on npm
Audit
Dependencies
vuerequiredVue 3 framework dependency; required peer dependency for all components.
Agent activity
9 hits · last 30 days
node
8
OpenAI (training)
1
Resources
packagehttps://www.npmjs.com/package/vue-chrts ↗
vue-chrts — npm install vue-chrts · libregistry