vue-apexcharts Documentation

The chart automatically re-renders when the series or options props change.

Important: When updating nested properties within the options object, you must replace the entire options object (or the outermost property being changed) to ensure Vue's reactivity system detects the change. Do not attempt to mutate a nested property directly.

// ✅ Do this: Replace the whole object to trigger Vue watch
this.chartOptions = {
  ...this.chartOptions,
  xaxis: {
    labels: {
       style: {
         colors: ['red']
       }
    }
  }
}

// ❌ Not this: Direct mutation of nested property will not trigger update
this.chartOptions.xaxis = {
    labels: {
      style: {
        colors: ['red']
      }
    }
}

To use the component, import VueApexCharts and register it globally using Vue.use() or by registering it as a component.

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

Vue.component('apexchart', VueApexCharts)

To use vue-apexcharts, you must install both the core apexcharts library and the vue-apexcharts wrapper.

Note: If you are using Vue 3.x.x, use vue3-apexcharts instead.

npm install --save apexcharts
npm install --save vue-apexcharts

Create a chart by using the <apexchart> component. You must provide type, series, and options props. You can also specify width and height.

<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>

If you need to call ApexCharts methods from outside the component context (without using a ref), you can use the global this.$apexcharts.exec() method. You must target the specific chart instance using its chart.id.

// Syntax: this.$apexcharts.exec(chartId, methodName, params)
this.$apexcharts.exec('vuechart-example', 'updateSeries', [{
  data: [40, 55, 65, 11, 23, 44, 54, 33]
}])

The following props are available on the <apexchart> component:

| Prop        | Type           | Description  |
| ------------- |-------------| -----|
| **series***| Array | The series is an array which accepts an object in the following format. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website. |
| **type*** | String  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`, `candlestick`  |
| **width** | Number/String  | Possible values for width can be `100%` or `400px` or `400` |
| **height** | Number/String | Possible values for height can be `100%` or `300px` or `300` |
| **options** | Object | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |