vue-apexcharts

Vue.js wrapper for ApexCharts to build interactive visualizations in vue.

Download and Installation

Installing via npm

Usage

import VueApexCharts from 'vue-apexcharts'

To create a basic bar chart with minimal configuration, write as follows:

<template>
   <div>
     <apexcharts width="500" type="bar" :options="chartOptions" :series="series"></apexcharts>
   </div>
</template>

import VueApexcharts from 'vue-apexcharts'

export default {
    components: {
      apexcharts: VueApexcharts,
    },
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example'
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
          }
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }]
      }
    },
};

This will render the following chart

How do I update the chart?

Simple! Just change the series or any option and it will automatically re-render the chart. Have a loot at the below example

<template>
   <div class="app">
     <apexcharts width="550" type="bar" :options="chartOptions" :series="series"></apexcharts>
     <div>
       <button @click="updateChart">Update!</button>
    </div>
   </div>
   
</template>

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, 45, 50, 49, 60, 70, 81]
        }]
      }
    },
    methods: {
      updateChart() {
        const max = 90;
        const min = 20;
        const newData = this.series[0].data.map(() => {
          return Math.floor(Math.random() * (max - min + 1)) + min
        })

        const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']

        // Make sure to update the whole options config and not just a single property to allow the Vue watch catch the change.
        this.chartOptions = {
          colors: [colors[Math.floor(Math.random()*colors.length)]]
        };
        // In the same way, update the series option
        this.series = [{
          data: newData
        }]
      }
    }
};

How to call methods of ApexCharts programatically?

Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on this.$apexcharts global variable directly

Example

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

More info on the .exec() method can be found here

All other methods of ApexCharts can be called this way

What's included

The repository includes the following files and directories.

vue-apexcharts/
├── dist/
│   └── vue-apexcharts.js
└── src/
    ├── ApexCharts.component.js
    ├── Utils.js
    └── index.js

Development

Install dependencies

npm install

Bundling

npm run build

License

Vue-ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.