![](\"https://apexcharts.com/media/vue-apexcharts.png\")
\n ![\"build\"](\"https://api.travis-ci.com/apexcharts/vue3-apexcharts.svg?branch=master\")
\n ![\"ver\"](\"https://img.shields.io/npm/v/vue3-apexcharts.svg\")
\n
\n ![](\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\")
\n
Vue 3 component for ApexCharts to build interactive visualizations in vue.
\n\n![](\"https://apexcharts.com/media/apexcharts-banner.png\")
![](\"https://apexcharts.com/media/first-bar-chart.svg\")
![](\"https://apexcharts.com/media/vue-chart-updation.gif\")
chart.id while calling this method\n\nExample\n\n```js\nwindow.ApexCharts.exec(\"vuechart-example\", \"updateSeries\", [\n {\n data: [40, 55, 65, 11, 23, 44, 54, 33],\n },\n]);\n```\n\nIn the above method, `vuechart-example` is the ID of chart, `updateSeries` is the name of the method you want to call and the third parameter is the new Series you want to update.\n\nMore info on the `.exec()` method can be found here\n\nAll other methods of ApexCharts can be called the same way.\n\n## Tree-Shaking (Core Entry)\n\nThe default entry (`vue3-apexcharts`) bundles the full ApexCharts library. If you want to reduce your bundle size by importing only the chart types and features you need, use the **core** entry point:\n\n```js\nimport VueApexCharts from \"vue3-apexcharts/core\";\n\n// Import by the exact chart type name you use in :type or chart.type\nimport \"apexcharts/line\";\nimport \"apexcharts/bar\";\nimport \"apexcharts/donut\";\nimport \"apexcharts/treemap\";\n\n// Import only the features you need\nimport \"apexcharts/features/legend\";\nimport \"apexcharts/features/toolbar\";\n\nconst app = createApp(App);\napp.use(VueApexCharts);\n```\n\nThe core entry imports ApexCharts from `apexcharts/core`, which is the bare class with only tooltip included. You must explicitly import the chart types and optional features your app uses.\n\nEach chart type has its own import that matches the type name you pass to the component — no need to know which internal module it maps to:\n\n**Chart types:**\n\n| Import | type string |\n|--------|-------------|\n| `apexcharts/line` | `\"line\"` |\n| `apexcharts/area` | `\"area\"` |\n| `apexcharts/scatter` | `\"scatter\"` |\n| `apexcharts/bubble` | `\"bubble\"` |\n| `apexcharts/rangeArea` | `\"rangeArea\"` |\n| `apexcharts/bar` | `\"bar\"` |\n| `apexcharts/column` | `\"column\"` |\n| `apexcharts/barStacked` | `\"barStacked\"` |\n| `apexcharts/rangeBar` | `\"rangeBar\"` |\n| `apexcharts/pie` | `\"pie\"` |\n| `apexcharts/donut` | `\"donut\"` |\n| `apexcharts/polarArea` | `\"polarArea\"` |\n| `apexcharts/radialBar` | `\"radialBar\"` |\n| `apexcharts/radar` | `\"radar\"` |\n| `apexcharts/candlestick` | `\"candlestick\"` |\n| `apexcharts/boxPlot` | `\"boxPlot\"` |\n| `apexcharts/heatmap` | `\"heatmap\"` |\n| `apexcharts/treemap` | `\"treemap\"` |\n\n**Optional features:**\n| Import | Description |\n|--------|-------------|\n| `apexcharts/features/legend` | Chart legend |\n| `apexcharts/features/toolbar` | Toolbar (zoom, pan, download) |\n| `apexcharts/features/annotations` | X/Y-axis and point annotations |\n| `apexcharts/features/exports` | PNG/SVG/CSV export |\n| `apexcharts/features/keyboard` | Keyboard navigation & accessibility |\n\n> **Note:** Tree-shaking requires ApexCharts v5.8.1+.\n\n### Vite: preventing \"chart type X is not registered\" errors\n\nVite's dependency pre-bundler can create two separate copies of the ApexCharts module — one for `apexcharts/core` and separate ones for each sub-entry — causing registrations to be lost. If you see this error even though you have the correct imports, add your apexcharts entries to `optimizeDeps.include`:\n\n```js\n// vite.config.js\nexport default {\n optimizeDeps: {\n include: [\n 'apexcharts/core',\n 'apexcharts/line',\n 'apexcharts/bar',\n // ...all apexcharts/* entries you import\n 'apexcharts/features/legend',\n 'apexcharts/features/toolbar',\n ],\n },\n}\n```\n\nThis forces Vite to pre-bundle all sub-entries together so they share a single ApexCharts instance and all registrations are preserved.\n\n## Server-Side Rendering (SSR)\n\nVue3-ApexCharts includes dedicated components for SSR that work with Nuxt 3 and other Vue SSR frameworks.\n\n> **Note:** SSR support requires ApexCharts v5.6.0+.\n\n### Nuxt 3 Setup\n\nRegister the plugin so that components are available during both server and client render passes:\n\n```ts\n// plugins/apexcharts.ts\nimport VueApexCharts from \"vue3-apexcharts\";\n\nexport default defineNuxtPlugin({\n name: \"apexcharts\",\n parallel: true,\n setup(nuxtApp) {\n nuxtApp.vueApp.use(VueApexCharts);\n },\n});\n```\n\n### Server-Side Rendering with `