Vue ChartsQuick Start

Add Vue Charts and Vue Graphs to your application in 60 seconds.

Install

Install the AG Charts Vue library:

npm install ag-charts-vue3
yarn add ag-charts-vue3

Create a Vue Chart

Replace your app.vue (or root component) with the following code:

<template>
    <!-- The AG Charts component with chartsOptions as an attribute -->
    <ag-charts :options="options"> </ag-charts>
</template>

<script>
    import { ref } from 'vue';

    import { AgCharts } from 'ag-charts-vue3';

    // Vue Chart Component
    export default {
        name: 'App',
        components: {
            'ag-charts': AgCharts,
        },
        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 Chart

When you run your app, you should see a very simple Vue chart:

Next Steps