If you want your new chart type to be statically typed, you must provide a `.d.ts` TypeScript declaration file. Chart.js provides a way to augment built-in types with user-defined ones, by using the concept of "declaration merging".
-There are three main declarations that can be augmented when adding a new chart type:
-
-* `ChartTypeEnum` enumeration must contain an entry for the new type.
-* `IChartTypeRegistry` must contains the declarations for the new type, either by extending an existing entry in `IChartTypeRegistry` or by creating a new one.
+When adding a new chart type, `IChartTypeRegistry` must contains the declarations for the new type, either by extending an existing entry in `IChartTypeRegistry` or by creating a new one.
For example, to provide typings for a new chart type that extends from a bubble chart, you would add a `.d.ts` containing:
import { IChartTypeRegistry } from 'chart.js'
declare module 'chart.js' {
- enum ChartTypeEnum {
- derivedBubble = 'derivedBubble'
- }
-
interface IChartTypeRegistry {
derivedBubble: IChartTypeRegistry['bubble']
}
| { canvas: HTMLCanvasElement | OffscreenCanvas }
| ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement | OffscreenCanvas>;
-export enum UpdateModeEnum {
+export declare enum UpdateModeEnum {
resize = 'resize',
reset = 'reset',
none = 'none',
export type DistributiveArray<T> = T extends unknown ? T[] : never
-export enum ScaleTypeEnum {
- linear = 'linear',
- logarithmic = 'logarithmic',
- category = 'category',
- radialLinear = 'radialLinear',
- time = 'time',
- timeseries = 'timeseries',
-}
-
-export type IScaleType = keyof typeof ScaleTypeEnum;
-
export interface ICartesianScaleTypeRegistry {
linear: {
options: ILinearScaleOptions;
export interface IScaleTypeRegistry extends ICartesianScaleTypeRegistry, IRadialScaleTypeRegistry {
}
-export enum ChartTypeEnum {
- bar = 'bar',
- bubble = 'bubble',
- doughnut = 'doughnut',
- line = 'line',
- pie = 'pie',
- polarArea = 'polarArea',
- radar = 'radar',
- scatter = 'scatter',
-}
-
-export type IChartType = keyof typeof ChartTypeEnum;
+export type IScaleType = keyof IScaleTypeRegistry;
export interface IChartTypeRegistry {
bar: {
};
}
+export type IChartType = keyof IChartTypeRegistry;
+
export type IScaleOptions<SCALES extends IScaleType = IScaleType> = DeepPartial<
{ [key in IScaleType]: { type: key } & IScaleTypeRegistry[key]['options'] }[SCALES]
>;