Vue ChartsGet Started with AG Charts
AG Charts is a powerful standalone component with no dependencies. The charts factory API can be used to seamlessly create and update data visualizations independently of the grid.
Quick Look Code Example
<template>
<ag-charts-vue :options="options"></ag-charts-vue>
</template>
<script>
import { AgChartsVue } from "ag-charts-vue3";
export default {
name: 'App',
components: {
AgChartsVue,
},
data: function () {
return {
options: {
data: [
{
beverage: 'Coffee',
Q1: 700,
Q2: 600,
Q3: 560,
Q4: 450
},
{
beverage: 'Tea',
Q1: 520,
Q2: 450,
Q3: 380,
Q4: 270
},
{
beverage: 'Milk',
Q1: 200,
Q2: 190,
Q3: 170,
Q4: 180
},
],
title: {
text: 'Beverage Expenses',
},
subtitle: {
text: 'per quarter',
},
footnote: {
text: 'Based on a sample size of 200 respondents',
},
padding: {
top: 40,
right: 40,
bottom: 40,
left: 40,
},
series: [
{ type: 'column', xKey: 'beverage', yKey: 'Q1', stacked: true },
{ type: 'column', xKey: 'beverage', yKey: 'Q2', stacked: true },
{ type: 'column', xKey: 'beverage', yKey: 'Q3', stacked: true },
{ type: 'column', xKey: 'beverage', yKey: 'Q4', stacked: true },
],
legend: { spacing: 40 },
},
};
},
};
</script>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: inherit;
}
</style>Getting Started
In this article we will walk through the necessary steps to add AG Charts to an existing Vue project and produce your first charts.charts.Add AG Charts to Your Project
For the purposes of this tutorial, we are going to scaffold an Vue app with the Vue CLI.
Don't worry if your project has a different configuration. AG Charts and its Vue wrapper are distributed as NPM packages and work with any common Vue project setup.
Let's follow the Vue CLI instructions and run the following in your terminal:
npm install -g @vue/cli
vue create my-projectWhen prompted choose default (babel, eslint):
We're now ready to start our application:
cd my-project
npm run serveIf everything goes well, npm run serve has started the web server. You can open the default app at localhost:8080.
Let's add the AG Charts NPM packages. Run the following command in my-project (you may need a new instance of the terminal):
npm install --save ag-charts-community ag-charts-vue3 vue-property-decoratorAfter a few seconds of waiting, you should be good to go. Let's get to the actual coding! As a first step, let's add the AG Charts module. As this will be a simple example we can delete the src/components directory. Our example application will live in src/App.vue.
Let's add the component definition to our template. Edit src/App.vue and replace the scaffold code:
<template>
<div id="app">
<ag-charts-vue :options="options"></ag-charts-vue>
</div>
</template>Next, let's declare the basic charts configuration. Edit src/App.vue:
<script>
import { AgChartsVue } from 'ag-charts-vue3';
export default {
name: 'App',
components: {
AgChartsVue,)
},
data() {
return {
options: {
data: [
{
quarter: 'Q1',
spending: 700,
},
{
quarter: 'Q2',
spending: 600,
},
{
quarter: 'Q3',
spending: 560,
},
{
quarter: 'Q4',
spending: 450,
},
],
series: [{
xKey: 'quarter',
yKey: 'spending',
}],
},
};
},
};
</script>The series property is an array because it is possible to supply multiple series (including mixed kinds!) into a single chart.
The default axes configuration is a category axis on the bottom and number axis on the left of a chart, both of which are exactly what we need in this case, so we don't need to supply these here.
Legend
By default, the chart displays a legend when there is more than one series present. To enable the legend for a chart with a single series, set legend.enabled to true.
The chart legend uses the yKey for the series, which in this case is 'spending'. This can be renamed using the yName property.
data() {
return {
options: {
data: [
{
quarter: 'Q1',
spending: 700,
},
{
quarter: 'Q2',
spending: 600,
},
{
quarter: 'Q3',
spending: 560,
},
{
quarter: 'Q4',
spending: 450,
},
],
series: [{
xKey: 'quarter',
yKey: 'spending',
+ yName: 'Coffee Spending',
}],
+ legend: {
+ enabled: true,
+ },
},
};
}Basic Column Chart
Now let's try something more interesting. Let's say you want to visualise how much is spent on coffee, milk and tea in your company each quarter and in total. Your data might look something like this:
const data = [
{
beverage: 'Coffee',
Q1: 700,
Q2: 600,
Q3: 560,
Q4: 450
},
{
beverage: 'Tea',
Q1: 520,
Q2: 450,
Q3: 380,
Q4: 270
},
{
beverage: 'Milk',
Q1: 200,
Q2: 190,
Q3: 170,
Q4: 180
},
];data() {
return {
options: {
data: [
{
beverage: 'Coffee',
Q1: 700,
Q2: 600,
Q3: 560,
Q4: 450
},
{
beverage: 'Tea',
Q1: 520,
Q2: 450,
Q3: 380,
Q4: 270
},
{
beverage: 'Milk',
Q1: 200,
Q2: 190,
Q3: 170,
Q4: 180
},
],
series: [
{ type: 'column', xKey: 'beverage', yKey: 'Q1', stacked: true },
{ type: 'column', xKey: 'beverage', yKey: 'Q2', stacked: true },
{ type: 'column', xKey: 'beverage', yKey: 'Q3', stacked: true },
{ type: 'column', xKey: 'beverage', yKey: 'Q4', stacked: true },
],
},
};
}Chart tooltips are enabled by default so you can hover over a block to see its value.
Labels and Titles
We can enhance our chart by providing a label for each block segment. We can set a label's fontSize, fontFamily and other properties, but for now we'll just accept the default values:
data() {
return {
options: {
data: [
{
beverage: 'Coffee',
Q1: 700,
Q2: 600,
Q3: 560,
Q4: 450
},
{
beverage: 'Tea',
Q1: 520,
Q2: 450,
Q3: 380,
Q4: 270
},
{
beverage: 'Milk',
Q1: 200,
Q2: 190,
Q3: 170,
Q4: 180
},
],
series: [
{
type: 'column',
xKey: 'beverage',
yKey: 'Q1',
stacked: true,
+ label: {},
},
{
type: 'column',
xKey: 'beverage',
yKey: 'Q2',
stacked: true,
+ label: {},
},
{
type: 'column',
xKey: 'beverage',
yKey: 'Q3',
stacked: true,
+ label: {},
},
{
type: 'column',
xKey: 'beverage',
yKey: 'Q4',
stacked: true,
+ label: {},
},
],
},
};
}If we then want to add a title and subtitle to the chart, we can simply add this to our chart config:
data() {
return {
options: {
data: [
{
beverage: 'Coffee',
Q1: 700,
Q2: 600,
Q3: 560,
Q4: 450
},
{
beverage: 'Tea',
Q1: 520,
Q2: 450,
Q3: 380,
Q4: 270
},
{
beverage: 'Milk',
Q1: 200,
Q2: 190,
Q3: 170,
Q4: 180
},
],
+ title: {
+ text: 'Beverage Expenses',
+ },
+ subtitle: {
+ text: 'per quarter',
+ },
+ footnote: {
+ text: 'Based on a sample size of 200 respondents',
+ },
series: [
{
type: 'column',
xKey: 'beverage',
yKey: 'Q1',
stacked: true,
label: {},
},
{
type: 'column',
xKey: 'beverage',
yKey: 'Q2',
stacked: true,
label: {},
},
{
type: 'column',
xKey: 'beverage',
yKey: 'Q3',
stacked: true,
label: {},
},
{
type: 'column',
xKey: 'beverage',
yKey: 'Q4',
stacked: true,
label: {},
},
],
},
};
}Now that you've had a taste of what it's like to use AG Charts, we encourage you to explore our documentation to learn more.