{"id":12623,"library":"vue3-apexcharts","title":"Vue 3 ApexCharts Component","description":"vue3-apexcharts is the official Vue 3 wrapper component for ApexCharts.js, a modern open-source charting library used for building interactive data visualizations. Currently at version 1.11.1, it provides seamless integration of ApexCharts within Vue 3 applications, offering features like reactive chart updates where changes to data or options automatically re-render the chart. The library supports tree-shaking, allowing developers to import only necessary chart types to optimize bundle size, and includes robust Server-Side Rendering (SSR) capabilities with dedicated `<apexchart-server>` and `<apexchart-hydrate>` components. It also offers full TypeScript support, enhancing developer experience with type safety. This package is specifically designed for Vue 3; users requiring Vue 2 compatibility should instead use the `vue-apexcharts` package. The release cadence typically follows updates to the core ApexCharts.js library, ensuring compatibility and access to new features. Its key differentiator is being the official, fully-featured, and actively maintained Vue 3 component for ApexCharts.js.","status":"active","version":"1.11.1","language":"javascript","source_language":"en","source_url":"https://github.com/apexcharts/vue3-apexcharts","tags":["javascript","vuejs","vue3","charts","apexcharts.js","apexcharts","typescript"],"install":[{"cmd":"npm install vue3-apexcharts","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-apexcharts","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-apexcharts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The core charting library that vue3-apexcharts wraps and requires at runtime.","package":"apexcharts","optional":false},{"reason":"The Vue.js framework, specifically Vue 3.x, as this is a Vue 3 component.","package":"vue","optional":false}],"imports":[{"note":"The main component is a default export, typically used for global registration via `app.use()`.","wrong":"import { VueApexCharts } from 'vue3-apexcharts';","symbol":"VueApexCharts","correct":"import VueApexCharts from \"vue3-apexcharts\";\nconst app = createApp(App);\napp.use(VueApexCharts);"},{"note":"For local component registration within a specific Vue component. Vue 3 projects are primarily ESM-based, so `require()` is incorrect.","wrong":"const apexchart = require('vue3-apexcharts');","symbol":"apexchart (component)","correct":"import VueApexCharts from \"vue3-apexcharts\";\nexport default {\n  components: {\n    apexchart: VueApexCharts\n  },\n};"},{"note":"Required for TypeScript to provide type safety and intellisense when accessing the global `$apexcharts` instance on `this` within Vue components.","wrong":"app.config.globalProperties.$apexcharts = ApexCharts; // (without TS declaration)","symbol":"$apexcharts (global property)","correct":"import ApexCharts from \"apexcharts\";\napp.config.globalProperties.$apexcharts = ApexCharts;\n\ndeclare module \"@vue/runtime-core\" {\n  interface ComponentCustomProperties {\n    $apexcharts: typeof ApexCharts;\n  }\n}"}],"quickstart":{"code":"<template>\n  <div class=\"app\">\n    <apexchart\n      width=\"550\"\n      type=\"bar\"\n      :options=\"chartOptions\"\n      :series=\"series\"\n    ></apexchart>\n    <div>\n      <button @click=\"updateChart\">Update Chart Data</button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport VueApexCharts from \"vue3-apexcharts\";\nimport ApexCharts from \"apexcharts\"; // For global property typing\n\n// Add this when into a TypeScript codebase to type $apexcharts\ndeclare module \"@vue/runtime-core\" {\n  interface ComponentCustomProperties {\n    $apexcharts: typeof ApexCharts;\n  }\n}\n\nexport default defineComponent({\n  components: {\n    apexchart: VueApexCharts, // Local registration, or use app.use(VueApexCharts) globally in main.ts\n  },\n  data() {\n    return {\n      chartOptions: {\n        chart: {\n          id: \"vuechart-example\",\n          toolbar: {\n            show: false\n          }\n        },\n        xaxis: {\n          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]\n        },\n        title: {\n          text: 'Yearly Data Series',\n          align: 'left'\n        }\n      },\n      series: [\n        {\n          name: \"Series A\",\n          data: [30, 40, 35, 50, 49, 60, 70, 91]\n        }\n      ]\n    };\n  },\n  methods: {\n    updateChart() {\n      // Simulate data update by generating new random data\n      const newSeriesData = this.series[0].data.map(() => Math.floor(Math.random() * (100 - 20 + 1)) + 20);\n      this.series = [{ name: \"Series A\", data: newSeriesData }];\n    }\n  }\n});\n</script>\n\n<style>\n.app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\nbutton {\n  padding: 10px 20px;\n  margin-top: 20px;\n  cursor: pointer;\n  background-color: #42b983;\n  color: white;\n  border: none;\n  border-radius: 5px;\n}\n</style>","lang":"typescript","description":"This example demonstrates how to create a reactive bar chart using `vue3-apexcharts`, configure its data and options, and dynamically update the chart series when a button is clicked. It includes both local component registration and TypeScript type declaration for the global `$apexcharts` property, making it ready for a modern Vue 3 setup."},"warnings":[{"fix":"For Vue 2.x applications, use the `vue-apexcharts` package instead. Ensure your project's `vue` dependency is `^3.0.0` or higher.","message":"vue3-apexcharts is exclusively for Vue 3.x applications. Attempting to use it in a Vue 2.x project will result in compatibility errors and runtime failures.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Install `apexcharts` alongside `vue3-apexcharts`: `npm install apexcharts vue3-apexcharts` or `yarn add apexcharts vue3-apexcharts`.","message":"The `apexcharts` core library is a peer dependency and must be installed separately. The `vue3-apexcharts` component will not render or function correctly if `apexcharts` is missing.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `app.use(VueApexCharts)` is executed directly after `createApp(App)` in your `main.ts`/`main.js` file, or explicitly add `apexchart: VueApexCharts` to the `components` property of any Vue component using it.","message":"For global component registration, `app.use(VueApexCharts)` must be called *before* mounting the Vue application. If you register locally, ensure `apexchart: VueApexCharts` is correctly declared in your component's `components` option.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add the following declaration to a `.d.ts` file or directly in your `main.ts` after importing `ApexCharts`:\n```typescript\nimport ApexCharts from \"apexcharts\";\ndeclare module \"@vue/runtime-core\" {\n  interface ComponentCustomProperties {\n    $apexcharts: typeof ApexCharts;\n  }\n}\n```","message":"When using TypeScript and attempting to access `$apexcharts` on the Vue instance (e.g., `this.$apexcharts`), you need to augment the `ComponentCustomProperties` interface to provide type declarations, otherwise TypeScript will report an error.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"If using globally, ensure `import VueApexCharts from \"vue3-apexcharts\"; createApp(App).use(VueApexCharts).mount('#app');` is called. If locally, add `components: { apexchart: VueApexCharts }` to your component's definition.","cause":"The `<apexchart>` component was not properly registered either globally or locally.","error":"Failed to resolve component: apexchart"},{"fix":"Install `apexcharts` as a peer dependency: `npm install apexcharts` or `yarn add apexcharts`.","cause":"The underlying `apexcharts` core library is not installed or not accessible to `vue3-apexcharts`.","error":"Cannot read properties of undefined (reading 'render')"},{"fix":"Add the provided `declare module \"@vue/runtime-core\" {...}` block to your TypeScript environment (e.g., in `shims-vue.d.ts` or `main.ts`) after importing `ApexCharts`.","cause":"The TypeScript type declaration for the global `$apexcharts` property is missing from your project.","error":"Property '$apexcharts' does not exist on type 'ComponentPublicInstance<...>' (TypeScript error)"}],"ecosystem":"npm"}