---
title: "Financial Charts - Overview"
enterprise: true
framework: vue
version: "14.1.0"
---

# Financial Charts - Overview

Build interactive financial charts featuring advanced annotations with minimal configuration.

#### Financial Charts Showcase

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgFinancialCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import { FinancialChartModule, ModuleRegistry } from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const ChartExample = defineComponent({
  template: `
    <ag-financial-charts
      :options="options"
    />
  `,
  components: {
    "ag-financial-charts": AgFinancialCharts,
  },
  setup(props) {
    const options = ref<AgFinancialChartOptions>({
      data: getData(),
      title: { text: "Acme Inc." },
      initialState: {
        annotations: [
          {
            type: "parallel-channel",
            start: {
              x: { __type: "date", value: new Date("2023-10-23").getTime() },
              y: 148.0,
            },
            end: {
              x: { __type: "date", value: new Date("2024-04-12").getTime() },
              y: 207.0,
            },
            height: 14,
          },
          {
            type: "horizontal-line",
            value: 111.0,
            stroke: "#089981",
            axisLabel: {
              fill: "#089981",
            },
          },
          {
            type: "horizontal-line",
            value: 125.0,
            stroke: "#089981",
            axisLabel: {
              fill: "#089981",
            },
            text: {
              label: "Support Level",
              position: "center",
              alignment: "right",
              color: "#089981",
            },
          },
          {
            type: "horizontal-line",
            value: 143.8,
            stroke: "#F23645",
            axisLabel: {
              fill: "#F23645",
            },
          },
          {
            type: "horizontal-line",
            value: 200.8,
            stroke: "#F23645",
            axisLabel: {
              fill: "#F23645",
            },
            text: {
              label: "Resistance",
              position: "center",
              alignment: "left",
              color: "#F23645",
            },
          },
          {
            type: "horizontal-line",
            text: {
              label: "Short-term Support",
              position: "top",
              alignment: "center",
              fontSize: 10,
              color: "#a5a9ac",
            },
            value: 181.03092783505156,
            axisLabel: {
              fill: "#a5a9ac",
            },
            stroke: "#a5a9ac",
            lineStyle: "dotted",
          },
          {
            type: "text",
            text: "Distribution",
            x: {
              __type: "date",
              value: "Thu Feb 22 2024 00:00:00 GMT+0000 (Greenwich Mean Time)",
            },
            y: 207.0103092783505,
          },
          {
            type: "comment",
            text: "Accumulation",
            x: {
              __type: "date",
              value: "Thu Nov 09 2023 00:00:00 GMT+0000 (Greenwich Mean Time)",
            },
            y: 131.7479612248038,
          },
          {
            type: "callout",
            text: "Markup",
            start: {
              x: {
                __type: "date",
                value:
                  "Tue Dec 26 2023 00:00:00 GMT+0000 (Greenwich Mean Time)",
              },
              y: 173.2989690721649,
            },
            end: {
              x: {
                __type: "date",
                value:
                  "Tue Jul 18 2023 01:00:00 GMT+0100 (British Summer Time)",
              },
              y: 167.11340206185565,
            },
          },
          {
            type: "line",
            start: {
              x: {
                __type: "date",
                value:
                  "Tue Oct 25 2022 01:00:00 GMT+0100 (British Summer Time)",
              },
              y: 120.72164948453609,
            },
            end: {
              x: {
                __type: "date",
                value:
                  "Thu May 04 2023 01:00:00 GMT+0100 (British Summer Time)",
              },
              y: 138.96907216494844,
            },
            extendEnd: true,
            strokeWidth: 2,
            lineStyle: "dashed",
          },
        ],
      },
    });

    return {
      options,
    };
  },
});

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

[Live example: Financial Charts Showcase](https://www.ag-grid.com/charts/vue3/financial-charts/examples/financial-charts-showcase)

## Minimal Configuration

Financial Charts come pre-configured with built-in features - just add your data!

```js
template: `<ag-financial-charts:options="options"/>`,
components: {
    'ag-financial-charts': AgFinancialCharts,
},
data() {
    return {
        options: {
            data: getData(),
        },
    };
}
```

> **Note**
>
> This snippet assumes the supplied data includes 'date', 'open', 'high', 'low', 'close' and 'volume' (optional) keys.

For more details see [Financial Charts Configuration](https://www.ag-grid.com/charts/vue/financial-charts-configuration/).

## Drawings and Annotations

Add and manage [Trend Lines](https://www.ag-grid.com/charts/vue/financial-charts-toolbar/#lines) and [Text Annotations](https://www.ag-grid.com/charts/vue/financial-charts-toolbar/#annotations) from the intuitive toolbar for enhanced data analysis.

[Video](https://www.ag-grid.com/charts/_astro/annotations.BsWDdGnG.mp4)

## Interactive Charts

Interactive analysis is enhanced with advanced [Zoom](https://www.ag-grid.com/charts/vue/zoom/) capabilities and [Range Buttons](https://www.ag-grid.com/charts/vue/range-buttons/) for seamless time period navigation.

[Video](https://www.ag-grid.com/charts/_astro/zoom.L6wiVI8N.mp4)

## Financial Chart types

The default chart type is [Candlestick](https://www.ag-grid.com/charts/vue/candlestick-series/), with additional types like [OHLC](https://www.ag-grid.com/charts/vue/ohlc-series/) and [Line](https://www.ag-grid.com/charts/vue/line-series/) available from the [Toolbar](https://www.ag-grid.com/charts/vue/financial-charts-toolbar/#chart-type-selection) for versatile data visualisation.

[Video](https://www.ag-grid.com/charts/_astro/chart-types.ywAOF0mq.mp4)