Create Vue Charts using a Vue Chart component for ApexCharts

Create Vue Charts using a Vue Chart component for ApexCharts

Vue.js component for ApexCharts - Build Modern Charts. Vue.js wrapper for ApexCharts to build interactive visualizations in vue.

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

Download and Installation

Installing via npm
source-shell
npm install --save apexcharts
npm install --save vue-apexcharts

Usage

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

Vue.component('apexchart', VueApexCharts)

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

text-html-vue
<template>
   <div>
     <apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
   </div>
</template>
source-js
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]
        }]
      }
    },
};

This will render the following chart

This is image title

How do I update the chart?

Simple! Just change the series or any option and it will automatically re-render the chart. Click on the below example to see this in action

This is image title

text-html-vue
<template>
   <div class="app">
     <apexchart width="550" type="bar" :options="chartOptions" :series="series"></apexchart>
     <div>
       <button @click="updateChart">Update!</button>
    </div>
   </div>

</template>
source-js
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
        }]
      }
    }
};

Important: While updating the options, make sure to update the outermost property even when you need to update the nested property.

✅ Do this

source-js
this.chartOptions = {...this.chartOptions, ...{
    xaxis: {
        labels: {
           style: {
             colors: ['red']
           }
        }
    }
}}

❌ Not this

source-js
this.chartOptions.xaxis = {
    labels: {
        style: {
          colors: ['red']
        }
    }
}}

Props

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

Methods

You don't actually need to call updateSeries() or updateOptions() manually. Changing the props will automatically update the chart. You only need to call these methods to update the chart forcefully.

Method Description
updateSeries Allows you to update the series array overriding the existing one
updateOptions Allows you to update the configuration object
toggleSeries Allows you to toggle the visibility of series programatically. Useful when you have custom legend.
appendData Allows you to append new data to the series array.
addText The addText() method can be used to draw text after chart is rendered.
addXaxisAnnotation Draw x-axis annotations after chart is rendered.
addYaxisAnnotation Draw y-axis annotations after chart is rendered.
addPointAnnotation Draw point (xy) annotations after chart is rendered.

How to call the methods mentioned above?

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

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

How to call methods of ApexCharts without referencing the chart element?

Sometimes, you may want to call methods of the core ApexCharts library from some other place, and you can do so on this.$apexcharts global variable directly. You need to target the chart by chart.id while calling this method

Example

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

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

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

All other methods of ApexCharts can be called the same 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

Running the examples

Basic Examples are included to show how to get started using ApexCharts with Vue easily.

To run the examples,

source-shell
cd example
npm install
npm run serve

Development

Install dependencies

source-shell
npm install

Bundling

source-shell
npm run build

Github

apexcharts/vue-apexcharts

vuejs javascript Chart vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Build HTML5 Canvas Charts Using Vue.js And Chart.js

Just another Vue.js wrapper for the Chart.js that lets you create HTML5 charts using canvas.Supports chart types: line, bar, donut, pie, and radar.

Learn How to Build Various Types of Charts using Vue.js

In this VueJS tutorial, learn how to build various types of charts using vue-chartjs, vue-plotley, and vue-apexcharts with Vue.js. Learn how to create stunning data visuals using chart engines vue-chartjs, vue-plotley, and vue-apexcharts with Vue.js.

Vue.js wrapper for Chart.js

Vue.js Chart.Js Wrapper To Create Reuseable Charts .vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.

18 Best Chart Libraries To Visualize Data In Vue.js App

18 Best Chart Libraries To Visualize Data In Vue.js App .A vue2 component to display tree chart .x-chart is a draggable & resizable data visualization system .Simple, elegant spark bars for Vue.js .Create beautiful JavaScript charts with one line of Vue