# vue-apexcharts for Vue 2: setup, reactive updates, and limits

> vue-apexcharts connects Vue 2 components to ApexCharts through reactive props and chart methods. It fits Vue 2 applications that need interactive charts, but its version constraints and repository license require review before adoption.

**apexcharts/vue-apexcharts** — 📊 Vue 2 component for ApexCharts

- Repository: https://github.com/apexcharts/vue-apexcharts
- Website: https://apexcharts.com
- Stars: 1,339 · Forks: 129
- Language: Vue
- License: NOASSERTION
- Published: 2026-10-16 · Updated: 2026-10-16 · Language: en
- Canonical page: https://hysenlabs.com/projects/apexcharts-vue-apexcharts

## The Vue 2 boundary in vue-apexcharts

vue-apexcharts solves the integration problem between a Vue 2 component tree and ApexCharts. An application can declare a chart in a template, provide its values through `series`, and place chart configuration in `options`, rather than constructing a separate chart instance for every visualization. The intended users are developers working with Vue `^2.5.17`, the peer dependency declared in `package.json`, who need chart types such as `line`, `bar`, `pie`, `scatter`, `heatmap`, and `candlestick`.

The package boundary is explicit. The README directs Vue 3.x users to the separate `vue3-apexcharts` repository. That distinction matters because this package declares `vue: ^2.5.17` as a peer dependency, identifies `dist/vue-apexcharts.js` as its main entry, and documents registration through `Vue.use(VueApexCharts)`. It is not presented as one component package that supports both Vue majors without separate compatibility work.

The wrapper also requires ApexCharts itself. The README instructs developers to install both packages, while `package.json` declares `apexcharts: >=4.0.0` as a peer dependency. vue-apexcharts provides the Vue component layer, while ApexCharts supplies the series format, options, rendering behavior, and methods linked from `apexcharts.com`. Adopting this wrapper therefore means managing the wrapper and its chart engine together.

## npm installation and Vue plugin registration

The README documents npm installation and requires both `apexcharts` and `vue-apexcharts`. Run these commands in the Vue 2 application that will render the chart. The `--save` flag records both dependencies in the project's package configuration.

```bash
npm install --save apexcharts
npm install --save vue-apexcharts
```

After installation, import the wrapper, register it as a Vue plugin, and expose it under the template name `apexchart`.

```js
import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)
```

This creates the documented integration point. A Vue component can then pass `type`, `width`, `series`, and `options` to the registered element. The repository's `package.json` does not define a separate chart CLI or service registration process. Its `build` script runs `npm run bundle`, and the `bundle` script invokes Rollup, but those are package build commands rather than steps required by an application developer using the published package.

## Building the first reactive bar chart

A basic chart consists of an `apexchart` element and a Vue data object containing matching series and categories. The example below follows the README's `bar` configuration. The x-axis categories contain eight years, and the single series contains eight corresponding values.

```vue
<template>
   <div>
     <apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
   </div>
</template>

<script>
export default {
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example'
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
          }
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 35, 50, 49, 60, 70, 91]
        }]
      }
    },
};
</script>
```

The `:options` and `:series` bindings expose the component data as props. According to the README, vue-apexcharts watches those props and updates the chart when they change. `series` and `type` are required props. The documented width and height types are `Number/String`, with examples including `500`, `400px`, and `100%`.

The wrapper does not define the complete series schema in its prop table. It directs developers to the ApexCharts `Series` documentation for that structure. This is one practical reason to keep ApexCharts documentation available while implementing a chart: choosing a wrapper component does not remove the need to understand the underlying series and options API.

## Replacing outer options for reactive chart updates

Automatic updates work with replacement of the outer Vue binding. The README warns against changing only a nested property of `chartOptions`, because the Vue watch may not catch that mutation. Its recommended pattern creates a new options object with object spread and replaces the nested x-axis configuration within the new object.

```javascript
this.chartOptions = {...this.chartOptions, ...{
    xaxis: {
        labels: {
            style: {
                colors: ['red']
            }
        }
    }
}}
```

Series updates follow the same principle. The README's update example maps `this.series[0].data` into `newData`, then assigns a new array to `this.series`. It also assigns a new object to `this.chartOptions` when updating colors. Applications should preserve unrelated configuration when constructing a replacement, because a direct replacement can omit nested options that were present in the previous object.

This reactive approach is convenient for data that changes during normal component operation. It is less forgiving when code tries to mutate a nested object in place. Code that expects the old behavior may appear logically correct because it changes the nested value, yet the README explicitly identifies that pattern as one that does not reliably trigger the wrapper's watch behavior.

## Forced updates through a component reference

The README also documents imperative methods for operations that should update a chart forcefully. A template reference gives the parent component access to the methods exposed by vue-apexcharts. For example, the documented method call uses `this.$refs.demoChart.updateOptions({ colors: newColors })`.

```html
<template>
  <div class="example">
    <apexchart ref="demoChart" width="500" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>
```

```html
<script>
  functionName: function() {
    this.$refs.demoChart.updateOptions({ colors: newColors })
  },
</script>
```

The README lists `updateSeries()` and `updateOptions()` for forceful data and configuration changes. Other exposed methods are `toggleSeries()`, `appendData()`, `addText()`, `addXaxisAnnotation()`, `addYaxisAnnotation()`, and `addPointAnnotation()`. Their documented purposes range from visibility control with a custom legend to appending values and drawing text or annotations after rendering.

This interface does not promise unrestricted access to the underlying ApexCharts instance. Developers should use the named wrapper methods documented by the project. The README links to ApexCharts documentation for method details, but it does not provide complete argument examples for every annotation method. Exact signatures therefore need to be checked against the installed ApexCharts API before use.

## Package version, build output, and license review

The repository is not archived, and its last push was on 2026-10-14. It has no GitHub releases, so repository release history does not provide an upgrade track beyond the package version recorded in source control. `package.json` identifies the current package version as `1.7.1`, requires Vue `^2.5.17`, and accepts ApexCharts `>=4.0.0`.

The broad `>=4.0.0` range gives the wrapper flexibility at installation time, but it does not prove that every option or method in the newest ApexCharts API works with this version of vue-apexcharts. The linked documentation describes ApexCharts itself, while the wrapper exposes a subset through its component API. An upgrade should therefore check both the wrapper's supported methods and the application's chart configuration.

The licensing record is ambiguous enough to require direct inspection. The README badge displays MIT, but GitHub classifies the repository license as Other, and `package.json` says `SEE LICENSE IN LICENSE.md`. The authoritative file for this repository is `LICENSE.md`, not the badge. Review that file before redistribution or product integration rather than assuming the badge captures every applicable term.

## Conclusion

Adopt vue-apexcharts for a Vue 2 application that accepts the package's `vue` and `apexcharts` peer constraints and has reviewed `LICENSE.md`. Do not select it for Vue 3, where the README directs developers to `vue3-apexcharts`. Before integration, verify that the required ApexCharts version supports every option and method used by the first chart, then confirm that `LICENSE.md` satisfies the application's licensing requirements.

## FAQ

### How do I install vue-apexcharts in a Vue 2 project?

Install both packages with `npm install --save apexcharts` and `npm install --save vue-apexcharts`. Then register `VueApexCharts` as a Vue plugin and expose it as the `apexchart` component.

### Does vue-apexcharts support Vue 3?

No. The README directs Vue 3.x users to the separate `vue3-apexcharts` project. This package declares Vue `^2.5.17` as its peer dependency.

### Why does my chart update not appear after changing a nested option?

The README says to replace the outermost options object so the Vue watch can catch the change. It specifically advises against assigning only `this.chartOptions.xaxis`.

### When should I call updateSeries() or updateOptions()?

Changing the `series` or `options` props normally updates the chart automatically. The README says to call `updateSeries()` or `updateOptions()` when a forceful update is required.

## Sources

- [apexcharts/vue-apexcharts on GitHub](https://github.com/apexcharts/vue-apexcharts)
- [Issues](https://github.com/apexcharts/vue-apexcharts/issues)
- [Project website](https://apexcharts.com)
- [README](https://github.com/apexcharts/vue-apexcharts/blob/master/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/apexcharts-vue-apexcharts