Create charts in Vue.Js with ApexCharts.js
Data visualization and analysis are best achieved with charts. Depending on the type and size of data to be presented, there are various types of charts suitable for different occasions: ranging from line, bar, pie, doughnut, candlestick, radar, area, e.t.c.
A picture is worth a thousand words.
Fred R. Barnard.
Charts help the human brain to understand data more easily and quickly than texts. A properly represented chart increases the chances of your audience retaining information and could generally be more appealing.
In this article, you will learn how to create eye-catching charts with the help of ApexCharts and vue-apexcharts plugins in your Vue app. It is interesting to know that with these packages, you can create charts in 3 simple steps. In this article, I’ll demonstrate two chart types: a pie chart and a line chart. To follow along, all you need is a running Vue project. With that out of the way, let’s get right into it.
Step 1. Install ApexCharts and vue-apexcharts
ApexCharts is an amazing chart library, with about 16 different chart options to choose from. It is a free, modern library that comes with loads of configurable options out of the box to create the perfect chart.
To install the packages, copy and paste the following command into the terminal.
npm install apexcharts vue-apexcharts --saveStep 2. Import the packages
After installing, the next step is to import and register the packages in your Vue project. Navigate to the main.js file inside the src directory, and paste the following code blocks;
import VueApexCharts from "vue-apexcharts";Vue.use(VueApexCharts);
Vue.component("apexchart", VueApexCharts);
This makes VueApexCharts available for use in your project and then extracts the package into a component called “apexchart”.
Step 3. Create chart
We are now ready to create our first simple chart. As I earlier mentioned, there are about 16 different types of charts available to you.
Pie chart
In the components directory, create a file called PieChart.vue and add the code below to the template. Here, we use the apexchart component registered earlier in main.js. VueApexCharts creates charts from data passed into the component as props.
Quick note: I added a center-chart class to centralize the pie chart.
<style scoped>.center-chart {
display: flex;
align-items: center;
justify-content: center;
}</style>
In the script section of PieChart.vue, add the following code snippet
So basically, the two major parts of the script section are the chartOptions and series. These objects are passed into the apexchart tag in the template. chartOptions is where the appearance of the chart is configured, while series is the data array. You may have single or multiple data series depending on the nature of the chart.
There are loads of configurable options and to learn more about them, check out the official documentation.
The final bit is to import PieChart.vue into App.vue where it will be rendered.
After running the project (npm run serve), you should see something like the image below in your browser. And there you have your pie chart. Whoop whoop!
Line chart
Because we registered VueApexCharts globally, whenever you need to create a chart, all you need to do is add the <apexchart></apexchart> tag to your template and pass the type, options, and series as props.
Just like with the pie chart, we defined the chart appearance in the chartOptions and then call a method (generateDayWiseTimeSeries())to generate random data (the x and y-axis). You should have something like this in your browser.
There is more information about the available types of charts with ApexCharts here. I hope you found this article useful.
