Create a chart with AG Charts in 60 seconds.
Install
Install the AG Charts library:
npm install ag-charts-vue3
yarn add ag-charts-vue3
Create
Replace your app.vue
(or root component) with the following code:
<template>
<!-- The AG Charts component with chartsOptions as an attribute -->
<ag-charts-vue :options="options"> </ag-charts-vue>
</template>
<script>
import { ref } from 'vue';
import { AgChartsVue } from 'ag-charts-vue3';
// Core Charts Logic
export default {
name: 'App',
components: {
AgChartsVue,
},
setup() {
// Chart Options
const options = ref({
// Data: Data to be displayed in the chart
data: [
{ month: 'Jan', avgTemp: 2.3, iceCreamSales: 162000 },
{ month: 'Mar', avgTemp: 6.3, iceCreamSales: 302000 },
{ month: 'May', avgTemp: 16.2, iceCreamSales: 800000 },
{ month: 'Jul', avgTemp: 22.8, iceCreamSales: 1254000 },
{ month: 'Sep', avgTemp: 14.5, iceCreamSales: 950000 },
{ month: 'Nov', avgTemp: 8.9, iceCreamSales: 200000 },
],
// Series: Defines which chart type and data to use
series: [{ type: 'bar', xKey: 'month', yKey: 'iceCreamSales' }],
});
return {
options,
};
},
};
</script>
Example
When you run your app, you should see a basic chart: