Updated April 19, 2023
Introduction to Vue.js charts
Charts are used to show the data in the forms of visual which makes them look attractive. We have different types of charts available in Vue.js which can be used to show data in visual format. We have different type of chart in Vue like pie, line, bar and many more we can also modify this chart according to requirement. This increases the visibility of the data to user and make statistics easier to understand.
Syntax:
Below is the syntax for using the Vue.js charts this is the syntax given by the Vue.js doc:
mounted () {
this.renderChart(data, options)
}In order to use this we need to import the Chart by the name form Vue-charts library, now we will just see how we can define the chart into our program to make the data visualize.
How do charts work in Vue.js?
As now we know that charts makes our data to look more user friendly and make it easier to understand. It helps to protect our data and all the calculation or we can say an approx. value for the variable in more convenient way. We can use this charts on our dashboard of our application where all the data and statistics of the application are shown. By using this charts we can show day to-day, moth to month as well as year to year data in more under stable form. We can also change the color of the charts, font and make them more interactive by using the various function available in Vue.js chart library.
In order to use the chart library into Vue.js program we need to install some files before using them.
Let’s see the steps which need to be taken in order to use this:
1. Here we are using vue-chart js library we also have so many other options available but for now we are using this. So first step is to install this library we can do this by using npm or yarn.
Open your command prompt and run the below command using npm option, this will install the dependence of vue-chartjs and chart.js as well.
npm install vue-chartjs chart.js2. After this we can import this library into our js file and use their charts available and modify them. In order to import them we need to write one import statement into our file.
Example:
import { your_class_name } from 'vue-chartjs'3. Before this we will include some files into our application these are the .js files which is required to import before even start.
- chart.min.js
- vue-chartjs.min.js
This files can be import by using the script tag and mentioned their path as well by using the src attribute.
Example:
<script src "path of min.js file here ">4. All the different chart available inside the chart.min.js and to make them feasible we have vue-chartjs to use them. We can mention the name of the chart and import them in our js file.
5. It has one function called renderChart where we pass our data and options. So first we import the chart after that we need to extend the chart and mount the chart followed by calling the renderChart method on it. This will show our chart.
Examples of Vue.js charts
Given below are the examples of Vue.js charts:
Example #1
In this example we are creating line chart using the chart,js with Vue.js and trying to show the data of student. Using different function here and also creating the dataset t mount our data on chart.
HTML File Code:
<section>
<div class="demoapp">
<h4>{{ message }}</h4>
<line-chart></line-chart>
</div>
</section>Js File Code:
Vue.component('line-chart', {
extends: VueChartJs.Line,
mounted () {
this.renderChart({
labels: ['Amit', 'Suimt', 'AmBita', 'Vinta', 'Aman', 'Ankit', 'Itisha', 'Latika'],
datasets: [
{
label: 'Set one',
backgroundColor: '#f87979',
data: [5, 8, 2, 15, 30, 15, 30 , 20]
},
{
label: 'Set two',
backgroundColor: '#ccffcc',
data: [10, 5, 20, 15, 30, 25, 40 , 35]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
})
var vm = new Vue({
el: '.demoapp',
data: {
message: 'Line chart in Vue Js'
}
})Output:
Example #2
In this example, we are creating a bar graph using chart.js with Vue.js and trying to show the student data.
HTML File Code:
<section>
<div class="demoapp">
<h4>{{ message }}</h4>
<bar-chart></bar-chart>
</div>
</section>Js File Code:
Vue.component('bar-chart', {
extends: VueChartJs.Bar,
mounted () {
this.renderChart({
labels: ['Amit', 'Suimt', 'AmBita', 'Vinta', 'Aman', 'Ankit', 'Itisha', 'Latika'],
datasets: [
{
label: 'Set one',
backgroundColor: '#f87979',
data: [5, 8, 2, 15, 30, 15, 30 , 20]
},
{
label: 'Set two',
backgroundColor: '#ccffcc',
data: [10, 5, 20, 15, 30, 25, 40 , 35]
},
{
label: 'Set three',
backgroundColor: '#ffb3d1',
data: [10, 5, 20, 15, 30, 25, 40 , 35]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
})
var vm = new Vue({
el: '.demoapp',
data: {
message: 'Bar chart in Vue Js Demo'
}
})Output:
Example #3
In this example we are trying to create pie chart by using the chart.js with vue.js to show the data of student here. Also we have used to dataset object to mount our data into the chart using different colors.
HTML File Code:
<section>
<div class="demoapp">
<h4>{{ message }}</h4>
<pie-chart></pie-chart>
</div>
</section>Js File Code:
Vue.component('pie-chart', {
extends: VueChartJs.Pie,
mounted () {
this.renderChart({
labels: ['Amit', 'Suimt', 'AmBita', 'Vinta', 'Aman', 'Ankit', 'Itisha', 'Latika'],
datasets: [
{
label: 'Set one',
backgroundColor: '#f87979',
data: [5, 8, 2, 15, 30, 15, 30 , 20]
},
{
label: 'Set two',
backgroundColor: '#ccffcc',
data: [10, 5, 20, 15, 30, 25, 40 , 35]
},
{
label: 'Set three',
backgroundColor: '#ffb3d1',
data: [10, 5, 20, 15, 30, 25, 40 , 35]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
})
var vm = new Vue({
el: '.demoapp',
data: {
message: 'Pie chart in Vue Js Demo'
}
})Output:
Conclusion
The chart are used to provide the effective representation of data to the user so that they can easily understand the statistics of data. Moreover this charts are used on the dashboard of application to look it more interactive. They help us to visualize the data easily.
Recommended Articles
This is a guide to Vue.js charts. Here we discuss the introduction, syntax, and working of charts in Vue.js along with examples and code implementation. You may also have a look at the following articles to learn more –
