Vue ChartsQuick Start

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

Your First Vue Chart

Add AG Charts to your application in these steps:

1. Install

Install the AG Charts Vue library:

npm install ag-charts-vue3

yarn add ag-charts-vue3

2. Import the Vue Chart

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

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

    // Vue Chart Component
    import { AgCharts } from 'ag-charts-vue3';

    export default {
        name: 'App',
        components: {
            'ag-charts': AgCharts,
        },
        setup() {},
    };
</script>

3. Define Chart Data and Series

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

<script>
    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>

4. Vue Chart Component

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

5. Running the Vue Chart

Below is a live example of the application running. Click </> Code to see the code.

Next Steps

• Read our Introductory Tutorial.