Search

React ChartsTypeScript 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 <TData> Copy Link

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

 
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: 'pie',
            angleKey: 'gdp',
            legendItemKey: '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();
                }
            },
        },
    ],
    ... /* other options */
};

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> Copy Link

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

The Context Object is arbitrary user-defined data that will be passed to all callbacks. This useful for attaching a custom state to your chart.

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: