TypeScript
Recharts has full support for TypeScript. We ship the type definition directly in the main npm package so you don't need to install any additional packages.
Most components come with strong typing, with one notable exception: data, and dataKeys.
1. Default Usage (everything is <any, any>)
By default, Recharts components fall back to any. This means that if you make a typo in your dataKey or provide the wrong data shape, you won't be warned by TypeScript.
2. Explicit Typing using Generics
This feature is available since Recharts version 3.8.
You can provide explicit types to most graphical components and axes (e.g., <Area<MyDataType, number>>). This enforces that the dataKey actually exists on your data, catching errors early.
Once you do this, your IDE should also autocomplete your dataKeys based on your data shape.
3. Strict Typing with Chart Helpers
This feature is available since Recharts version 3.8.
To perfectly align your layout properties and ensure all your charts, axes, and lines work in harmony, Recharts provides four new chart helper functions:
Once you define the helper with your generic types, all returned components strictly enforce your data structure.