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

# Financial Charts - Overview

Build interactive financial charts featuring advanced annotations with minimal configuration.

#### Financial Charts Showcase

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

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

## Minimal Configuration

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

```ts
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [AgFinancialCharts],
    template: `<ag-financial-charts [options]="options"></ag-financial-charts>`,
})
export class AppComponent {
    public options: AgFinancialChartOptions;
    constructor() {
        this.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/angular/financial-charts-configuration/).

## Drawings and Annotations

Add and manage [Trend Lines](https://www.ag-grid.com/charts/angular/financial-charts-toolbar/#lines) and [Text Annotations](https://www.ag-grid.com/charts/angular/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/angular/zoom/) capabilities and [Range Buttons](https://www.ag-grid.com/charts/angular/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/angular/candlestick-series/), with additional types like [OHLC](https://www.ag-grid.com/charts/angular/ohlc-series/) and [Line](https://www.ag-grid.com/charts/angular/line-series/) available from the [Toolbar](https://www.ag-grid.com/charts/angular/financial-charts-toolbar/#chart-type-selection) for versatile data visualisation.

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