{"id":12418,"library":"vue-chrts","title":"Vue Chrts - Charts for Vue 3","description":"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.","status":"active","version":"2.1.4","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-chrts","lang":"bash","label":"npm"},{"cmd":"yarn add vue-chrts","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-chrts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vue 3 framework dependency; required peer dependency for all components.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"const LineChart = require('vue-chrts');","symbol":"LineChart","correct":"import { LineChart } from 'vue-chrts';"},{"note":"All chart components (e.g., LineChart, BarChart, AreaChart) are exported individually as named exports. There is no default export for the library.","wrong":"import BarChart from 'vue-chrts';","symbol":"BarChart","correct":"import { BarChart } from 'vue-chrts';"},{"note":"Similar to other chart types, DonutChart is directly imported as a named export. Ensure your build system supports ES modules.","symbol":"DonutChart","correct":"import { DonutChart } from 'vue-chrts';"}],"quickstart":{"code":"<script setup>\nimport { LineChart } from 'vue-chrts';\n\nconst data = [\n  { month: 'Jan', sales: 100, profit: 50 },\n  { month: 'Feb', sales: 120, profit: 55 },\n  { month: 'Mar', sales: 180, profit: 80 },\n  { month: 'Apr', sales: 110, profit: 40 },\n  { month: 'May', sales: 90, profit: 30 },\n];\n\nconst categories = {\n  sales: {\n    name: 'Sales',\n    color: '#3b82f6'\n  },\n  profit: {\n    name: 'Profit', \n    color: '#10b981'\n  }\n};\n\nconst xFormatter = (i) => data[i].month;\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    :categories=\"categories\"\n    :height=\"300\"\n    :xFormatter=\"xFormatter\"\n    xLabel=\"Month\"\n    yLabel=\"Amount\"\n  />\n</template>","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure your project's `vue` dependency in `package.json` is set to `^3.5.13` or higher and reinstall dependencies.","message":"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.","severity":"breaking","affected_versions":"<3.5.13"},{"fix":"For Vue CLI/Vite projects, install `vue-chrts`. For Nuxt 3 projects, install `nuxt-charts` and configure it as a Nuxt module.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The chart component (e.g., `LineChart`) was not correctly imported or registered in the Vue component where it's being used.","error":"[Vue warn]: Failed to resolve component: LineChart"},{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'month') in xFormatter"},{"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`.","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.","error":"Error: Cannot find module 'vue-chrts' or 'nuxt-charts'"}],"ecosystem":"npm"}