---
title: "Quick Start"
framework: vue
version: "14.1.0"
---

# Quick Start

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](https://www.ag-grid.com/charts/vue/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

```bash
npm install ag-charts-vue3
```

#### Yarn

```bash
yarn add ag-charts-vue3
```

### Module Install

Register the `AllCommunityModule` to access all Community features:

```js
import { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';

// Enable all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
```

> **Note**
>
> To minimize bundle size, only register the modules you want to use. See the [Modules](https://www.ag-grid.com/charts/vue/module-registry/) page for more information.

### Import the Vue Chart

```html
<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

All configuration is done via the [`options`](https://www.ag-grid.com/charts/options/) object. At a minimum, you need to provide the `data` and `series` properties:

```html
<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

```html
<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.

#### Basic Chart Example

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import { AllCommunityModule, ModuleRegistry } from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

ModuleRegistry.registerModules([AllCommunityModule]);

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    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,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Basic Chart Example](https://www.ag-grid.com/charts/vue3/quick-start/examples/basic-example)

> **Note**
>
> 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:

- [Key Features](https://www.ag-grid.com/charts/vue/key-features/) — Browse an overview of our commonly used features
- [Tutorials](https://www.ag-grid.com/charts/vue/create-a-basic-chart/) — Get started with our step-by-step tutorials
- [Community vs. Enterprise](https://www.ag-grid.com/charts/vue/community-vs-enterprise/) — Understand the differences between each version