AG Charts is a high-performance, canvas-based Vue charting library for building Vue Charts and Vue Graphs with an intuitive API, a wide-range of series types and a rich feature set. Available in Community and Enterprise editions. Visit Community vs. Enterprise to learn more.
Create a Vue Chart
Add Vue Charts to your application in 60 seconds:
NPM Install
Install the AG Charts Vue library:
npm install ag-charts-vue3
yarn add ag-charts-vue3
Import the Vue Chart
<script>
// Vue Chart Component
import { AgCharts } from 'ag-charts-vue3';
export default {
name: 'App',
components: {
'ag-charts': AgCharts,
},
setup() {},
};
</script>
Define Chart Data and Series
<script>
setup() {
// Chart Options
const options = ref<AgChartOptions>({
// 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>
Vue Chart Component
<template>
<!-- The AG Charts component with chartsOptions as an attribute -->
<ag-charts :options="options"> </ag-charts>
</template>
Running the Vue Chart
Below is a live example of the application running. Click </> Code
to see the code.
To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
Next Steps
Now that you have a basic Vue Chart running, choose one of the following options to continue your learning journey: