{"id":12415,"library":"vue-chart-3","title":"Vue Chart.js 4 Wrapper","description":"Vue-Chart-3 is a modern, TypeScript-first wrapper for Chart.js 4, specifically designed for use with Vue 3's Composition API. It provides a suite of reactive Vue components that streamline the integration of various Chart.js chart types, such as Bar, Line, and Doughnut, into Vue applications. Currently at version 4.0.1, the package is actively maintained with a focus on seamless compatibility with Chart.js 4, Vue 3.5+, and contemporary build tools like Vite.js and Nuxt 3. Its key differentiators include comprehensive TypeScript support, leveraging the Composition API for efficient reactivity, and ensuring robust functionality within the latest Vue and Chart.js ecosystems.","status":"active","version":"4.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/victorgarciaesgi/vue-chart-3","tags":["javascript","vue chartjs 4","vue chart.js 4","chartjs 4","vue chartjs","chartjs vue","chartjs 4 vue","chartjs vue3","chartjs vue 3","typescript"],"install":[{"cmd":"npm install vue-chart-3","lang":"bash","label":"npm"},{"cmd":"yarn add vue-chart-3","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-chart-3","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core charting library, required for all chart rendering. Peer dependency.","package":"chart.js","optional":false},{"reason":"Vue framework, required for component rendering. Peer dependency.","package":"vue","optional":false}],"imports":[{"note":"Import specific chart components as named exports. Check documentation for all available chart types like BarChart, DoughnutChart, etc.","wrong":"import LineChart from 'vue-chart-3/LineChart';","symbol":"LineChart","correct":"import { LineChart } from 'vue-chart-3';"},{"note":"The core Chart.js object and `registerables` are imported directly from `chart.js` for tree-shaking and global registration. Chart.js v4 requires explicit registration of controllers, elements, scales, and plugins.","wrong":"import Chart from 'chart.js';","symbol":"Chart","correct":"import { Chart, registerables } from 'chart.js';"},{"note":"While `vue-chart-3` primarily uses components, it also provides hooks like `useLineChart` (and similar for other types) for advanced use cases where direct Chart.js instance manipulation or custom rendering is needed. This is less common for basic usage.","symbol":"useChart","correct":"import { useLineChart } from 'vue-chart-3';"}],"quickstart":{"code":"import { defineComponent, ref, computed } from 'vue';\nimport { Chart, registerables } from 'chart.js';\nimport { BarChart } from 'vue-chart-3';\n\n// Globally register Chart.js components once\nChart.register(...registerables);\n\nexport default defineComponent({\n  name: 'SimpleBarChart',\n  components: {\n    BarChart,\n  },\n  setup() {\n    const dataValues = ref([65, 59, 80, 81, 56, 55, 40]);\n\n    const chartData = computed(() => ({\n      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n      datasets: [\n        {\n          label: 'Data One',\n          backgroundColor: '#42b983',\n          data: dataValues.value,\n        },\n        {\n          label: 'Data Two',\n          backgroundColor: '#ff6384',\n          data: [28, 48, 40, 19, 86, 27, 90],\n        },\n      ],\n    }));\n\n    const chartOptions = ref({\n      responsive: true,\n      maintainAspectRatio: false,\n      plugins: {\n        title: {\n          display: true,\n          text: 'Monthly Sales Data',\n        },\n      },\n    });\n\n    const updateData = () => {\n      dataValues.value = dataValues.value.map(value => Math.floor(Math.random() * 100));\n    };\n\n    return {\n      chartData,\n      chartOptions,\n      updateData,\n    };\n  },\n  template: `\n    <div :style=\"{ height: '400px', width: '600px' }\">\n      <BarChart :chartData=\"chartData\" :options=\"chartOptions\" />\n      <button @click=\"updateData\" style=\"margin-top: 20px; padding: 10px 20px; background-color: #42b983; color: white; border: none; border-radius: 5px; cursor: pointer;\">Update Data</button>\n    </div>\n  `,\n});","lang":"typescript","description":"This quickstart demonstrates how to set up and render a reactive Bar Chart using `vue-chart-3` and Chart.js in a Vue 3 Composition API component, including global Chart.js registration and dynamic data updates."},"warnings":[{"fix":"Ensure `chart.js` is `^4.0.0` and `vue` is `>= 3`. Follow the migration guide for Chart.js v4 and Vue 3 if upgrading from older major versions.","message":"Version 4.0.0 represents a major breaking change, requiring Chart.js v4 and Vue 3.5+. Projects using older versions of Chart.js (v3 or earlier) or Vue 2.x must migrate their dependencies.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Add `import { Chart, registerables } from 'chart.js'; Chart.register(...registerables);` at your application's entry point or in a global plugin. Alternatively, import and register specific Chart.js modules for smaller bundle sizes.","message":"Chart.js v4, and by extension `vue-chart-3` v4, adopts a tree-shakable architecture. This means core Chart.js elements (controllers, scales, tooltips, etc.) must be explicitly imported and registered, typically once globally, using `Chart.register(...registerables);` or individual imports.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Install `chart.js` with `^4.0.0` and `vue` with `>= 3` alongside `vue-chart-3`. Verify your Node.js version meets the `>=20` requirement.","message":"`vue-chart-3` relies on `chart.js` and `vue` as peer dependencies. Incorrect or incompatible versions of these peer dependencies will lead to installation issues or runtime errors. The package requires Node.js >= 20.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Ensure you are using `vue-chart-3` version 3.1.8 or higher, or the latest 4.x release, to benefit from improved reactivity watchers.","message":"Prior to versions 3.1.5, 3.1.6, and 3.1.7, `vue-chart-3` had known reactivity issues where updates to chart data or options props might not correctly trigger chart re-renders.","severity":"gotcha","affected_versions":"<3.1.8"},{"fix":"Refactor chart components to import and use the specific `vue-chart-3` components (e.g., `<BarChart>`) directly, passing `chartData` and `options` as props.","message":"The `extends` and mixin-based approach for creating charts, common in `vue-chartjs` v3, has been removed in `vue-chart-3` v4. Charts are now standard Vue 3 components used directly with props.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Chart.register(...registerables);` is called only once globally in your application's entry file (e.g., `main.ts` or a Vue plugin) before any chart components are mounted.","cause":"Attempting to register Chart.js components (e.g., `registerables`) multiple times, typically by calling `Chart.register()` in every component instance.","error":"Error: \"Chart with ID '0' is already registered\""},{"fix":"Import the desired chart component from `vue-chart-3` (e.g., `import { LineChart } from 'vue-chart-3';`) and declare it in your Vue component's `components` option, or use it directly in a `<script setup>` context.","cause":"A `vue-chart-3` component (e.g., `<LineChart>`) was used in a template but not imported or registered with Vue.","error":"[Vue warn]: Failed to resolve component: <ChartType>"},{"fix":"Import `Chart` and `registerables` from `chart.js` and call `Chart.register(...registerables);` once globally. For tree-shaking, import and register only the necessary components from `chart.js` (e.g., `CategoryScale`, `LinearScale`, `Tooltip`, `Legend`, `BarElement`).","cause":"Specific Chart.js elements like scales, tooltips, or legend controllers were not registered with the global `Chart` object.","error":"TypeError: Cannot read properties of undefined (reading 'scales') (or similar Chart.js internal errors)"},{"fix":"Ensure your project's `package.json` explicitly lists `\"chart.js\": \"^4.0.0\"` and `\"vue\": \">= 3\"` in `dependencies` and install them. Use `npm install --force` or `npm install --legacy-peer-deps` as a last resort, but first, verify compatible versions.","cause":"Mismatched or missing peer dependencies for `chart.js` or `vue`.","error":"npm ERR! ERESOLVE unable to resolve dependency tree"},{"fix":"Always use ES module `import` syntax (e.g., `import { BarChart } from 'vue-chart-3';`) as `vue-chart-3` supports ESM builds since v3.1.0 and is a modern Vue 3 library.","cause":"Attempting to use CommonJS `require()` syntax in an ES module (`type: \"module\"` in `package.json`) environment, or when the bundler expects ESM.","error":"ReferenceError: require is not defined"}],"ecosystem":"npm"}