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

# Financial Charts - Overview

Build interactive financial charts featuring advanced annotations with minimal configuration.

#### Financial Charts Showcase

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgFinancialCharts } from "ag-charts-react";
import {
  AgFinancialChartOptions,
  FinancialChartModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([FinancialChartModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<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 <AgFinancialCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

## Minimal Configuration

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

```jsx
const [options, setOptions] = useState({
    data: getData(),
});

return <AgFinancialCharts options={options} />;
```

> **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/react/financial-charts-configuration/).

## Drawings and Annotations

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

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