ApexCharts Vue.js Tutorial

What is ApexCharts?

ApexCharts offers a great level of interactivity out-of-the-box. It is highly customizable, with responsive design built-in. Additionally, it can work across most javascript libraries without additional work required. It is a newer library and may have a steeper learning curve than other library offerings.

What is Vue.js?

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). It was created by Evan You and is designed to be incrementally adoptable. The core library focuses on the view layer only, making it easy to pick up and integrate with other libraries or existing projects. Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. It has a virtual DOM for faster and more efficient manipulation, composable components, and a relatively low learning curve. It is great for ease-of-use, performance, and overall developer experience.

ApexCharts Vue.js Code Example

ApexCharts is a modern charting library that helps to create beautiful and interactive visualizations for web pages. When integrated with Vue.js, it makes creating reactive and interactive charts a breeze. Below is a basic example of how to use ApexCharts within a Vue.js application.

First, ensure you have ApexCharts and Vue-ApexCharts installed in your project:

npm install apexcharts vue-apexcharts --save

Next, in your Vue component, you need to import ApexCharts and use it as a plugin.


 <div id="app">









import VueApexCharts from 'vue-apexcharts'

export default {

 name: 'ChartExample',

 components: {

   apexchart: VueApexCharts,


 data() {

   return {

     chartOptions: {

       chart: {

         id: 'vuechart-example'


       xaxis: {

         categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997]



     series: [{

       name: 'series-1',

       data: [30, 40, 45, 50, 49, 60, 70, 91]







/* Add any style you want for your chart container */

#app {

 max-width: 650px;

 margin: 35px auto;



This code snippet reveals the basic structure needed to embed an ApexChart into a Vue.js component. Here’s a brief breakdown:

With these steps, you can incorporate a variety of charts into your Vue.js applications using ApexCharts, making your data visually appealing and interactive.

Explo: The Best Javascript Charting Option on the Market

Looking for the fastest, easiest way to make responsive next-level charts on your website? Reach out to Explo, the market leader in creating responsive charts. With Explo's Report Builder and Editable Sections offerings, you can easily drag-and-drop charts and custom reporting in a matter of minutes, all with just SQL and no-code tools. No need to learn and configure charts, use our highly customizable solution instead.