Vue ChartsQuick Start
vue logo

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:

Next Steps