---
title: "TypeScript Generics"
framework: javascript
version: "14.1.0"
---

# TypeScript Generics

AG Charts leverages TypeScript Generics for chart data and context. This significantly enhances the developer experience through improved code completion and compile-time validation.

## Type <TDatum>

The `TDatum` (default: `any`) generic parameter is used to specify the interface of datums in the data.

#### TDatum Generic Parameter

```ts
import {
  AgChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

type MyDatumType = {
  country: string;
  gdp: number;
  region: "AMER" | "APAC" | "EMEA";
};

function unreachable(_arg: never): never {
  throw new Error();
}
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgChartOptions<MyDatumType> = {
  title: {
    text: "Country GDP by region (in USD)",
  },
  data: [
    { region: "AMER", country: "Brazil", gdp: 2200 },
    { region: "AMER", country: "Canada", gdp: 2000 },
    { region: "AMER", country: "United States", gdp: 25000 },
    { region: "APAC", country: "China", gdp: 17000 },
    { region: "APAC", country: "India", gdp: 3400 },
    { region: "APAC", country: "Japan", gdp: 5000 },
    { region: "EMEA", country: "France", gdp: 3000 },
    { region: "EMEA", country: "Germany", gdp: 4000 },
    { region: "EMEA", country: "South Africa", gdp: 900 },
    { region: "EMEA", country: "United Kingdom", gdp: 3200 },
  ],
  series: [
    {
      type: "bar",
      yKey: "gdp",
      xKey: "country",
      itemStyler: (params) => {
        switch (params.datum.region) {
          case "AMER":
            return { fill: "red" };
          case "APAC":
            return { fill: "blue" };
          case "EMEA":
            return { fill: "green" };
          default:
            unreachable(params.datum.region);
        }
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: TDatum Generic Parameter](https://www.ag-grid.com/charts/typescript/ts-generics/examples/type-tdatum)

```ts
type MyDatumType = {
    country: string;
    gdp: number;
    region: 'AMER' | 'APAC' | 'EMEA';
};

const options: AgChartOptions<MyDatumType> = {
    data: [
        { region: 'AMER', country: 'Brazil', gdp: 2200 },
        { region: 'AMER', country: 'Canada', gdp: 2000 },
        { region: 'AMER', country: 'United States', gdp: 25000 },
        { region: 'APAC', country: 'China', gdp: 17000 },
        { region: 'APAC', country: 'India', gdp: 3400 },
        { region: 'APAC', country: 'Japan', gdp: 5000 },
        { region: 'EMEA', country: 'France', gdp: 3000 },
        { region: 'EMEA', country: 'Germany', gdp: 4000 },
        { region: 'EMEA', country: 'South Africa', gdp: 900 },
        { region: 'EMEA', country: 'United Kingdom', gdp: 3200 },
    ],
    series: [
        {
            type: 'bar',
            yKey: 'gdp',
            xKey: 'country',
            itemStyler: (params) => {
                switch (params.datum.region) {
                    case 'AMER':
                        return { fill: 'red' };
                    case 'APAC':
                        return { fill: 'blue' };
                    case 'EMEA':
                        return { fill: 'green' };
                    default:
                        // (unreachable code)
                        throw new Error();
                }
            },
        },
    ],
    /* ... */
};
```

In this example, specifying the `TDatum = MyDatumType` generic parameter does the following:

- Enables compile-time checks & auto-complete for the elements of the `data[]` property.
- Enforces type-safety for the `series[].xKey` and `series[].yKey`. These properties must be keys of the `MyDatumType` type.
- Automatically infers the type of `params.datum.region` in the `itemStyler` callback.

## Type <TContext>

The `TContext` type (default: `unknown`) generic parameter is used to specify the interface of the `context` properties.

The [Context Object](https://www.ag-grid.com/charts/javascript/context/) is arbitrary user-defined data that will be passed to all callbacks. This is useful for attaching custom state to your chart.

#### TContext Generic Parameter

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AnimationModule,
  CandlestickSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  TimeAxisModule,
} from "ag-charts-enterprise";
import {
  Currency,
  CurrencyConverter,
  makeCurrencyConverter,
} from "./currencyConverter";
import { TradeDatum, getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CandlestickSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  TimeAxisModule,
]);

const options: AgCartesianChartOptions<TradeDatum, CurrencyConverter> = {
  context: makeCurrencyConverter("EUR"),
  title: {
    text: "Stock Prices",
  },
  data: getData(),
  series: [
    {
      type: "candlestick",
      xKey: "date",
      openKey: "open",
      highKey: "high",
      lowKey: "low",
      closeKey: "close",
      tooltip: {
        renderer: ({ datum, context }) => {
          if (context == null) return {};
          return {
            title: datum.date.toDateString(),
            data: [
              {
                label: "Open",
                value: context.formatBothCurrencies(datum.open),
              },
              {
                label: "High",
                value: context.formatBothCurrencies(datum.high),
              },
              { label: "Low", value: context.formatBothCurrencies(datum.low) },
              {
                label: "Close",
                value: context.formatBothCurrencies(datum.close),
              },
            ],
          };
        },
      },
    },
  ],
  axes: {
    x: {
      type: "time",
    },
    y: {
      type: "number",
      label: {
        formatter: ({ value, context }) => {
          return context?.formatUserCurrency(value);
        },
      },
    },
  },
  contextMenu: {
    items: [
      {
        showOn: "series-node",
        label: "Log as USD",
        action: ({ datum, context }) =>
          console.log(context?.formatLog(datum, "USD")),
      },
      {
        showOn: "series-node",
        label: "Log as EUR",
        action: ({ datum, context }) =>
          console.log(context?.formatLog(datum, "EUR")),
      },
      {
        showOn: "series-node",
        label: "Log as GBP",
        action: ({ datum, context }) =>
          console.log(context?.formatLog(datum, "GBP")),
      },
      {
        showOn: "series-node",
        label: "Log as JPY",
        action: ({ datum, context }) =>
          console.log(context?.formatLog(datum, "JPY")),
      },
      {
        showOn: "series-node",
        label: "Log as INR",
        action: ({ datum, context }) =>
          console.log(context?.formatLog(datum, "INR")),
      },
    ],
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function onMySelectChange(value: Currency) {
  options.context = makeCurrencyConverter(value);

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onMySelectChange = onMySelectChange;
}
```

[Live example: TContext Generic Parameter](https://www.ag-grid.com/charts/typescript/ts-generics/examples/type-tcontext)

In this example the `TContext` generic parameter is set to a `CurrencyConverter` object to convert stock prices from USD to a user-defined target currency.

This is used by:

- The Y-axis [Label Formatter](https://www.ag-grid.com/charts/javascript/axes-labels/#formatter), to convert USD values to the preferred User Currency.
- The [Tooltip Renderer](https://www.ag-grid.com/charts/javascript/tooltips/#modifying-content), to render both the stock prices in USD and the User Currency (if applicable).
- The [Context Menu Actions](https://www.ag-grid.com/charts/javascript/context-menu/#custom-actions), to log converted stock prices to the console.