chart.js

chart.js

Version 4.5.0
Published 2 months ago
6.17 MB
1 dependency
MIT license

Install

npm i chart.js

yarn add chart.js

pnpm add chart.js

Overview

Simple HTML5 charts using the canvas element.

Index

Variables

variable animator

const animator: Animator;

variable BarController

const BarController: ChartComponent & {
    new (chart: Chart, datasetIndex: number): BarController;
    prototype: BarController;
};

variable BarElement

const BarElement: ChartComponent & {
    new (cfg: AnyObject): BarElement;
    prototype: BarElement;
};

variable BubbleController

const BubbleController: ChartComponent & {
    new (chart: Chart, datasetIndex: number): BubbleController;
    prototype: BubbleController;
};

variable CategoryScale

const CategoryScale: ChartComponent & {
    new <O extends CategoryScaleOptions = CategoryScaleOptions>(
        cfg: AnyObject
    ): CategoryScale<O>;
    prototype: CategoryScale;
};

variable Colors

const Colors: {
    id: string;
    defaults: ColorsPluginOptions;
    beforeLayout(chart: Chart, _args: any, options: ColorsPluginOptions): void;
};

variable Decimation

const Decimation: Plugin<keyof ChartTypeRegistry, AnyObject>;

variable defaults

const defaults: Defaults;

variable DoughnutController

const DoughnutController: ChartComponent & {
    new (chart: Chart, datasetIndex: number): DoughnutController;
    prototype: DoughnutController;
};

variable Filler

const Filler: Plugin<keyof ChartTypeRegistry, AnyObject>;

variable Interaction

const Interaction: {
    modes: InteractionModeMap;
    evaluateInteractionItems(
        chart: Chart,
        axis: InteractionAxis,
        position: Point,
        handler: (
            element: Element & VisualElement,
            datasetIndex: number,
            index: number
        ) => void,
        intersect?: boolean
    ): InteractionItem[];
};

variable layouts

const layouts: {
    addBox(chart: Chart, item: LayoutItem): void;
    removeBox(chart: Chart, layoutItem: LayoutItem): void;
    configure(
        chart: Chart,
        item: LayoutItem,
        options: { fullSize?: number; position?: LayoutPosition; weight?: number }
    ): void;
    update(chart: Chart, width: number, height: number): void;
};

variable Legend

const Legend: Plugin<keyof ChartTypeRegistry, AnyObject>;

variable LinearScale

const LinearScale: ChartComponent & {
    new <O extends LinearScaleOptions = LinearScaleOptions>(
        cfg: AnyObject
    ): LinearScale<O>;
    prototype: LinearScale;
};

variable LineController

const LineController: ChartComponent & {
    new (chart: Chart, datasetIndex: number): LineController;
    prototype: LineController;
};

variable LineElement

const LineElement: ChartComponent & {
    new (cfg: AnyObject): LineElement;
    prototype: LineElement;
};

variable LogarithmicScale

const LogarithmicScale: ChartComponent & {
    new <O extends LogarithmicScaleOptions = LogarithmicScaleOptions>(
        cfg: AnyObject
    ): LogarithmicScale<O>;
    prototype: LogarithmicScale;
};

variable PieController

const PieController: ChartComponent & {
    new (chart: Chart, datasetIndex: number): PieController;
    prototype: PieController;
};

variable PolarAreaController

const PolarAreaController: ChartComponent & {
    new (chart: Chart, datasetIndex: number): PolarAreaController;
    prototype: PolarAreaController;
};

variable RadarController

const RadarController: ChartComponent & {
    new (chart: Chart, datasetIndex: number): RadarController;
    prototype: RadarController;
};

variable RadialLinearScale

const RadialLinearScale: ChartComponent & {
    new <O extends RadialLinearScaleOptions = RadialLinearScaleOptions>(
        cfg: AnyObject
    ): RadialLinearScale<O>;
    prototype: RadialLinearScale;
};

variable registerables

const registerables: readonly ChartComponentLike[];

variable registry

const registry: Registry;

variable ScatterController

const ScatterController: ChartComponent & {
    new (chart: Chart, datasetIndex: number): ScatterController;
    prototype: ScatterController;
};

variable SubTitle

const SubTitle: Plugin<keyof ChartTypeRegistry, AnyObject>;

variable Ticks

const Ticks: {
    formatters: {
        values(value: unknown): string | string[];
        numeric(
            this: Scale,
            tickValue: number,
            index: number,
            ticks: { value: number }[]
        ): string;
        logarithmic(
            this: Scale,
            tickValue: number,
            index: number,
            ticks: { value: number }[]
        ): string;
    };
};

variable TimeScale

const TimeScale: ChartComponent & {
    new <O extends TimeScaleOptions = TimeScaleOptions>(
        cfg: AnyObject
    ): TimeScale<O>;
    prototype: TimeScale;
};

variable TimeSeriesScale

const TimeSeriesScale: ChartComponent & {
    new <O extends TimeScaleOptions = TimeScaleOptions>(
        cfg: AnyObject
    ): TimeSeriesScale<O>;
    prototype: TimeSeriesScale;
};

variable Title

const Title: Plugin<keyof ChartTypeRegistry, AnyObject>;

const Tooltip: Tooltip;

Classes

class Animation

class Animation {}

constructor

constructor(cfg: AnyObject, target: AnyObject, prop: string, to?: {});

method active

active: () => boolean;

method cancel

cancel: () => void;

method tick

tick: (date: number) => void;

method update

update: (cfg: AnyObject, to: unknown, date: number) => void;

class Animations

class Animations {}

constructor

constructor(
    chart: Chart<
        keyof ChartTypeRegistry,
        (number | [number, number] | Point | BubbleDataPoint)[],
        unknown
    >,
    animations: AnyObject
);

method configure

configure: (animations: AnyObject) => void;

method update

update: (target: AnyObject, values: AnyObject) => undefined | boolean;

class Animator

class Animator {}

method add

add: (chart: Chart, items: readonly Animation[]) => void;

method has

has: (chart: Chart) => boolean;

method listen

listen: (
    chart: Chart,
    event: 'complete' | 'progress',
    cb: (event: AnimationEvent) => void
) => void;

method remove

remove: (chart: Chart) => boolean;

method running

running: (chart: Chart) => boolean;

method start

start: (chart: Chart) => void;

method stop

stop: (chart: Chart) => void;

class ArcElement

class ArcElement extends Element<ArcProps, ArcOptions> {}

constructor

constructor(cfg: any);

property circumference

circumference: number;

property defaultRoutes

static defaultRoutes: { backgroundColor: string };

property defaults

static defaults: {
    borderAlign: string;
    borderColor: string;
    borderDash: any[];
    borderDashOffset: number;
    borderJoinStyle: any;
    borderRadius: number;
    borderWidth: number;
    offset: number;
    spacing: number;
    angle: any;
    circular: boolean;
    selfJoin: boolean;
};

property descriptors

static descriptors: { _scriptable: boolean; _indexable: (name: any) => boolean };

property endAngle

endAngle: number;

property fullCircles

fullCircles: number;

property id

static id: string;

property innerRadius

innerRadius: number;

property outerRadius

outerRadius: number;

property pixelMargin

pixelMargin: number;

property startAngle

startAngle: number;

method draw

draw: (ctx: CanvasRenderingContext2D) => void;

method getCenterPoint

getCenterPoint: (useFinalPosition: boolean) => { x: number; y: number };

method inRange

inRange: (chartX: number, chartY: number, useFinalPosition: boolean) => boolean;

method tooltipPosition

tooltipPosition: (useFinalPosition: boolean) => { x: number; y: number };

class BasePlatform

class BasePlatform {}

method acquireContext

acquireContext: (
    canvas: HTMLCanvasElement,
    options?: CanvasRenderingContext2DSettings
) => CanvasRenderingContext2D | null;

Called at chart construction time, returns a context2d instance implementing the [W3C Canvas 2D Context API standard]https://www.w3.org/TR/2dcontext/.
Parameter canvas
The canvas from which to acquire context (platform specific)
Parameter options
The chart options

method addEventListener

addEventListener: (
    chart: Chart,
    type: string,
    listener: (e: ChartEvent) => void
) => void;

Registers the specified listener on the given chart.
Parameter chart
Chart from which to listen for event
Parameter type
The (ChartEvent) type to listen for
Parameter listener
Receives a notification (an object that implements the ChartEvent interface) when an event of the specified type occurs.

method getDevicePixelRatio

getDevicePixelRatio: () => number;

Returns
{number} the current devicePixelRatio of the device this platform is connected to.

method getMaximumSize

getMaximumSize: (
    canvas: HTMLCanvasElement,
    width?: number,
    height?: number,
    aspectRatio?: number
) => { width: number; height: number };

Parameter canvas
The canvas for which to calculate the maximum size
Parameter width
Parent element's content width
Parameter height
Parent element's content height
Parameter aspectRatio
The aspect ratio to maintain
Returns
{ width: number, height: number } the maximum size available.

method isAttached

isAttached: (canvas: HTMLCanvasElement) => boolean;

Parameter canvas
Returns
{boolean} true if the canvas is attached to the platform, false if not.

method releaseContext

releaseContext: (context: CanvasRenderingContext2D) => boolean;

Called at chart destruction time, releases any resources associated to the context previously returned by the acquireContext() method.
Parameter context
The context2d instance
Returns
{boolean} true if the method succeeded, else false

method removeEventListener

removeEventListener: (
    chart: Chart,
    type: string,
    listener: (e: ChartEvent) => void
) => void;

Removes the specified listener previously registered with addEventListener.
Parameter chart
Chart from which to remove the listener
Parameter type
The (ChartEvent) type to remove
Parameter listener
The listener function to remove from the event target.

method updateConfig

updateConfig: (
    config: ChartConfiguration | ChartConfigurationCustomTypesPerDataset
) => void;

Updates config with platform specific requirements
Parameter config

class BasicPlatform

class BasicPlatform extends BasePlatform {}

class Chart

class Chart<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown
> {}

constructor

constructor(
    item: ChartItem,
    config:
        | ChartConfiguration<TType, TData, TLabel>
        | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>
);

property aspectRatio

readonly aspectRatio: number;

property attached

readonly attached: boolean;

property boxes

readonly boxes: LayoutItem[];

property canvas

readonly canvas: HTMLCanvasElement;

property chartArea

readonly chartArea: ChartArea;

property config

readonly config:
    | ChartConfiguration<TType, TData, TLabel>
    | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>;

property ctx

readonly ctx: CanvasRenderingContext2D;

property currentDevicePixelRatio

readonly currentDevicePixelRatio: number;

property data

data: ChartData<TType, TData, TLabel>;

property defaults

static readonly defaults: Defaults;

property height

readonly height: number;

property id

readonly id: string;

property instances

static readonly instances: {
    [key: string]: Chart<
        keyof ChartTypeRegistry,
        (number | [number, number] | Point | BubbleDataPoint)[],
        unknown
    >;
};

property legend

readonly legend?: LegendElement<TType>;

property options

options:
    | (CoreChartOptions<TType> &
          ElementChartOptions<TType> &
          PluginChartOptions<TType> &
          DatasetChartOptions<TType> &
          ScaleChartOptions<TType>)
    | (Function &
          CoreChartOptions<TType> &
          ElementChartOptions<TType> &
          PluginChartOptions<TType> &
          DatasetChartOptions<TType> &
          ScaleChartOptions<TType>)
    | _DeepPartialObject<
          CoreChartOptions<TType> &
              ElementChartOptions<TType> &
              PluginChartOptions<TType> &
              DatasetChartOptions<TType> &
              ScaleChartOptions<TType>
      >;

property overrides

static readonly overrides: Overrides;

property platform

readonly platform: BasePlatform;

property registry

static readonly registry: Registry;

property scales

readonly scales: { [key: string]: Scale<CoreScaleOptions> };

property tooltip

readonly tooltip?: TooltipModel<TType>;

property version

static readonly version: string;

property width

readonly width: number;

method bindEvents

bindEvents: () => void;

method buildOrUpdateControllers

buildOrUpdateControllers: () => void;

method buildOrUpdateScales

buildOrUpdateScales: () => void;

method clear

clear: () => this;

method destroy

destroy: () => void;

method draw

draw: () => void;

method ensureScalesHaveIDs

ensureScalesHaveIDs: () => void;

method getActiveElements

getActiveElements: () => ActiveElement[];

method getChart

static getChart: (
    key: string | CanvasRenderingContext2D | HTMLCanvasElement
) => Chart | undefined;

method getContext

getContext: () => { chart: Chart; type: string };

method getDatasetMeta

getDatasetMeta: (datasetIndex: number) => ChartMeta;

method getDataVisibility

getDataVisibility: (index: number) => boolean;

method getElementsAtEventForMode

getElementsAtEventForMode: (
    e: Event,
    mode: string,
    options: InteractionOptions,
    useFinalPosition: boolean
) => InteractionItem[];

method getSortedVisibleDatasetMetas

getSortedVisibleDatasetMetas: () => ChartMeta[];

method getVisibleDatasetCount

getVisibleDatasetCount: () => number;

method hide

hide: (datasetIndex: number, dataIndex?: number) => void;

method isDatasetVisible

isDatasetVisible: (datasetIndex: number) => boolean;

method isPluginEnabled

isPluginEnabled: (pluginId: string) => boolean;

method isPointInArea

isPointInArea: (point: Point) => boolean;

method notifyPlugins

notifyPlugins: (hook: string, args?: AnyObject) => boolean | void;

method register

static register: (...items: ChartComponentLike[]) => void;

method render

render: () => void;

method reset

reset: () => void;

method resize

resize: (width?: number, height?: number) => void;

method setActiveElements

setActiveElements: (active: ActiveDataPoint[]) => void;

method setDatasetVisibility

setDatasetVisibility: (datasetIndex: number, visible: boolean) => void;

method show

show: (datasetIndex: number, dataIndex?: number) => void;

method stop

stop: () => this;

method toBase64Image

toBase64Image: (type?: string, quality?: unknown) => string;

method toggleDataVisibility

toggleDataVisibility: (index: number) => void;

method unbindEvents

unbindEvents: () => void;

method unregister

static unregister: (...items: ChartComponentLike[]) => void;

method update

update: (
    mode?:
        | 'resize'
        | 'reset'
        | 'none'
        | 'hide'
        | 'show'
        | 'default'
        | 'active'
        | ((ctx: { datasetIndex: number }) => UpdateMode)
) => void;

method updateHoverStyle

updateHoverStyle: (
    items: InteractionItem[],
    mode: 'dataset',
    enabled: boolean
) => void;

class DatasetController

class DatasetController<
    TType extends ChartType = ChartType,
    TElement extends Element = Element,
    TDatasetElement extends Element = Element,
    TParsedData = ParsedDataType<TType>
> {}

constructor

constructor(
    chart: Chart<
        keyof ChartTypeRegistry,
        (number | [number, number] | Point | BubbleDataPoint)[],
        unknown
    >,
    datasetIndex: number
);

property chart

readonly chart: Chart<
    keyof ChartTypeRegistry,
    (number | [number, number] | Point | BubbleDataPoint)[],
    unknown
>;

property enableOptionSharing

enableOptionSharing: boolean;

property index

readonly index: number;

property supportsDecimation

supportsDecimation: boolean;

method addElements

addElements: () => void;

method applyStack

protected applyStack: (scale: Scale, parsed: unknown[]) => number;

method buildOrUpdateElements

buildOrUpdateElements: (resetNewElements?: boolean) => void;

method configure

configure: () => void;

method draw

draw: () => void;

method getAllParsedValues

getAllParsedValues: (scale: Scale) => number[];

method getDataset

getDataset: () => ChartDataset;

method getLabelAndValue

protected getLabelAndValue: (index: number) => { label: string; value: string };

method getMaxOverflow

protected getMaxOverflow: () => boolean | number;

method getMeta

getMeta: () => ChartMeta<TType, TElement, TDatasetElement>;

method getMinMax

protected getMinMax: (
    scale: Scale,
    canStack?: boolean
) => { min: number; max: number };

method getParsed

protected getParsed: (index: number) => TParsedData;

method getScaleForId

getScaleForId: (scaleID: string) => Scale | undefined;

method getSharedOptions

protected getSharedOptions: (options: AnyObject) => undefined | AnyObject;

Utility for checking if the options are shared and should be animated separately.

method getStyle

getStyle: (index: number, active: boolean) => AnyObject;

method includeOptions

protected includeOptions: (
    mode: UpdateMode,
    sharedOptions: AnyObject
) => boolean;

Utility for determining if options should be included in the updated properties

method initialize

initialize: () => void;

method linkScales

linkScales: () => void;

method parse

parse: (start: number, count: number) => void;

method parseArrayData

protected parseArrayData: (
    meta: ChartMeta<TType, TElement, TDatasetElement>,
    data: AnyObject[],
    start: number,
    count: number
) => AnyObject[];

method parseObjectData

protected parseObjectData: (
    meta: ChartMeta<TType, TElement, TDatasetElement>,
    data: AnyObject[],
    start: number,
    count: number
) => AnyObject[];

method parsePrimitiveData

protected parsePrimitiveData: (
    meta: ChartMeta<TType, TElement, TDatasetElement>,
    data: AnyObject[],
    start: number,
    count: number
) => AnyObject[];

method removeHoverStyle

removeHoverStyle: (
    element: TElement,
    datasetIndex: number,
    index: number
) => void;

method reset

reset: () => void;

method resolveDataElementOptions

protected resolveDataElementOptions: (
    index: number,
    mode: UpdateMode
) => AnyObject;

method resolveDatasetElementOptions

protected resolveDatasetElementOptions: (mode: UpdateMode) => AnyObject;

method setHoverStyle

setHoverStyle: (element: TElement, datasetIndex: number, index: number) => void;

method update

update: (mode: UpdateMode) => void;

method updateElement

protected updateElement: (
    element: TElement | TDatasetElement,
    index: number | undefined,
    properties: AnyObject,
    mode: UpdateMode
) => void;

Utility for updating an element with new properties, using animations when appropriate.

method updateElements

updateElements: (
    elements: TElement[],
    start: number,
    count: number,
    mode: UpdateMode
) => void;

method updateIndex

updateIndex: (datasetIndex: number) => void;

method updateRangeFromParsed

protected updateRangeFromParsed: (
    range: { min: number; max: number },
    scale: Scale,
    parsed: unknown[],
    stack: boolean | string
) => void;

method updateSharedOptions

protected updateSharedOptions: (
    sharedOptions: AnyObject,
    mode: UpdateMode,
    newOptions: AnyObject
) => void;

Utility to animate the shared options, that are potentially affecting multiple elements.

class DomPlatform

class DomPlatform extends BasePlatform {}

class Element

class Element<T = AnyObject, O = AnyObject> {}

property $animations

$animations: Record<keyof T, Animation>;

property active

active: boolean;

property defaultRoutes

static defaultRoutes: any;

property defaults

static defaults: {};

property options

options: {};

property x

x: number;

property y

y: number;

method getProps

getProps: {
    <P extends (keyof T)[]>(props: P, final?: boolean): Pick<T, P[number]>;
    <P extends string>(props: P[], final?: boolean): Partial<Record<P, unknown>>;
};

Gets the current or final value of each prop. Can return extra properties (whole object).
Parameter props
properties to get
Parameter final
get the final value (animation target)

method hasValue

hasValue: () => boolean;

method tooltipPosition

tooltipPosition: (useFinalPosition: boolean) => Point;

class PointElement

class PointElement extends Element<PointProps, PointOptions & PointHoverOptions> {}

constructor

constructor(cfg: any);

property defaultRoutes

static defaultRoutes: { backgroundColor: string; borderColor: string };

{any}

property defaults

static defaults: {
    borderWidth: number;
    hitRadius: number;
    hoverBorderWidth: number;
    hoverRadius: number;
    pointStyle: string;
    radius: number;
    rotation: number;
};

{any}

property id

static id: string;

property parsed

parsed: CartesianParsedData;

property skip

skip?: boolean;

property stop

stop?: boolean;

method draw

draw: (ctx: CanvasRenderingContext2D, area: ChartArea) => void;

method getCenterPoint

getCenterPoint: (useFinalPosition?: boolean) => { x: number; y: number };

method getRange

getRange: () => any;

method inRange

inRange: (mouseX: number, mouseY: number, useFinalPosition?: boolean) => boolean;

method inXRange

inXRange: (mouseX: number, useFinalPosition?: boolean) => boolean;

method inYRange

inYRange: (mouseY: number, useFinalPosition?: boolean) => boolean;

method size

size: (options?: Partial<PointOptions & PointHoverOptions>) => number;

class Scale

class Scale {}

constructor

constructor(cfg: {
    id: string;
    type: string;
    ctx: CanvasRenderingContext2D;
    chart: Chart;
});

Interfaces

interface ActiveDataPoint

interface ActiveDataPoint {}

property datasetIndex

datasetIndex: number;

property index

index: number;

interface ActiveElement

interface ActiveElement extends ActiveDataPoint {}

property element

element: Element;

interface AnimationEvent

interface AnimationEvent {}

property chart

chart: Chart;

property currentStep

currentStep: number;

property initial

initial: boolean;

property numSteps

numSteps: number;

interface ArcBorderRadius

interface ArcBorderRadius {}

property innerEnd

innerEnd: number;

property innerStart

innerStart: number;

property outerEnd

outerEnd: number;

property outerStart

outerStart: number;

interface ArcHoverOptions

interface ArcHoverOptions extends CommonHoverOptions {}

property hoverBorderDash

hoverBorderDash: number[];

property hoverBorderDashOffset

hoverBorderDashOffset: number;

property hoverOffset

hoverOffset: number;

interface ArcOptions

interface ArcOptions extends CommonElementOptions {}

property borderAlign

borderAlign: 'center' | 'inner';

Arc stroke alignment.

property borderDash

borderDash: number[];

Line dash. See MDN. []

property borderDashOffset

borderDashOffset: number;

Line dash offset. See MDN. 0.0

property borderJoinStyle

borderJoinStyle: CanvasLineJoin;

Line join style. See MDN. Default is 'round' when borderAlign is 'inner', else 'bevel'.

property borderRadius

borderRadius: number | ArcBorderRadius;

Sets the border radius for arcs 0

property circular

circular: boolean;

If false, Arc will be flat. true

property offset

offset: number;

Arc offset (in pixels).

property selfJoin

selfJoin: boolean;

If true, Arc can take up 100% of a circular graph without any visual split or cut. This option doesn't support borderRadius and borderJoinStyle miter true

property spacing

spacing: number;

Spacing between arcs

interface ArcProps

interface ArcProps extends Point {}

property circumference

circumference: number;

property endAngle

endAngle: number;

property innerRadius

innerRadius: number;

property outerRadius

outerRadius: number;

property startAngle

startAngle: number;

interface BackdropOptions

interface BackdropOptions {}

property color

color: Scriptable<Color, ScriptableScaleContext>;

Color of label backdrops.

property height

height: number;

Height of backdrop in pixels

property left

left: number;

Left position of backdrop as pixel

property top

top: number;

Top position of backdrop as pixel

property width

width: number;

Width of backdrop in pixels

interface BarControllerChartOptions

interface BarControllerChartOptions {}

property skipNull

skipNull?: boolean;

Should null or undefined values be omitted from drawing

interface BarControllerDatasetOptions

interface BarControllerDatasetOptions
    extends ControllerDatasetOptions,
        ScriptableAndArrayOptions<BarOptions, ScriptableContext<'bar'>>,
        ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'bar'>>,
        AnimationOptions<'bar'> {}

property barPercentage

barPercentage: number;

Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. 0.9

property barThickness

barThickness: number | 'flex';

Manually set width of each bar in pixels. If set to 'flex', it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval.

property categoryPercentage

categoryPercentage: number;

Percent (0-1) of the available width each category should be within the sample width. 0.8

property grouped

grouped: boolean;

Should the bars be grouped on index axis true

property maxBarThickness

maxBarThickness: number;

Set this to ensure that bars are not sized thicker than this.

property minBarLength

minBarLength: number;

Set this to ensure that bars have a minimum length in pixels.

property pointStyle

pointStyle: PointStyle;

Point style for the legend 'circle;

property xAxisID

xAxisID: string;

The ID of the x axis to plot this dataset on.

property yAxisID

yAxisID: string;

The ID of the y axis to plot this dataset on.

interface BarElement

interface BarElement<
    T extends BarProps = BarProps,
    O extends BarOptions = BarOptions
> extends Element<T, O>,
        VisualElement {}

interface BarHoverOptions

interface BarHoverOptions extends CommonHoverOptions {}

property hoverBorderRadius

hoverBorderRadius: number | BorderRadius;

interface BarOptions

interface BarOptions extends Omit<CommonElementOptions, 'borderWidth'> {}

property base

base: number;

The base value for the bar in data units along the value axis.

property borderRadius

borderRadius: number | BorderRadius;

Border radius 0

property borderSkipped

borderSkipped:
    | 'start'
    | 'end'
    | 'left'
    | 'right'
    | 'bottom'
    | 'top'
    | 'middle'
    | boolean;

Skipped (excluded) border: 'start', 'end', 'left', 'right', 'bottom', 'top', 'middle', false (none) or true (all). 'start'

property borderWidth

borderWidth:
    | number
    | { top?: number; right?: number; bottom?: number; left?: number };

Width of the border, number for all sides, object to specify width for each side specifically 0

property inflateAmount

inflateAmount: number | 'auto';

Amount to inflate the rectangle(s). This can be used to hide artifacts between bars. Unit is pixels. 'auto' translates to 0.33 pixels when barPercentage * categoryPercentage is 1, else 0. 'auto'

interface BarParsedData

interface BarParsedData extends CartesianParsedData {}

interface BarProps

interface BarProps extends Point {}

property base

base: number;

property height

height: number;

property horizontal

horizontal: boolean;

property width

width: number;

interface BorderOptions

interface BorderOptions {}

property color

color: Color;

property dash

dash: Scriptable<number[], ScriptableScaleContext>;

[]

property dashOffset

dashOffset: Scriptable<number, ScriptableScaleContext>;

property display

display: boolean;

true

property width

width: number;

property z

z: number;

interface BorderRadius

interface BorderRadius {}

property bottomLeft

bottomLeft: number;

property bottomRight

bottomRight: number;

property topLeft

topLeft: number;

property topRight

topRight: number;

interface BubbleControllerDatasetOptions

interface BubbleControllerDatasetOptions
    extends ControllerDatasetOptions,
        ScriptableAndArrayOptions<PointOptions, ScriptableContext<'bubble'>>,
        ScriptableAndArrayOptions<PointHoverOptions, ScriptableContext<'bubble'>> {}

property xAxisID

xAxisID: string;

The ID of the x axis to plot this dataset on.

property yAxisID

yAxisID: string;

The ID of the y axis to plot this dataset on.

interface BubbleDataPoint

interface BubbleDataPoint extends Point {}

property r

r?: number;

Bubble radius in pixels (not scaled).

interface BubbleParsedData

interface BubbleParsedData extends CartesianParsedData {}

interface CanvasFontSpec

interface CanvasFontSpec extends FontSpec {}

property string

string: string;

interface CartesianParsedData

interface CartesianParsedData extends Point {}

interface CartesianScaleOptions

interface CartesianScaleOptions extends CoreScaleOptions {}

property axis

axis: 'x' | 'y' | 'r';

Which type of axis this is. Possible values are: 'x', 'y', 'r'. If not set, this is inferred from the first character of the ID which should be 'x', 'y' or 'r'.

property border

border: BorderOptions;

property bounds

bounds: 'ticks' | 'data';

Scale boundary strategy (bypassed by min/max time options) - data: make sure data are fully visible, ticks outside are removed - ticks: make sure ticks are fully visible, data outside are truncated 2.7.0 'ticks'

property grid

grid: Partial<GridLineOptions>;

property max

max: number;

User defined maximum value for the scale, overrides maximum value from data.

property min

min: number;

User defined minimum value for the scale, overrides minimum value from data.

property offset

offset: boolean;

If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to true for a bar chart by default. false

property position

position:
    | 'left'
    | 'top'
    | 'right'
    | 'bottom'
    | 'center'
    | { [scale: string]: number };

Position of the axis.

property stack

stack?: string;

Stack group. Axes at the same position with same stack are stacked.

property stacked

stacked?: boolean | 'single';

If true, data will be comprised between datasets of data false

property stackWeight

stackWeight?: number;

Weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group. 1

property ticks

ticks: CartesianTickOptions;

property title

title: {
    /** If true, displays the axis title. */
    display: boolean;
    /** Alignment of the axis title. */
    align: Align;
    /** The text for the title, e.g. "# of People" or "Response Choices". */
    text: string | string[];
    /** Color of the axis label. */
    color: Color;
    /** Information about the axis title font. */
    font: ScriptableAndScriptableOptions<
        Partial<FontSpec>,
        ScriptableCartesianScaleContext
    >;
    /** Padding to apply around scale labels. */
    padding:
        | number
        | {
              /** Padding on the (relative) top side of this axis label. */
              top: number;
              /** Padding on the (relative) bottom side of this axis label. */
              bottom: number;
              /** This is a shorthand for defining top/bottom to the same values. */
              y: number;
          };
};

Options for the scale title.

interface CartesianScaleTypeRegistry

interface CartesianScaleTypeRegistry {}

property category

category: {
    options: CategoryScaleOptions;
};

property linear

linear: {
    options: LinearScaleOptions;
};

property logarithmic

logarithmic: {
    options: LogarithmicScaleOptions;
};

property time

time: {
    options: TimeScaleOptions;
};

property timeseries

timeseries: {
    options: TimeScaleOptions;
};

interface ChartArea

interface ChartArea {}

property bottom

bottom: number;

property height

height: number;

property left

left: number;

property right

right: number;

property top

top: number;

property width

width: number;

interface ChartComponent

interface ChartComponent {}

property defaultRoutes

defaultRoutes?: { [property: string]: string };

property defaults

defaults?: AnyObject;

property id

id: string;

method afterRegister

afterRegister: () => void;

method afterUnregister

afterUnregister: () => void;

method beforeRegister

beforeRegister: () => void;

method beforeUnregister

beforeUnregister: () => void;

interface ChartConfiguration

interface ChartConfiguration<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown
> {}

property data

data: ChartData<TType, TData, TLabel>;

property options

options?: ChartOptions<TType> | undefined;

property platform

platform?: typeof BasePlatform;

property plugins

plugins?: Plugin<TType>[];

property type

type: TType;

interface ChartConfigurationCustomTypesPerDataset

interface ChartConfigurationCustomTypesPerDataset<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown
> {}

property data

data: ChartDataCustomTypesPerDataset<TType, TData, TLabel>;

property options

options?: ChartOptions<TType> | undefined;

property plugins

plugins?: Plugin<TType>[];

interface ChartData

interface ChartData<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown
> {}

TData represents the data point type. If unspecified, a default is provided based on the chart type. TLabel represents the label type

property datasets

datasets: ChartDataset<TType, TData>[];

property labels

labels?: TLabel[];

property xLabels

xLabels?: TLabel[];

property yLabels

yLabels?: TLabel[];

interface ChartDataCustomTypesPerDataset

interface ChartDataCustomTypesPerDataset<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown
> {}

property datasets

datasets: ChartDatasetCustomTypesPerDataset<TType, TData>[];

property labels

labels?: TLabel[];

property xLabels

xLabels?: TLabel[];

property yLabels

yLabels?: TLabel[];

interface ChartDatasetProperties

interface ChartDatasetProperties<TType extends ChartType, TData> {}

property data

data: TData;

property type

type?: TType;

interface ChartDatasetPropertiesCustomTypesPerDataset

interface ChartDatasetPropertiesCustomTypesPerDataset<
    TType extends ChartType,
    TData
> {}

property data

data: TData;

property type

type: TType;

interface ChartEvent

interface ChartEvent {}

property native

native: Event | null;

property type

type:
    | 'contextmenu'
    | 'mouseenter'
    | 'mousedown'
    | 'mousemove'
    | 'mouseup'
    | 'mouseout'
    | 'click'
    | 'dblclick'
    | 'keydown'
    | 'keypress'
    | 'keyup'
    | 'resize';

property x

x: number | null;

property y

y: number | null;

interface ChartTypeRegistry

interface ChartTypeRegistry {}

property bar

bar: {
    chartOptions: BarControllerChartOptions;
    datasetOptions: BarControllerDatasetOptions;
    defaultDataPoint: number | [number, number] | null;
    metaExtensions: {};
    parsedDataType: BarParsedData;
    scales: keyof CartesianScaleTypeRegistry;
};

property bubble

bubble: {
    chartOptions: unknown;
    datasetOptions: BubbleControllerDatasetOptions;
    defaultDataPoint: BubbleDataPoint;
    metaExtensions: {};
    parsedDataType: BubbleParsedData;
    scales: keyof CartesianScaleTypeRegistry;
};

property doughnut

doughnut: {
    chartOptions: DoughnutControllerChartOptions;
    datasetOptions: DoughnutControllerDatasetOptions;
    defaultDataPoint: DoughnutDataPoint;
    metaExtensions: DoughnutMetaExtensions;
    parsedDataType: number;
    scales: keyof CartesianScaleTypeRegistry;
};

property line

line: {
    chartOptions: LineControllerChartOptions;
    datasetOptions: LineControllerDatasetOptions &
        FillerControllerDatasetOptions;
    defaultDataPoint: ScatterDataPoint | number | null;
    metaExtensions: {};
    parsedDataType: CartesianParsedData;
    scales: keyof CartesianScaleTypeRegistry;
};

property pie

pie: {
    chartOptions: PieControllerChartOptions;
    datasetOptions: PieControllerDatasetOptions;
    defaultDataPoint: PieDataPoint;
    metaExtensions: PieMetaExtensions;
    parsedDataType: number;
    scales: keyof CartesianScaleTypeRegistry;
};

property polarArea

polarArea: {
    chartOptions: PolarAreaControllerChartOptions;
    datasetOptions: PolarAreaControllerDatasetOptions;
    defaultDataPoint: number;
    metaExtensions: {};
    parsedDataType: RadialParsedData;
    scales: keyof RadialScaleTypeRegistry;
};

property radar

radar: {
    chartOptions: RadarControllerChartOptions;
    datasetOptions: RadarControllerDatasetOptions &
        FillerControllerDatasetOptions;
    defaultDataPoint: number | null;
    metaExtensions: {};
    parsedDataType: RadialParsedData;
    scales: keyof RadialScaleTypeRegistry;
};

property scatter

scatter: {
    chartOptions: ScatterControllerChartOptions;
    datasetOptions: ScatterControllerDatasetOptions;
    defaultDataPoint: ScatterDataPoint | number | null;
    metaExtensions: {};
    parsedDataType: CartesianParsedData;
    scales: keyof CartesianScaleTypeRegistry;
};

interface CommonElementOptions

interface CommonElementOptions {}

property backgroundColor

backgroundColor: Color;

property borderColor

borderColor: Color;

property borderWidth

borderWidth: number;

interface CommonHoverOptions

interface CommonHoverOptions {}

property hoverBackgroundColor

hoverBackgroundColor: Color;

property hoverBorderColor

hoverBorderColor: Color;

property hoverBorderWidth

hoverBorderWidth: number;

interface ComplexFillTarget

interface ComplexFillTarget {}

property above

above: Color;

If no color is set, the default color will be the background color of the chart.

property below

below: Color;

Same as the above.

property target

target: FillTarget;

The accepted values are the same as the filling mode values, so you may use absolute and relative dataset indexes and/or boundaries.

interface ControllerDatasetOptions

interface ControllerDatasetOptions extends ParsingOptions {}

property clip

clip: number | ChartArea | false;

How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}

property hidden

hidden: boolean;

Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. false

property indexAxis

indexAxis: 'x' | 'y';

The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. 'x'

property label

label: string;

The label for the dataset which appears in the legend and tooltips.

property order

order: number;

The drawing order of dataset. Also affects order for stacking, tooltip and legend.

property stack

stack: string;

The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack).

interface CoreChartOptions

interface CoreChartOptions<TType extends ChartType>
    extends ParsingOptions,
        AnimationOptions<TType> {}

property aspectRatio

aspectRatio: number;

Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style. 2

property backgroundColor

backgroundColor: ScriptableAndArray<Color, ScriptableContext<TType>>;

base background color
See Also
- Defaults.backgroundColor

property borderColor

borderColor: ScriptableAndArray<Color, ScriptableContext<TType>>;

base border color
See Also
- Defaults.borderColor

property clip

clip: number | ChartArea | false;

How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}

property color

color: Scriptable<Color, ScriptableContext<TType>>;

base color
See Also
- Defaults.color

property datasets

datasets: {
    [key in ChartType]: ChartTypeRegistry[key]['datasetOptions'];
};

property devicePixelRatio

devicePixelRatio: number;

Override the window's default devicePixelRatio. window.devicePixelRatio

property events

events: (keyof HTMLElementEventMap)[];

The events option defines the browser events that the chart should listen to for tooltips and hovering. ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']

property font

font: Partial<FontSpec>;

base font
See Also
- Defaults.font

property hover

hover: CoreInteractionOptions;

property hoverBackgroundColor

hoverBackgroundColor: ScriptableAndArray<Color, ScriptableContext<TType>>;

base hover background color
See Also
- Defaults.hoverBackgroundColor

property hoverBorderColor

hoverBorderColor: ScriptableAndArray<Color, ScriptableContext<TType>>;

base hover border color
See Also
- Defaults.hoverBorderColor

property indexAxis

indexAxis: 'x' | 'y';

The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. 'x'

property interaction

interaction: CoreInteractionOptions;

property layout

layout: Partial<{
    autoPadding: boolean;
    padding: Scriptable<Padding, ScriptableContext<TType>>;
}>;

property locale

locale: string;

Locale used for number formatting (using Intl.NumberFormat). user's browser setting

property maintainAspectRatio

maintainAspectRatio: boolean;

Maintain the original canvas aspect ratio (width / height) when resizing. For this option to work properly the chart must be in its own dedicated container. true

property resizeDelay

resizeDelay: number;

Delay the resize update by give amount of milliseconds. This can ease the resize process by debouncing update of the elements. 0

property responsive

responsive: boolean;

Resizes the chart canvas when its container does (important note...). true

method onClick

onClick: (event: ChartEvent, elements: ActiveElement[], chart: Chart) => void;

Called if the event is of type 'mouseup' or 'click'. Passed the event, an array of active elements, and the chart.

method onHover

onHover: (event: ChartEvent, elements: ActiveElement[], chart: Chart) => void;

Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart.

method onResize

onResize: (chart: Chart, size: { width: number; height: number }) => void;

Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.

interface CoreInteractionOptions

interface CoreInteractionOptions {}

property axis

axis: InteractionAxis;

Defines which directions are used in calculating distances. Defaults to 'x' for 'index' mode and 'xy' in dataset and 'nearest' modes.

property includeInvisible

includeInvisible: boolean;

if true, the invisible points that are outside of the chart area will also be included when evaluating interactions. false

property intersect

intersect: boolean;

if true, the hover mode only applies when the mouse position intersects an item on the chart. true

property mode

mode: InteractionMode;

Sets which elements appear in the tooltip. See Interaction Modes for details. 'nearest'

interface CoreScaleOptions

interface CoreScaleOptions {}

property alignToPixels

alignToPixels: boolean;

Align pixel values to device pixels

property backgroundColor

backgroundColor: Color;

Background color of the scale area.

property clip

clip: boolean;

Clip the dataset drawing against the size of the scale instead of chart area. true

property display

display: boolean | 'auto';

Controls the axis global visibility (visible when true, hidden when false). When display: 'auto', the axis is visible only if at least one associated dataset is visible. true

property max

max: unknown;

User defined maximum value for the scale, overrides maximum value from data.

property min

min: unknown;

User defined minimum value for the scale, overrides minimum value from data.

property reverse

reverse: boolean;

Reverse the scale. false

property suggestedMax

suggestedMax: unknown;

Adjustment used when calculating the minimum data value.

property suggestedMin

suggestedMin: unknown;

Adjustment used when calculating the maximum data value.

property weight

weight: number;

The weight used to sort the axis. Higher weights are further away from the chart area. true

method afterBuildTicks

afterBuildTicks: (axis: Scale) => void;

Callback that runs after ticks are created. Useful for filtering ticks.

method afterCalculateLabelRotation

afterCalculateLabelRotation: (axis: Scale) => void;

Callback that runs after tick rotation is determined.

method afterDataLimits

afterDataLimits: (axis: Scale) => void;

Callback that runs after data limits are determined.

method afterFit

afterFit: (axis: Scale) => void;

Callback that runs after the scale fits to the canvas.

method afterSetDimensions

afterSetDimensions: (axis: Scale) => void;

Callback that runs after dimensions are set.

method afterTickToLabelConversion

afterTickToLabelConversion: (axis: Scale) => void;

Callback that runs after ticks are converted into strings.

method afterUpdate

afterUpdate: (axis: Scale) => void;

Callback that runs at the end of the update process.

method beforeBuildTicks

beforeBuildTicks: (axis: Scale) => void;

Callback that runs before ticks are created.

method beforeCalculateLabelRotation

beforeCalculateLabelRotation: (axis: Scale) => void;

Callback that runs before tick rotation is determined.

method beforeDataLimits

beforeDataLimits: (axis: Scale) => void;

Callback that runs before data limits are determined.

method beforeFit

beforeFit: (axis: Scale) => void;

Callback that runs before the scale fits to the canvas.

method beforeSetDimensions

beforeSetDimensions: (axis: Scale) => void;

Callback that runs before dimensions are set.

method beforeTickToLabelConversion

beforeTickToLabelConversion: (axis: Scale) => void;

Callback that runs before ticks are converted into strings.

method beforeUpdate

beforeUpdate: (axis: Scale) => void;

Callback called before the update process starts.

interface DatasetControllerChartComponent

interface DatasetControllerChartComponent extends ChartComponent {}

property defaults

defaults: {
    datasetElementType?: string | null | false;
    dataElementType?: string | null | false;
};

interface DateAdapter

interface DateAdapter<T extends AnyObject = AnyObject> {}

property options

readonly options: T;

method add

add: (
    this: DateAdapter<T>,
    timestamp: number,
    amount: number,
    unit: TimeUnit
) => number;

Adds the specified amount of unit to the given timestamp.
Parameter timestamp
the input timestamp
Parameter amount
the amount to add
Parameter unit
the unit as string

method diff

diff: (this: DateAdapter<T>, a: number, b: number, unit: TimeUnit) => number;

Returns the number of unit between the given timestamps.
Parameter a
the input timestamp (reference)
Parameter b
the timestamp to subtract
Parameter unit
the unit as string

method endOf

endOf: (this: DateAdapter<T>, timestamp: number, unit: TimeUnit) => number;

Returns end of unit for the given timestamp.
Parameter timestamp
the input timestamp
Parameter unit
the unit as string

method format

format: (this: DateAdapter<T>, timestamp: number, format: string) => string;

Returns the formatted date in the specified format for a given timestamp.
Parameter timestamp
the timestamp to format
Parameter format
the date/time token

method formats

formats: (this: DateAdapter<T>) => Record<TimeUnit | 'datetime', string>;

Returns a map of time formats for the supported formatting units defined in Unit as well as 'datetime' representing a detailed date/time string.

method init

init: (this: DateAdapter<T>, chartOptions: ChartOptions) => void;

Will called with chart options after adapter creation.

method parse

parse: (this: DateAdapter<T>, value: unknown, format?: string) => number | null;

Parses the given value and return the associated timestamp.
Parameter value
the value to parse (usually comes from the data)
Parameter format
the expected data format

method startOf

startOf: (
    this: DateAdapter<T>,
    timestamp: number,
    unit: TimeUnit | 'isoWeek',
    weekday?: number | boolean
) => number;

Returns start of unit for the given timestamp.
Parameter timestamp
the input timestamp
Parameter unit
the unit as string
Parameter weekday
the ISO day of the week with 1 being Monday and 7 being Sunday (only needed if param *unit* is isoWeek).

interface Defaults

interface Defaults
    extends CoreChartOptions<ChartType>,
        ElementChartOptions<ChartType>,
        PluginChartOptions<ChartType> {}

property scale

scale: ScaleOptionsByType;

property scales

scales: {
    [key in ScaleType]: ScaleOptionsByType<key>;
};

method describe

describe: (scope: string, values: AnyObject) => AnyObject;

method get

get: (scope: string) => AnyObject;

method override

override: (scope: string, values: AnyObject) => AnyObject;

method route

route: (
    scope: string,
    name: string,
    targetScope: string,
    targetName: string
) => void;

Routes the named defaults to fallback to another scope/name. This routing is useful when those target values, like defaults.color, are changed runtime. If the values would be copied, the runtime change would not take effect. By routing, the fallback is evaluated at each access, so its always up to date.
Example:
defaults.route('elements.arc', 'backgroundColor', '', 'color') - reads the backgroundColor from defaults.color when undefined locally
Parameter scope
Scope this route applies to.
Parameter name
Property name that should be routed to different namespace when not defined here.
Parameter targetScope
The namespace where those properties should be routed to. Empty string ('') is the root of defaults.
Parameter targetName
The target name in the target scope the property should be routed to.

method set

set: {
    (values: AnyObject): AnyObject;
    (scope: string, values: AnyObject): AnyObject;
};

interface DoughnutAnimationOptions

interface DoughnutAnimationOptions extends AnimationSpec<'doughnut'> {}

property animateRotate

animateRotate: boolean;

If true, the chart will animate in with a rotation animation. This property is in the options.animation object. true

property animateScale

animateScale: boolean;

If true, will animate scaling the chart from the center outwards. false

interface DoughnutController

interface DoughnutController extends DatasetController {}

property innerRadius

readonly innerRadius: number;

property offsetX

readonly offsetX: number;

property offsetY

readonly offsetY: number;

property outerRadius

readonly outerRadius: number;

method calculateCircumference

calculateCircumference: (value: number) => number;

method calculateTotal

calculateTotal: () => number;

interface DoughnutControllerChartOptions

interface DoughnutControllerChartOptions {}

property animation

animation: false | DoughnutAnimationOptions;

property circumference

circumference: number;

Sweep to allow arcs to cover. 360

property cutout

cutout: Scriptable<number | string, ScriptableContext<'doughnut'>>;

The portion of the chart that is cut out of the middle. ('50%' - for doughnut, 0 - for pie) String ending with '%' means percentage, number means pixels. 50

property offset

offset: number | number[];

Arc offset (in pixels).

property radius

radius: Scriptable<number | string, ScriptableContext<'doughnut'>>;

The outer radius of the chart. String ending with '%' means percentage of maximum radius, number means pixels. '100%'

property rotation

rotation: number;

Starting angle to draw arcs from. 0

property spacing

spacing: number;

Spacing between the arcs 0

interface DoughnutControllerDatasetOptions

interface DoughnutControllerDatasetOptions
    extends ControllerDatasetOptions,
        ScriptableAndArrayOptions<ArcOptions, ScriptableContext<'doughnut'>>,
        ScriptableAndArrayOptions<ArcHoverOptions, ScriptableContext<'doughnut'>>,
        AnimationOptions<'doughnut'> {}

property circumference

circumference: number;

Sweep to allow arcs to cover. 360

property offset

offset: number | number[];

Arc offset (in pixels).

property rotation

rotation: number;

Starting angle to draw this dataset from. 0

property spacing

spacing: number;

Similar to the offset option, but applies to all arcs. This can be used to to add spaces between arcs 0

property weight

weight: number;

The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values. 1

interface DoughnutMetaExtensions

interface DoughnutMetaExtensions {}

property total

total: number;

interface ElementOptionsByType

interface ElementOptionsByType<TType extends ChartType> {}

property arc

arc: ScriptableAndArrayOptions<
    ArcOptions & ArcHoverOptions,
    ScriptableContext<TType>
>;

property bar

bar: ScriptableAndArrayOptions<
    BarOptions & BarHoverOptions,
    ScriptableContext<TType>
>;

property line

line: ScriptableAndArrayOptions<
    LineOptions & LineHoverOptions,
    ScriptableContext<TType>
>;

property point

point: ScriptableAndArrayOptions<
    PointOptions & PointHoverOptions,
    ScriptableContext<TType>
>;

interface ExtendedPlugin

interface ExtendedPlugin<
    TType extends ChartType,
    O = AnyObject,
    Model = TooltipModel<TType>
> {}

method afterTooltipDraw

afterTooltipDraw: (chart: Chart, args: { tooltip: Model }, options: O) => void;

Called after drawing the tooltip. Note that this hook will not be called if the tooltip drawing has been previously cancelled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{Tooltip} args.tooltip - The tooltip.
Parameter options
The plugin options.

method beforeTooltipDraw

beforeTooltipDraw: (
    chart: Chart,
    args: { tooltip: Model; cancelable: true },
    options: O
) => boolean | void;

Called before drawing the tooltip. If any plugin returns false, the tooltip drawing is cancelled until another render is triggered.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{Tooltip} args.tooltip - The tooltip.
Parameter options
The plugin options.
Returns
{boolean} false to cancel the chart tooltip drawing.

interface FillerControllerDatasetOptions

interface FillerControllerDatasetOptions {}

property fill

fill: FillTarget | ComplexFillTarget;

Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end

interface FillerOptions

interface FillerOptions {}

property drawTime

drawTime: 'beforeDraw' | 'beforeDatasetDraw' | 'beforeDatasetsDraw';

property propagate

propagate: boolean;

interface FontSpec

interface FontSpec {}

property family

family: string;

Default font family for all text, follows CSS font-family options. "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

property lineHeight

lineHeight: number | string;

Height of an individual line of text (see MDN). 1.2

property size

size: number;

Default font size (in px) for text. Does not apply to radialLinear scale point labels. 12

property style

style: 'normal' | 'italic' | 'oblique' | 'initial' | 'inherit';

Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit) 'normal'

property weight

weight: 'normal' | 'bold' | 'lighter' | 'bolder' | number | null;

Default font weight (boldness). (see MDN).

interface GridLineOptions

interface GridLineOptions {}

property circular

circular: boolean;

false

property color

color: ScriptableAndArray<Color, ScriptableScaleContext>;

'rgba(0, 0, 0, 0.1)'

property display

display: boolean;

true

property drawOnChartArea

drawOnChartArea: boolean;

true

property drawTicks

drawTicks: boolean;

true

property lineWidth

lineWidth: ScriptableAndArray<number, ScriptableScaleContext>;

property offset

offset: boolean;

false

property tickBorderDash

tickBorderDash: Scriptable<number[], ScriptableScaleContext>;

[]

property tickBorderDashOffset

tickBorderDashOffset: Scriptable<number, ScriptableScaleContext>;

property tickColor

tickColor: ScriptableAndArray<Color, ScriptableScaleContext>;

'rgba(0, 0, 0, 0.1)'

property tickLength

tickLength: number;

property tickWidth

tickWidth: number;

property z

z: number;

interface InteractionItem

interface InteractionItem {}

property datasetIndex

datasetIndex: number;

property element

element: Element;

property index

index: number;

interface InteractionModeMap

interface InteractionModeMap {}

property dataset

dataset: InteractionModeFunction;

Returns items in the same dataset. If the options.intersect parameter is true, we only return items if we intersect something If the options.intersect is false, we find the nearest item and return the items in that dataset

property index

index: InteractionModeFunction;

Returns items at the same index. If the options.intersect parameter is true, we only return items if we intersect something If the options.intersect mode is false, we find the nearest item and return the items at the same index as that item

property nearest

nearest: InteractionModeFunction;

nearest mode returns the element closest to the point

property point

point: InteractionModeFunction;

Point mode returns all elements that hit test based on the event position of the event

property x

x: InteractionModeFunction;

x mode returns the elements that hit-test at the current x coordinate

property y

y: InteractionModeFunction;

y mode returns the elements that hit-test at the current y coordinate

interface InteractionOptions

interface InteractionOptions {}

property axis

axis?: string;

property includeInvisible

includeInvisible?: boolean;

property intersect

intersect?: boolean;

interface LabelItem

interface LabelItem {}

property font

font: CanvasFontSpec;

property label

label: string | string[];

property options

options: RenderTextOpts;

property textOffset

textOffset: number;

interface LayoutItem

interface LayoutItem {}

property bottom

bottom: number;

Bottom edge of the item. Set by layout system and cannot be used in update

property fullSize

fullSize: boolean;

if true, and the item is horizontal, then push vertical boxes down

property height

height: number;

Height of item. Must be valid after update()

property left

left: number;

Left edge of the item. Set by layout system and cannot be used in update

property position

position: LayoutPosition;

The position of the item in the chart layout. Possible values are

property right

right: number;

Right edge of the item. Set by layout system and cannot be used in update

property top

top: number;

Top edge of the item. Set by layout system and cannot be used in update

property weight

weight: number;

The weight used to sort the item. Higher weights are further away from the chart area

property width

width: number;

Width of item. Must be valid after update()

method beforeLayout

beforeLayout: () => void;

Called before the layout process starts

method draw

draw: (chartArea: ChartArea) => void;

Draws the element

method getPadding

getPadding: () => ChartArea;

Returns an object with padding on the edges

method isHorizontal

isHorizontal: () => boolean;

returns true if the layout item is horizontal (ie. top or bottom)

method update

update: (width: number, height: number, margins?: ChartArea) => void;

Takes two parameters: width and height.
Parameter width
Parameter height

interface LegendElement

interface LegendElement<TType extends ChartType>
    extends Element<AnyObject, LegendOptions<TType>>,
        LayoutItem {}

property chart

chart: Chart<TType>;

property ctx

ctx: CanvasRenderingContext2D;

property legendItems

legendItems?: LegendItem[];

property options

options: LegendOptions<TType>;

method fit

fit: () => void;

interface LegendItem

interface LegendItem {}

property borderRadius

borderRadius?: number | BorderRadius;

Border radius of the legend box 3.1.0

property datasetIndex

datasetIndex?: number;

Index of the associated dataset

property fillStyle

fillStyle?: Color;

Fill style of the legend box

property fontColor

fontColor?: Color;

Font color for the text Defaults to LegendOptions.labels.color

property hidden

hidden?: boolean;

If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect

property index

index?: number;

Index the associated label in the labels array

property lineCap

lineCap?: CanvasLineCap;

For box border.
See Also
- https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap

property lineDash

lineDash?: number[];

For box border.
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash

property lineDashOffset

lineDashOffset?: number;

For box border.
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset

property lineJoin

lineJoin?: CanvasLineJoin;

For box border.
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin

property lineWidth

lineWidth?: number;

Width of box border

property pointStyle

pointStyle?: PointStyle;

Point style of the legend box (only used if usePointStyle is true)

property rotation

rotation?: number;

Rotation of the point in degrees (only used if usePointStyle is true)

property strokeStyle

strokeStyle?: Color;

Stroke style of the legend box

property text

text: string;

Label that will be displayed

property textAlign

textAlign?: TextAlign;

Text alignment

interface LegendOptions

interface LegendOptions<TType extends ChartType> {}

property align

align: Align;

Alignment of the legend. 'center'

property display

display: boolean;

Is the legend shown? true

property fullSize

fullSize: boolean;

Marks that this box should take the full width/height of the canvas (moving other boxes). This is unlikely to need to be changed in day-to-day use. true

property labels

labels: {
    /**
     * Width of colored box.
     * @default 40
     */
    boxWidth: number;
    /**
     * Height of the coloured box.
     * @default fontSize
     */
    boxHeight: number;
    /**
     * Color of label
     * @see Defaults.color
     */
    color: Color;
    /**
     * Font of label
     * @see Defaults.font
     */
    font: ScriptableAndScriptableOptions<
        Partial<FontSpec>,
        ScriptableChartContext
    >;
    /**
     * Padding between rows of colored boxes.
     * @default 10
     */
    padding: number;
    /**
     * If usePointStyle is true, the width of the point style used for the legend.
     */
    pointStyleWidth: number;
    /**
     * Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Item for details.
     */
    generateLabels(chart: Chart): LegendItem[];

    /**
     * Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data
     */
    filter(item: LegendItem, data: ChartData): boolean;

    /**
     * Sorts the legend items
     */
    sort(a: LegendItem, b: LegendItem, data: ChartData): number;

    /**
     * Override point style for the legend. Only applies if usePointStyle is true
     */
    pointStyle: PointStyle;

    /**
     * Text alignment
     */
    textAlign?: TextAlign;

    /**
     * Label style will match corresponding point style (size is based on the minimum value between boxWidth and font.size).
     * @default false
     */
    usePointStyle: boolean;

    /**
     * Label borderRadius will match corresponding borderRadius.
     * @default false
     */
    useBorderRadius: boolean;

    /**
     * Override the borderRadius to use.
     * @default undefined
     */
    borderRadius: number;
};

property maxHeight

maxHeight: number;

Maximum height of the legend, in pixels

property maxWidth

maxWidth: number;

Maximum width of the legend, in pixels

property position

position: LayoutPosition;

Position of the legend. 'top'

property reverse

reverse: boolean;

Legend will show datasets in reverse order. false

property rtl

rtl: boolean;

true for rendering the legends from right to left.

property textDirection

textDirection: string;

This will force the text direction 'rtl' or 'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas canvas's default

property title

title: {
    /**
     * Is the legend title displayed.
     * @default false
     */
    display: boolean;
    /**
     * Color of title
     * @see Defaults.color
     */
    color: Color;
    /**
     * see Fonts
     */
    font: ScriptableAndScriptableOptions<
        Partial<FontSpec>,
        ScriptableChartContext
    >;
    position: 'center' | 'start' | 'end';
    padding?: number | ChartArea;
    /**
     * The string title.
     */
    text: string;
};

method onClick

onClick: (
    this: LegendElement<TType>,
    e: ChartEvent,
    legendItem: LegendItem,
    legend: LegendElement<TType>
) => void;

A callback that is called when a click event is registered on a label item.

method onHover

onHover: (
    this: LegendElement<TType>,
    e: ChartEvent,
    legendItem: LegendItem,
    legend: LegendElement<TType>
) => void;

A callback that is called when a 'mousemove' event is registered on top of a label item

method onLeave

onLeave: (
    this: LegendElement<TType>,
    e: ChartEvent,
    legendItem: LegendItem,
    legend: LegendElement<TType>
) => void;

A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item.

interface LineControllerChartOptions

interface LineControllerChartOptions {}

property showLine

showLine: boolean;

If false, the lines between points are not drawn. true

property spanGaps

spanGaps: boolean | number;

If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used. false

interface LineControllerDatasetOptions

interface LineControllerDatasetOptions
    extends ControllerDatasetOptions,
        ScriptableAndArrayOptions<PointPrefixedOptions, ScriptableContext<'line'>>,
        ScriptableAndArrayOptions<
            PointPrefixedHoverOptions,
            ScriptableContext<'line'>
        >,
        ScriptableOptions<
            Omit<LineOptions, keyof CommonElementOptions>,
            ScriptableContext<'line'>
        >,
        ScriptableAndArrayOptions<CommonElementOptions, ScriptableContext<'line'>>,
        ScriptableOptions<
            Omit<LineHoverOptions, keyof CommonHoverOptions>,
            ScriptableContext<'line'>
        >,
        ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'line'>>,
        AnimationOptions<'line'> {}

property showLine

showLine: boolean;

property spanGaps

spanGaps: boolean | number;

If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used. false

property xAxisID

xAxisID: string;

The ID of the x axis to plot this dataset on.

property yAxisID

yAxisID: string;

The ID of the y axis to plot this dataset on.

interface LineElement

interface LineElement<
    T extends LineProps = LineProps,
    O extends LineOptions = LineOptions
> extends Element<T, O>,
        VisualElement {}

property points

points: Point[];

property segments

readonly segments: Segment[];

method first

first: () => Point | false;

method interpolate

interpolate: (point: Point, property: 'x' | 'y') => undefined | Point | Point[];

method last

last: () => Point | false;

method path

path: (ctx: CanvasRenderingContext2D) => boolean;

method pathSegment

pathSegment: (
    ctx: CanvasRenderingContext2D,
    segment: Segment,
    params: AnyObject
) => undefined | boolean;

method updateControlPoints

updateControlPoints: (chartArea: ChartArea, indexAxis?: 'x' | 'y') => void;

interface LineHoverOptions

interface LineHoverOptions extends CommonHoverOptions {}

property hoverBorderCapStyle

hoverBorderCapStyle: CanvasLineCap;

property hoverBorderDash

hoverBorderDash: number[];

property hoverBorderDashOffset

hoverBorderDashOffset: number;

property hoverBorderJoinStyle

hoverBorderJoinStyle: CanvasLineJoin;

interface LineOptions

interface LineOptions extends CommonElementOptions {}

property borderCapStyle

borderCapStyle: CanvasLineCap;

Line cap style. See MDN. 'butt'

property borderDash

borderDash: number[];

Line dash. See MDN. []

property borderDashOffset

borderDashOffset: number;

Line dash offset. See MDN. 0.0

property borderJoinStyle

borderJoinStyle: CanvasLineJoin;

Line join style. See MDN. 'miter'

property capBezierPoints

capBezierPoints: boolean;

true to keep Bézier control inside the chart, false for no restriction. true

property cubicInterpolationMode

cubicInterpolationMode: 'default' | 'monotone';

Interpolation mode to apply. 'default'

property fill

fill: FillTarget | ComplexFillTarget;

Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end

property segment

segment: {
    backgroundColor: Scriptable<Color | undefined, ScriptableLineSegmentContext>;
    borderColor: Scriptable<Color | undefined, ScriptableLineSegmentContext>;
    borderCapStyle: Scriptable<
        CanvasLineCap | undefined,
        ScriptableLineSegmentContext
    >;
    borderDash: Scriptable<number[] | undefined, ScriptableLineSegmentContext>;
    borderDashOffset: Scriptable<
        number | undefined,
        ScriptableLineSegmentContext
    >;
    borderJoinStyle: Scriptable<
        CanvasLineJoin | undefined,
        ScriptableLineSegmentContext
    >;
    borderWidth: Scriptable<number | undefined, ScriptableLineSegmentContext>;
};

property spanGaps

spanGaps: boolean | number;

If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.

property stepped

stepped: 'before' | 'after' | 'middle' | boolean;

true to show the line as a stepped line (tension will be ignored). false

property tension

tension: number;

Bézier curve tension (0 for no Bézier curves). 0

interface LineProps

interface LineProps {}

property points

points: Point[];

interface ParsingOptions

interface ParsingOptions {}

property normalized

normalized: boolean;

Chart.js is fastest if you provide data with indices that are unique, sorted, and consistent across datasets and provide the normalized: true option to let Chart.js know that you have done so.

property parsing

parsing:
    | {
          [key: string]: string;
      }
    | false;

How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.

interface Plugin

interface Plugin<TType extends ChartType = ChartType, O = AnyObject>
    extends ExtendedPlugin<TType, O> {}

property defaults

defaults?: Partial<O>;

Default options used in the plugin

property events

events?: (keyof HTMLElementEventMap)[];

The events option defines the browser events that the plugin should listen. ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']

property id

id: string;

method afterBuildTicks

afterBuildTicks: (
    chart: Chart<TType>,
    args: { scale: Scale },
    options: O
) => void;

Called after scale has build its ticks. This hook is called separately for each scale in the chart.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{Scale} args.scale - The scale.
Parameter options
The plugin options.

method afterDataLimits

afterDataLimits: (
    chart: Chart<TType>,
    args: { scale: Scale },
    options: O
) => void;

Called after scale data limits are calculated. This hook is called separately for each scale in the chart.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{Scale} args.scale - The scale.
Parameter options
The plugin options.

method afterDatasetDraw

afterDatasetDraw: (
    chart: Chart<TType>,
    args: { index: number; meta: ChartMeta },
    options: O
) => void;

Called after the chart datasets at the given args.index have been drawn (datasets are drawn in the reverse order). Note that this hook will not be called if the datasets drawing has been previously cancelled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{number} args.index - The dataset index.
Parameter
{object} args.meta - The dataset metadata.
Parameter options
The plugin options.

method afterDatasetsDraw

afterDatasetsDraw: (
    chart: Chart<TType>,
    args: EmptyObject,
    options: O,
    cancelable: false
) => void;

Called after the chart datasets have been drawn. Note that this hook will not be called if the datasets drawing has been previously cancelled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.

method afterDatasetsUpdate

afterDatasetsUpdate: (
    chart: Chart<TType>,
    args: { mode: UpdateMode; cancelable: true },
    options: O
) => void;

Called after the chart datasets have been updated. Note that this hook will not be called if the datasets update has been previously cancelled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{UpdateMode} args.mode - The update mode.
Parameter options
The plugin options. version 2.1.5

method afterDatasetUpdate

afterDatasetUpdate: (
    chart: Chart<TType>,
    args: {
        index: number;
        meta: ChartMeta;
        mode: UpdateMode;
        cancelable: false;
    },
    options: O
) => void;

Called after the chart datasets at the given args.index has been updated. Note that this hook will not be called if the datasets update has been previously cancelled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{number} args.index - The dataset index.
Parameter
{object} args.meta - The dataset metadata.
Parameter
{UpdateMode} args.mode - The update mode.
Parameter options
The plugin options.

method afterDestroy

afterDestroy: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called after the chart has been destroyed.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.

method afterDraw

afterDraw: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called after the chart has been drawn. Note that this hook will not be called if the drawing has been previously cancelled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.

method afterEvent

afterEvent: (
    chart: Chart<TType>,
    args: {
        event: ChartEvent;
        replay: boolean;
        changed?: boolean;
        cancelable: false;
        inChartArea: boolean;
    },
    options: O
) => void;

Called after the event has been consumed. Note that this hook will not be called if the event has been previously discarded.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{ChartEvent} args.event - The event object.
Parameter
{boolean} args.replay - True if this event is replayed from Chart.update
Parameter
{boolean} args.inChartArea - The event position is inside chartArea
Parameter
{boolean} [args.changed] - Set to true if the plugin needs a render. Should only be changed to true, because this args object is passed through all plugins.
Parameter options
The plugin options.

method afterInit

afterInit: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called after chart has been initialized and before the first update.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.

method afterLayout

afterLayout: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called after the chart has been laid out. Note that this hook will not be called if the layout update has been previously cancelled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.

method afterRender

afterRender: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called after the chart has been fully rendered (and animation completed). Note that this hook will not be called if the rendering has been previously cancelled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.

method afterUpdate

afterUpdate: (
    chart: Chart<TType>,
    args: { mode: UpdateMode },
    options: O
) => void;

Called after chart has been updated and before rendering. Note that this hook will not be called if the chart update has been previously cancelled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{UpdateMode} args.mode - The update mode
Parameter options
The plugin options.

method beforeBuildTicks

beforeBuildTicks: (
    chart: Chart<TType>,
    args: { scale: Scale },
    options: O
) => void;

Called before scale builds its ticks. This hook is called separately for each scale in the chart.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{Scale} args.scale - The scale.
Parameter options
The plugin options.

method beforeDataLimits

beforeDataLimits: (
    chart: Chart<TType>,
    args: { scale: Scale },
    options: O
) => void;

Called before scale data limits are calculated. This hook is called separately for each scale in the chart.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{Scale} args.scale - The scale.
Parameter options
The plugin options.

method beforeDatasetDraw

beforeDatasetDraw: (
    chart: Chart<TType>,
    args: { index: number; meta: ChartMeta },
    options: O
) => boolean | void;

Called before drawing the chart dataset at the given args.index (datasets are drawn in the reverse order). If any plugin returns false, the datasets drawing is cancelled until another render is triggered.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{number} args.index - The dataset index.
Parameter
{object} args.meta - The dataset metadata.
Parameter options
The plugin options.
Returns
{boolean} false to cancel the chart datasets drawing.

method beforeDatasetsDraw

beforeDatasetsDraw: (
    chart: Chart<TType>,
    args: { cancelable: true },
    options: O
) => boolean | void;

Called before drawing the chart datasets. If any plugin returns false, the datasets drawing is cancelled until another render is triggered.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.
Returns
{boolean} false to cancel the chart datasets drawing.

method beforeDatasetsUpdate

beforeDatasetsUpdate: (
    chart: Chart<TType>,
    args: { mode: UpdateMode },
    options: O
) => boolean | void;

Called before updating the chart datasets. If any plugin returns false, the datasets update is cancelled until another update is triggered.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{UpdateMode} args.mode - The update mode.
Parameter options
The plugin options.
Returns
{boolean} false to cancel the datasets update. version 2.1.5

method beforeDatasetUpdate

beforeDatasetUpdate: (
    chart: Chart<TType>,
    args: { index: number; meta: ChartMeta; mode: UpdateMode; cancelable: true },
    options: O
) => boolean | void;

Called before updating the chart dataset at the given args.index. If any plugin returns false, the datasets update is cancelled until another update is triggered.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{number} args.index - The dataset index.
Parameter
{object} args.meta - The dataset metadata.
Parameter
{UpdateMode} args.mode - The update mode.
Parameter options
The plugin options.
Returns
{boolean} false to cancel the chart datasets drawing.

method beforeDestroy

beforeDestroy: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called before the chart is being destroyed.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.

method beforeDraw

beforeDraw: (
    chart: Chart<TType>,
    args: { cancelable: true },
    options: O
) => boolean | void;

Called before drawing chart at every animation frame. If any plugin returns false, the frame drawing is cancelled untilanother render is triggered.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.
Returns
{boolean} false to cancel the chart drawing.

method beforeElementsUpdate

beforeElementsUpdate: (
    chart: Chart<TType>,
    args: EmptyObject,
    options: O
) => void;

Called during the update process, before any chart elements have been created. This can be used for data decimation by changing the data array inside a dataset.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.

method beforeEvent

beforeEvent: (
    chart: Chart<TType>,
    args: {
        event: ChartEvent;
        replay: boolean;
        changed?: boolean;
        cancelable: true;
        inChartArea: boolean;
    },
    options: O
) => boolean | void;

Called before processing the specified event. If any plugin returns false, the event will be discarded.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{ChartEvent} args.event - The event object.
Parameter
{boolean} args.replay - True if this event is replayed from Chart.update
Parameter
{boolean} args.inChartArea - The event position is inside chartArea
Parameter
{boolean} [args.changed] - Set to true if the plugin needs a render. Should only be changed to true, because this args object is passed through all plugins.
Parameter options
The plugin options.

method beforeInit

beforeInit: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called before initializing chart.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.

method beforeLayout

beforeLayout: (
    chart: Chart<TType>,
    args: { cancelable: true },
    options: O
) => boolean | void;

Called before laying out chart. If any plugin returns false, the layout update is cancelled until another update is triggered.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.
Returns
{boolean} false to cancel the chart layout.

method beforeRender

beforeRender: (
    chart: Chart<TType>,
    args: { cancelable: true },
    options: O
) => boolean | void;

Called before rendering chart. If any plugin returns false, the rendering is cancelled until another render is triggered.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options.
Returns
{boolean} false to cancel the chart rendering.

method beforeUpdate

beforeUpdate: (
    chart: Chart<TType>,
    args: { mode: UpdateMode; cancelable: true },
    options: O
) => boolean | void;

Called before updating chart. If any plugin returns false, the update is cancelled (and thus subsequent render(s)) until another update is triggered.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{UpdateMode} args.mode - The update mode
Parameter options
The plugin options.
Returns
{boolean} false to cancel the chart update.

method install

install: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called when plugin is installed for this chart instance. This hook is also invoked for disabled plugins (options === false).
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options. 3.0.0

method reset

reset: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called during chart reset
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options. version 3.0.0

method resize

resize: (
    chart: Chart<TType>,
    args: { size: { width: number; height: number } },
    options: O
) => void;

Called after the chart as been resized.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter
{number} args.size - The new canvas display size (eq. canvas.style width & height).
Parameter options
The plugin options.

method start

start: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called when a plugin is starting. This happens when chart is created or plugin is enabled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options. 3.0.0

method stop

stop: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called when a plugin stopping. This happens when chart is destroyed or plugin is disabled.
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options. 3.0.0

method uninstall

uninstall: (chart: Chart<TType>, args: EmptyObject, options: O) => void;

Called after chart is destroyed on all plugins that were installed for that chart. This hook is also invoked for disabled plugins (options === false).
Parameter chart
The chart instance.
Parameter args
The call arguments.
Parameter options
The plugin options. 3.0.0

interface PluginChartOptions

interface PluginChartOptions<TType extends ChartType> {}

property plugins

plugins: PluginOptionsByType<TType>;

interface PluginOptionsByType

interface PluginOptionsByType<TType extends ChartType> {}

property colors

colors: ColorsPluginOptions;

property decimation

decimation: DecimationOptions;

property filler

filler: FillerOptions;

property legend

legend: LegendOptions<TType>;

property subtitle

subtitle: TitleOptions;

property title

title: TitleOptions;

property tooltip

tooltip: TooltipOptions<TType>;

interface Point

interface Point {}

property x

x: number;

property y

y: number;

interface PointHoverOptions

interface PointHoverOptions extends CommonHoverOptions {}

property hoverRadius

hoverRadius: number;

Point radius when hovered. 4

interface PointOptions

interface PointOptions extends CommonElementOptions {}

property drawActiveElementsOnTop

drawActiveElementsOnTop: boolean;

Draw the active elements over the other elements of the dataset, true

property hitRadius

hitRadius: number;

Extra radius added to point radius for hit detection. 1

property pointStyle

pointStyle: PointStyle;

Point style 'circle;

property radius

radius: number;

Point radius 3

property rotation

rotation: number;

Point rotation (in degrees). 0

interface PointPrefixedHoverOptions

interface PointPrefixedHoverOptions {}

property pointHoverBackgroundColor

pointHoverBackgroundColor: Color;

Point background color when hovered.

property pointHoverBorderColor

pointHoverBorderColor: Color;

Point border color when hovered.

property pointHoverBorderWidth

pointHoverBorderWidth: number;

Border width of point when hovered.

property pointHoverRadius

pointHoverRadius: number;

The radius of the point when hovered.

interface PointPrefixedOptions

interface PointPrefixedOptions {}

property pointBackgroundColor

pointBackgroundColor: Color;

The fill color for points.

property pointBorderColor

pointBorderColor: Color;

The border color for points.

property pointBorderWidth

pointBorderWidth: number;

The width of the point border in pixels.

property pointHitRadius

pointHitRadius: number;

The pixel size of the non-displayed point that reacts to mouse events.

property pointRadius

pointRadius: number;

The radius of the point shape. If set to 0, the point is not rendered.

property pointRotation

pointRotation: number;

The rotation of the point in degrees.

property pointStyle

pointStyle: PointStyle;

Style of the point.

interface PolarAreaController

interface PolarAreaController extends DoughnutController {}

method countVisibleElements

countVisibleElements: () => number;

interface PolarAreaControllerChartOptions

interface PolarAreaControllerChartOptions {}

property animation

animation: false | PolarAreaAnimationOptions;

property startAngle

startAngle: number;

Starting angle to draw arcs for the first item in a dataset. In degrees, 0 is at top. 0

interface PolarAreaControllerDatasetOptions

interface PolarAreaControllerDatasetOptions
    extends DoughnutControllerDatasetOptions {}

property angle

angle: number;

Arc angle to cover. - for polar only circumference / (arc count)

interface RadarControllerDatasetOptions

interface RadarControllerDatasetOptions
    extends ControllerDatasetOptions,
        ScriptableAndArrayOptions<
            PointOptions &
                PointHoverOptions &
                PointPrefixedOptions &
                PointPrefixedHoverOptions,
            ScriptableContext<'radar'>
        >,
        ScriptableAndArrayOptions<
            LineOptions & LineHoverOptions,
            ScriptableContext<'radar'>
        >,
        AnimationOptions<'radar'> {}

property showLine

showLine: boolean;

If false, the line is not drawn for this dataset.

property spanGaps

spanGaps: boolean | number;

If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.

property xAxisID

xAxisID: string;

The ID of the x axis to plot this dataset on.

property yAxisID

yAxisID: string;

The ID of the y axis to plot this dataset on.

interface RadialLinearScale

interface RadialLinearScale<
    O extends RadialLinearScaleOptions = RadialLinearScaleOptions
> extends Scale<O> {}

property xCenter

xCenter: number;

property yCenter

yCenter: number;

method getBasePosition

getBasePosition: (index: number) => { x: number; y: number; angle: number };

method getDistanceFromCenterForValue

getDistanceFromCenterForValue: (value: number) => number;

method getIndexAngle

getIndexAngle: (index: number) => number;

method getPointLabelPosition

getPointLabelPosition: (index: number) => ChartArea;

method getPointPosition

getPointPosition: (
    index: number,
    distanceFromCenter: number
) => { x: number; y: number; angle: number };

method getPointPositionForValue

getPointPositionForValue: (
    index: number,
    value: number
) => { x: number; y: number; angle: number };

method getValueForDistanceFromCenter

getValueForDistanceFromCenter: (distance: number) => number;

method setCenterPoint

setCenterPoint: (
    leftMovement: number,
    rightMovement: number,
    topMovement: number,
    bottomMovement: number
) => void;

interface RadialParsedData

interface RadialParsedData {}

property r

r: number;

interface RadialScaleTypeRegistry

interface RadialScaleTypeRegistry {}

property radialLinear

radialLinear: {
    options: RadialLinearScaleOptions;
};

interface Registry

interface Registry {}

Please use the module's default export which provides a singleton instance Note: class is exported for typedoc

property controllers

readonly controllers: TypedRegistry<DatasetController>;

property elements

readonly elements: TypedRegistry<Element>;

property plugins

readonly plugins: TypedRegistry<Plugin>;

property scales

readonly scales: TypedRegistry<Scale>;

method add

add: (...args: ChartComponentLike[]) => void;

method addControllers

addControllers: (...args: ChartComponentLike[]) => void;

method addElements

addElements: (...args: ChartComponentLike[]) => void;

method addPlugins

addPlugins: (...args: ChartComponentLike[]) => void;

method addScales

addScales: (...args: ChartComponentLike[]) => void;

method getController

getController: (id: string) => DatasetController | undefined;

method getElement

getElement: (id: string) => Element | undefined;

method getPlugin

getPlugin: (id: string) => Plugin | undefined;

method getScale

getScale: (id: string) => Scale | undefined;

method remove

remove: (...args: ChartComponentLike[]) => void;

interface RenderTextOpts

interface RenderTextOpts {}

property backdrop

backdrop?: BackdropOptions;

Dimensions for drawing the label backdrop

property color

color?: Color;

The fill color of the text. If unset, the existing fillStyle property of the canvas is unchanged.

property decorationWidth

decorationWidth?: number;

The width of the strikethrough / underline 2

property maxWidth

maxWidth?: number;

The max width of the text in pixels

property rotation

rotation?: number;

A rotation to be applied to the canvas This is applied after the translation is applied

property strikethrough

strikethrough?: boolean;

Apply a strikethrough effect to the text

property strokeColor

strokeColor?: Color;

The color of the text stroke. If unset, the existing strokeStyle property of the context is unchanged

property strokeWidth

strokeWidth?: number;

The text stroke width. If unset, the existing lineWidth property of the context is unchanged

property textAlign

textAlign?: CanvasTextAlign;

The text alignment to use. If unset, the existing textAlign property of the context is unchanged

property textBaseline

textBaseline?: CanvasTextBaseline;

The text baseline to use. If unset, the existing textBaseline property of the context is unchanged

property translation

translation?: [number, number];

If specified, a translation to apply to the context

property underline

underline?: boolean;

Underline the text

interface Scale

interface Scale<O extends CoreScaleOptions = CoreScaleOptions>
    extends Element<unknown, O>,
        LayoutItem {}

property axis

axis: string;

property chart

readonly chart: Chart;

property ctx

readonly ctx: CanvasRenderingContext2D;

property id

readonly id: string;

property labelRotation

labelRotation: number;

property max

max: number;

property maxHeight

maxHeight: number;

property maxWidth

maxWidth: number;

property min

min: number;

property paddingBottom

paddingBottom: number;

property paddingLeft

paddingLeft: number;

property paddingRight

paddingRight: number;

property paddingTop

paddingTop: number;

property ticks

ticks: Tick[];

property type

readonly type: string;

method afterBuildTicks

afterBuildTicks: () => void;

method afterCalculateLabelRotation

afterCalculateLabelRotation: () => void;

method afterDataLimits

afterDataLimits: () => void;

method afterFit

afterFit: () => void;

method afterSetDimensions

afterSetDimensions: () => void;

method afterTickToLabelConversion

afterTickToLabelConversion: () => void;

method afterUpdate

afterUpdate: () => void;

method beforeBuildTicks

beforeBuildTicks: () => void;

method beforeCalculateLabelRotation

beforeCalculateLabelRotation: () => void;

method beforeDataLimits

beforeDataLimits: () => void;

method beforeFit

beforeFit: () => void;

method beforeSetDimensions

beforeSetDimensions: () => void;

method beforeTickToLabelConversion

beforeTickToLabelConversion: () => void;

method beforeUpdate

beforeUpdate: () => void;

method buildTicks

buildTicks: () => Tick[];

method calculateLabelRotation

calculateLabelRotation: () => void;

method configure

configure: () => void;

method determineDataLimits

determineDataLimits: () => void;

method drawGrid

drawGrid: (chartArea: ChartArea) => void;

method drawLabels

drawLabels: (chartArea: ChartArea) => void;

method drawTitle

drawTitle: (chartArea: ChartArea) => void;

method fit

fit: () => void;

method generateTickLabels

generateTickLabels: (ticks: Tick[]) => void;

method getBasePixel

getBasePixel: () => number;

Returns the pixel for the minimum chart value The coordinate (0, 0) is at the upper-left corner of the canvas {number}

method getBaseValue

getBaseValue: () => number;

method getDecimalForPixel

getDecimalForPixel: (pixel: number) => number;

Parameter pixel
{number}

method getLabelForValue

getLabelForValue: (value: number) => string;

Used to get the label to display in the tooltip for the given value
Parameter value
{string}

method getLabelItems

getLabelItems: (chartArea?: ChartArea) => LabelItem[];

method getLabels

getLabels: () => string[];

method getLineWidthForValue

getLineWidthForValue: (value: number) => number;

Returns the grid line width at given value

method getMatchingVisibleMetas

getMatchingVisibleMetas: (type?: string) => ChartMeta[];

method getMinMax

getMinMax: (canStack: boolean) => { min: number; max: number };

method getPixelForDecimal

getPixelForDecimal: (decimal: number) => number;

Utility for getting the pixel location of a percentage of scale The coordinate (0, 0) is at the upper-left corner of the canvas
Parameter decimal
{number}

method getPixelForTick

getPixelForTick: (index: number) => number;

Returns the location of the tick at the given index The coordinate (0, 0) is at the upper-left corner of the canvas
Parameter index
{number}

method getPixelForValue

getPixelForValue: (value: number, index?: number) => number;

Returns the location of the given data point. Value can either be an index or a numerical value The coordinate (0, 0) is at the upper-left corner of the canvas
Parameter value
Parameter index
{number}

method getTicks

getTicks: () => Tick[];

method getUserBounds

getUserBounds: () => {
    min: number;
    max: number;
    minDefined: boolean;
    maxDefined: boolean;
};

method getValueForPixel

getValueForPixel: (pixel: number) => number | undefined;

Used to get the data value from a given pixel. This is the inverse of getPixelForValue The coordinate (0, 0) is at the upper-left corner of the canvas
Parameter pixel
{*}

method init

init: (options: O) => void;

method isFullSize

isFullSize: () => boolean;

method parse

parse: (raw: unknown, index?: number) => unknown;

method setDimensions

setDimensions: () => void;

interface ScaleTypeRegistry

interface ScaleTypeRegistry
    extends CartesianScaleTypeRegistry,
        RadialScaleTypeRegistry {}

interface ScriptableCartesianScaleContext

interface ScriptableCartesianScaleContext {}

property scale

scale: keyof CartesianScaleTypeRegistry;

property type

type: string;

interface ScriptableChartContext

interface ScriptableChartContext {}

property chart

chart: Chart;

property type

type: string;

interface ScriptableContext

interface ScriptableContext<TType extends ChartType> {}

property active

active: boolean;

property chart

chart: Chart;

property dataIndex

dataIndex: number;

property dataset

dataset: UnionToIntersection<ChartDataset<TType>>;

property datasetIndex

datasetIndex: number;

property mode

mode: string;

property parsed

parsed: UnionToIntersection<ParsedDataType<TType>>;

property raw

raw: unknown;

property type

type: string;

interface ScriptableLineSegmentContext

interface ScriptableLineSegmentContext {}

property datasetIndex

datasetIndex: number;

property p0

p0: PointElement;

property p0DataIndex

p0DataIndex: number;

property p1

p1: PointElement;

property p1DataIndex

p1DataIndex: number;

property type

type: 'segment';

interface ScriptableScaleContext

interface ScriptableScaleContext {}

property chart

chart: Chart;

property index

index: number;

property scale

scale: Scale;

property tick

tick: Tick;

interface ScriptableScalePointLabelContext

interface ScriptableScalePointLabelContext {}

property chart

chart: Chart;

property index

index: number;

property label

label: string;

property scale

scale: Scale;

property type

type: string;

interface ScriptableTooltipContext

interface ScriptableTooltipContext<TType extends ChartType> {}

property chart

chart: UnionToIntersection<Chart<TType>>;

property tooltip

tooltip: UnionToIntersection<TooltipModel<TType>>;

property tooltipItems

tooltipItems: TooltipItem<TType>[];

interface Segment

interface Segment {}

property end

end: number;

property loop

loop: boolean;

property start

start: number;

interface Tick

interface Tick {}

property label

label?: string | string[];

property major

major?: boolean;

property value

value: number;

interface TickOptions

interface TickOptions {}

property backdropColor

backdropColor: Scriptable<Color, ScriptableScaleContext>;

Color of label backdrops. 'rgba(255, 255, 255, 0.75)'

property backdropPadding

backdropPadding: number | ChartArea;

Padding of tick backdrop. 2

property callback

callback: (
    this: Scale,
    tickValue: number | string,
    index: number,
    ticks: Tick[]
) => string | string[] | number | number[] | null | undefined;

Returns the string representation of the tick value as it should be displayed on the chart. See callback.

property color

color: ScriptableAndArray<Color, ScriptableScaleContext>;

Color of tick
See Also
- Defaults.color

property display

display: boolean;

If true, show tick labels. true

property font

font: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableScaleContext>;

see Fonts

property major

major: {
    /**
     * If true, major ticks are generated. A major tick will affect autoskipping and major will be defined on ticks in the scriptable options context.
     * @default false
     */
    enabled: boolean;
};

property padding

padding: number;

Sets the offset of the tick labels from the axis

property showLabelBackdrop

showLabelBackdrop: Scriptable<boolean, ScriptableScaleContext>;

If true, draw a background behind the tick labels. false

property textStrokeColor

textStrokeColor: Scriptable<Color, ScriptableScaleContext>;

The color of the stroke around the text. undefined

property textStrokeWidth

textStrokeWidth: Scriptable<number, ScriptableScaleContext>;

Stroke width around the text. 0

property z

z: number;

z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top. 0

interface TimeScale

interface TimeScale<O extends TimeScaleOptions = TimeScaleOptions>
    extends Scale<O> {}

method format

format: (value: number, format?: string) => string;

method getDataTimestamps

getDataTimestamps: () => number[];

method getLabelTimestamps

getLabelTimestamps: () => string[];

method normalize

normalize: (values: number[]) => number[];

interface TitleOptions

interface TitleOptions {}

property align

align: Align;

Alignment of the title. 'center'

property color

color: Color;

Color of text
See Also
- Defaults.color

property display

display: boolean;

Is the title shown? false

property font

font: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableChartContext>;

property fullSize

fullSize: boolean;

Marks that this box should take the full width/height of the canvas (moving other boxes). If set to false, places the box above/beside the chart area true

property padding

padding: number | { top: number; bottom: number };

Adds padding above and below the title text if a single number is specified. It is also possible to change top and bottom padding separately.

property position

position: 'top' | 'left' | 'bottom' | 'right';

Position of title 'top'

property text

text: string | string[];

Title text to display. If specified as an array, text is rendered on multiple lines.

interface Tooltip extends Plugin {}

property positioners

readonly positioners: TooltipPositionerMap;

interface TooltipCallbacks

interface TooltipCallbacks<
    TType extends ChartType,
    Model = TooltipModel<TType>,
    Item = TooltipItem<TType>
> {}

method afterBody

afterBody: (this: Model, tooltipItems: Item[]) => string | string[] | void;

method afterFooter

afterFooter: (this: Model, tooltipItems: Item[]) => string | string[] | void;

method afterLabel

afterLabel: (this: Model, tooltipItem: Item) => string | string[] | void;

method afterTitle

afterTitle: (this: Model, tooltipItems: Item[]) => string | string[] | void;

method beforeBody

beforeBody: (this: Model, tooltipItems: Item[]) => string | string[] | void;

method beforeFooter

beforeFooter: (this: Model, tooltipItems: Item[]) => string | string[] | void;

method beforeLabel

beforeLabel: (this: Model, tooltipItem: Item) => string | string[] | void;

method beforeTitle

beforeTitle: (this: Model, tooltipItems: Item[]) => string | string[] | void;

footer: (this: Model, tooltipItems: Item[]) => string | string[] | void;

method label

label: (this: Model, tooltipItem: Item) => string | string[] | void;

method labelColor

labelColor: (this: Model, tooltipItem: Item) => TooltipLabelStyle | void;

method labelPointStyle

labelPointStyle: (
    this: Model,
    tooltipItem: Item
) => { pointStyle: PointStyle; rotation: number } | void;

method labelTextColor

labelTextColor: (this: Model, tooltipItem: Item) => Color | void;

method title

title: (this: Model, tooltipItems: Item[]) => string | string[] | void;

interface TooltipItem

interface TooltipItem<TType extends ChartType> {}

property chart

chart: Chart;

The chart the tooltip is being shown on

property dataIndex

dataIndex: number;

Index of this data item in the dataset

property dataset

dataset: UnionToIntersection<ChartDataset<TType>>;

The dataset the item comes from

property datasetIndex

datasetIndex: number;

Index of the dataset the item comes from

property element

element: Element;

The chart element (point, arc, bar, etc.) for this tooltip item

property formattedValue

formattedValue: string;

Formatted value for the tooltip

property label

label: string;

Label for the tooltip

property parsed

parsed: UnionToIntersection<ParsedDataType<TType>>;

Parsed data values for the given dataIndex and datasetIndex

property raw

raw: unknown;

Raw data values for the given dataIndex and datasetIndex

interface TooltipLabelStyle

interface TooltipLabelStyle {}

property backgroundColor

backgroundColor: Color;

property borderColor

borderColor: Color;

property borderDash

borderDash?: [number, number];

Border dash 3.1.0

property borderDashOffset

borderDashOffset?: number;

Border dash offset 3.1.0

property borderRadius

borderRadius?: number | BorderRadius;

borderRadius 3.1.0

property borderWidth

borderWidth?: number;

Width of border line 3.1.0

interface TooltipModel

interface TooltipModel<TType extends ChartType>
    extends Element<AnyObject, TooltipOptions<TType>> {}

property afterBody

afterBody: string[];

property beforeBody

beforeBody: string[];

property body

body: { before: string[]; lines: string[]; after: string[] }[];

property caretX

caretX: number;

property caretY

caretY: number;

property chart

readonly chart: Chart<TType>;

property dataPoints

dataPoints: TooltipItem<TType>[];

footer: string[];

property height

height: number;

property labelColors

labelColors: TooltipLabelStyle[];

property labelPointStyles

labelPointStyles: { pointStyle: PointStyle; rotation: number }[];

property labelTextColors

labelTextColors: Color[];

property opacity

opacity: number;

property options

options: TooltipOptions<TType>;

property title

title: string[];

property width

width: number;

property x

x: number;

property xAlign

xAlign: TooltipXAlignment;

property y

y: number;

property yAlign

yAlign: TooltipYAlignment;

method getActiveElements

getActiveElements: () => ActiveElement[];

method setActiveElements

setActiveElements: (active: ActiveDataPoint[], eventPosition: Point) => void;

interface TooltipOptions

interface TooltipOptions<TType extends ChartType = ChartType>
    extends CoreInteractionOptions {}

property animation

animation: AnimationSpec<TType> | false;

property animations

animations: AnimationsSpec<TType> | false;

property backgroundColor

backgroundColor: Scriptable<Color, ScriptableTooltipContext<TType>>;

Background color of the tooltip. 'rgba(0, 0, 0, 0.8)'

property bodyAlign

bodyAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>;

Horizontal alignment of the body text lines. 'left'

property bodyColor

bodyColor: Scriptable<Color, ScriptableTooltipContext<TType>>;

Color of body '#fff'

property bodyFont

bodyFont: ScriptableAndScriptableOptions<
    Partial<FontSpec>,
    ScriptableTooltipContext<TType>
>;

See Fonts. {}

property bodySpacing

bodySpacing: Scriptable<number, ScriptableTooltipContext<TType>>;

Spacing to add to top and bottom of each tooltip item. 2

property borderColor

borderColor: Scriptable<Color, ScriptableTooltipContext<TType>>;

Color of the border. 'rgba(0, 0, 0, 0)'

property borderWidth

borderWidth: Scriptable<number, ScriptableTooltipContext<TType>>;

Size of the border. 0

property boxHeight

boxHeight: Scriptable<number, ScriptableTooltipContext<TType>>;

Height of the color box if displayColors is true. bodyFont.size

property boxPadding

boxPadding: number;

Padding between the color box and the text. 1

property boxWidth

boxWidth: Scriptable<number, ScriptableTooltipContext<TType>>;

Width of the color box if displayColors is true. bodyFont.size

property callbacks

callbacks: TooltipCallbacks<TType>;

property caretPadding

caretPadding: Scriptable<number, ScriptableTooltipContext<TType>>;

Extra distance to move the end of the tooltip arrow away from the tooltip point. 2

property caretSize

caretSize: Scriptable<number, ScriptableTooltipContext<TType>>;

Size, in px, of the tooltip arrow. 5

property cornerRadius

cornerRadius: Scriptable<number | BorderRadius, ScriptableTooltipContext<TType>>;

Radius of tooltip corner curves. 6

property displayColors

displayColors: Scriptable<boolean, ScriptableTooltipContext<TType>>;

If true, color boxes are shown in the tooltip. true

property enabled

enabled: Scriptable<boolean, ScriptableTooltipContext<TType>>;

Are on-canvas tooltips enabled? true

property filter

filter: (
    e: TooltipItem<TType>,
    index: number,
    array: TooltipItem<TType>[],
    data: ChartData
) => boolean;

property footerAlign

footerAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>;

Horizontal alignment of the footer text lines. 'left'

property footerColor

footerColor: Scriptable<Color, ScriptableTooltipContext<TType>>;

Color of footer '#fff'

property footerFont

footerFont: ScriptableAndScriptableOptions<
    Partial<FontSpec>,
    ScriptableTooltipContext<TType>
>;

See Fonts {weight: 'bold'}

property footerMarginTop

footerMarginTop: Scriptable<number, ScriptableTooltipContext<TType>>;

Margin to add before drawing the footer. 6

property footerSpacing

footerSpacing: Scriptable<number, ScriptableTooltipContext<TType>>;

Spacing to add to top and bottom of each footer line. 2

property itemSort

itemSort: (
    a: TooltipItem<TType>,
    b: TooltipItem<TType>,
    data: ChartData
) => number;

Sort tooltip items.

property multiKeyBackground

multiKeyBackground: Scriptable<Color, ScriptableTooltipContext<TType>>;

Color to draw behind the colored boxes when multiple items are in the tooltip. '#fff'

property padding

padding: Scriptable<Padding, ScriptableTooltipContext<TType>>;

Padding to add to the tooltip 6

property position

position: Scriptable<TooltipPositioner, ScriptableTooltipContext<TType>>;

The mode for positioning the tooltip

property rtl

rtl: Scriptable<boolean, ScriptableTooltipContext<TType>>;

true for rendering the legends from right to left.

property textDirection

textDirection: Scriptable<string, ScriptableTooltipContext<TType>>;

This will force the text direction 'rtl' or 'ltr on the canvas for rendering the tooltips, regardless of the css specified on the canvas canvas's default

property titleAlign

titleAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>;

Horizontal alignment of the title text lines. 'left'

property titleColor

titleColor: Scriptable<Color, ScriptableTooltipContext<TType>>;

Color of title '#fff'

property titleFont

titleFont: ScriptableAndScriptableOptions<
    Partial<FontSpec>,
    ScriptableTooltipContext<TType>
>;

See Fonts {weight: 'bold'}

property titleMarginBottom

titleMarginBottom: Scriptable<number, ScriptableTooltipContext<TType>>;

Margin to add on bottom of title section. 6

property titleSpacing

titleSpacing: Scriptable<number, ScriptableTooltipContext<TType>>;

Spacing to add to top and bottom of each title line. 2

property usePointStyle

usePointStyle: Scriptable<boolean, ScriptableTooltipContext<TType>>;

Use the corresponding point style (from dataset options) instead of color boxes, ex: star, triangle etc. (size is based on the minimum value between boxWidth and boxHeight) false

property xAlign

xAlign: Scriptable<TooltipXAlignment, ScriptableTooltipContext<TType>>;

Override the tooltip alignment calculations

property yAlign

yAlign: Scriptable<TooltipYAlignment, ScriptableTooltipContext<TType>>;

method external

external: (
    this: TooltipModel<TType>,
    args: { chart: Chart; tooltip: TooltipModel<TType> }
) => void;

See external tooltip section.

interface TooltipPosition

interface TooltipPosition extends Point {}

property xAlign

xAlign?: TooltipXAlignment;

property yAlign

yAlign?: TooltipYAlignment;

interface TooltipPositionerMap

interface TooltipPositionerMap {}

property average

average: TooltipPositionerFunction<ChartType>;

property nearest

nearest: TooltipPositionerFunction<ChartType>;

interface TypedRegistry

interface TypedRegistry<T> {}

method get

get: (id: string) => T | undefined;

method register

register: (item: ChartComponent) => string;

Parameter item
Returns
{string} The scope where items defaults were registered to.

method unregister

unregister: (item: ChartComponent) => void;

interface VisualElement

interface VisualElement {}

method draw

draw: (ctx: CanvasRenderingContext2D, area?: ChartArea) => void;

method getCenterPoint

getCenterPoint: (useFinalPosition?: boolean) => Point;

method getRange

getRange: (axis: 'x' | 'y') => number;

method inRange

inRange: (mouseX: number, mouseY: number, useFinalPosition?: boolean) => boolean;

method inXRange

inXRange: (mouseX: number, useFinalPosition?: boolean) => boolean;

method inYRange

inYRange: (mouseY: number, useFinalPosition?: boolean) => boolean;

Enums

enum DecimationAlgorithm

const enum DecimationAlgorithm {
    lttb = 'lttb',
    minmax = 'min-max',
}

member lttb

lttb = 'lttb'

member minmax

minmax = 'min-max'

enum UpdateModeEnum

enum UpdateModeEnum {
    resize = 'resize',
    reset = 'reset',
    none = 'none',
    hide = 'hide',
    show = 'show',
    default = 'default',
    active = 'active',
}

member active

active = 'active'

member default

default = 'default'

member hide

hide = 'hide'

member none

none = 'none'

member reset

reset = 'reset'

member resize

resize = 'resize'

member show

show = 'show'

Type Aliases

type Align

type Align = 'start' | 'center' | 'end';

type AnimationOptions

type AnimationOptions<TType extends ChartType> = {
    animation:
        | false
        | (AnimationSpec<TType> & {
              /**
               * Callback called on each step of an animation.
               */
              onProgress?: (this: Chart, event: AnimationEvent) => void;
              /**
               * Callback called when all animations are completed.
               */
              onComplete?: (this: Chart, event: AnimationEvent) => void;
          });
    animations: AnimationsSpec<TType>;
    transitions: TransitionsSpec<TType>;
};

type AnimationSpec

type AnimationSpec<TType extends ChartType> = {
    /**
     * The number of milliseconds an animation takes.
     * @default 1000
     */
    duration?: Scriptable<number, ScriptableContext<TType>>;
    /**
     * Easing function to use
     * @default 'easeOutQuart'
     */
    easing?: Scriptable<EasingFunction, ScriptableContext<TType>>;

    /**
     * Delay before starting the animations.
     * @default 0
     */
    delay?: Scriptable<number, ScriptableContext<TType>>;

    /**
     *   If set to true, the animations loop endlessly.
     * @default false
     */
    loop?: Scriptable<boolean, ScriptableContext<TType>>;
};

type AnimationsSpec

type AnimationsSpec<TType extends ChartType> = {
    [name: string]:
        | false
        | (AnimationSpec<TType> & {
              properties: string[];

              /**
               * Type of property, determines the interpolator used. Possible values: 'number', 'color' and 'boolean'. Only really needed for 'color', because typeof does not get that right.
               */
              type: 'color' | 'number' | 'boolean';

              fn: <T>(from: T, to: T, factor: number) => T;

              /**
               * Start value for the animation. Current value is used when undefined
               */
              from: Scriptable<Color | number | boolean, ScriptableContext<TType>>;
              /**
               *
               */
              to: Scriptable<Color | number | boolean, ScriptableContext<TType>>;
          });
};

type BarController

type BarController = DatasetController;

type BubbleController

type BubbleController = DatasetController;

type CartesianTickOptions

type CartesianTickOptions = TickOptions & {
    /**
     * The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
     * @default ticks.length
     */
    sampleSize: number;
    /**
     * The label alignment
     * @default 'center'
     */
    align: Align | 'inner';
    /**
     *   If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.
     * @default true
     */
    autoSkip: boolean;
    /**
     * Padding between the ticks on the horizontal axis when autoSkip is enabled.
     * @default 0
     */
    autoSkipPadding: number;

    /**
     * How is the label positioned perpendicular to the axis direction.
     * This only applies when the rotation is 0 and the axis position is one of "top", "left", "right", or "bottom"
     * @default 'near'
     */
    crossAlign: 'near' | 'center' | 'far';

    /**
     * Should the defined `min` and `max` values be presented as ticks even if they are not "nice".
     * @default: true
     */
    includeBounds: boolean;

    /**
     * Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). Note: this can cause labels at the edges to be cropped by the edge of the canvas
     * @default 0
     */
    labelOffset: number;

    /**
     * Minimum rotation for tick labels. Note: Only applicable to horizontal scales.
     * @default 0
     */
    minRotation: number;
    /**
     * Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. Note: Only applicable to horizontal scales.
     * @default 50
     */
    maxRotation: number;
    /**
     * Flips tick labels around axis, displaying the labels inside the chart instead of outside. Note: Only applicable to vertical scales.
     * @default false
     */
    mirror: boolean;
    /**
     *   Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
     * @default 0
     */
    padding: number;
    /**
     * Maximum number of ticks and gridlines to show.
     * @default 11
     */
    maxTicksLimit: number;
};

type CategoryScale

type CategoryScale<O extends CategoryScaleOptions = CategoryScaleOptions> = Scale<O>;

type CategoryScaleOptions

type CategoryScaleOptions = Omit<CartesianScaleOptions, 'min' | 'max'> & {
    min: string | number;
    max: string | number;
    labels: string[] | string[][];
};

type ChartComponentLike

type ChartComponentLike =
    | ChartComponent
    | ChartComponent[]
    | { [key: string]: ChartComponent }
    | Plugin
    | Plugin[];

type ChartDataset

type ChartDataset<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>
> = DeepPartial<
    {
        [key in ChartType]: { type: key } & ChartTypeRegistry[key]['datasetOptions'];
    }[TType]
> &
    ChartDatasetProperties<TType, TData>;

type ChartDatasetCustomTypesPerDataset

type ChartDatasetCustomTypesPerDataset<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>
> = DeepPartial<
    {
        [key in ChartType]: { type: key } & ChartTypeRegistry[key]['datasetOptions'];
    }[TType]
> &
    ChartDatasetPropertiesCustomTypesPerDataset<TType, TData>;

type ChartItem

type ChartItem =
    | string
    | CanvasRenderingContext2D
    | HTMLCanvasElement
    | { canvas: HTMLCanvasElement }
    | ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement>;

type ChartMeta

type ChartMeta<
    TType extends ChartType = ChartType,
    TElement extends Element = Element,
    TDatasetElement extends Element = Element
> = DeepPartial<
    { [key in ChartType]: ChartTypeRegistry[key]['metaExtensions'] }[TType]
> &
    ChartMetaCommon<TElement, TDatasetElement>;

type ChartOptions

type ChartOptions<TType extends ChartType = ChartType> = Exclude<
    DeepPartial<
        CoreChartOptions<TType> &
            ElementChartOptions<TType> &
            PluginChartOptions<TType> &
            DatasetChartOptions<TType> &
            ScaleChartOptions<TType> &
            ChartTypeRegistry[TType]['chartOptions']
    >,
    DeepPartial<unknown[]>
>;

type ChartType

type ChartType = keyof ChartTypeRegistry;

type Color

type Color = string | CanvasGradient | CanvasPattern;

type DatasetChartOptions

type DatasetChartOptions<TType extends ChartType = ChartType> = {
    [key in TType]: {
        datasets: ChartTypeRegistry[key]['datasetOptions'];
    };
};

type DecimationOptions

type DecimationOptions = LttbDecimationOptions | MinMaxDecimationOptions;

type DefaultDataPoint

type DefaultDataPoint<TType extends ChartType> = DistributiveArray<
    ChartTypeRegistry[TType]['defaultDataPoint']
>;

type DoughnutDataPoint

type DoughnutDataPoint = number;

type EasingFunction

type EasingFunction = keyof typeof effects;

type ElementChartOptions

type ElementChartOptions<TType extends ChartType = ChartType> = {
    elements: ElementOptionsByType<TType>;
};

type FillTarget

type FillTarget =
    | number
    | string
    | { value: number }
    | 'start'
    | 'end'
    | 'origin'
    | 'stack'
    | 'shape'
    | boolean;

type InteractionAxis

type InteractionAxis = 'x' | 'y' | 'xy' | 'r';

type InteractionMode

type InteractionMode = keyof InteractionModeMap;

type InteractionModeFunction

type InteractionModeFunction = (
    chart: Chart,
    e: ChartEvent,
    options: InteractionOptions,
    useFinalPosition?: boolean
) => InteractionItem[];

type LayoutPosition

type LayoutPosition =
    | 'left'
    | 'top'
    | 'right'
    | 'bottom'
    | 'center'
    | 'chartArea'
    | { [scaleId: string]: number };

type LinearScale

type LinearScale<O extends LinearScaleOptions = LinearScaleOptions> = Scale<O>;

type LinearScaleOptions

type LinearScaleOptions = CartesianScaleOptions & {
    /**
     *  if true, scale will include 0 if it is not already included.
     * @default true
     */
    beginAtZero: boolean;
    /**
     * Adjustment used when calculating the minimum data value.
     */
    suggestedMin?: number;
    /**
     * Adjustment used when calculating the maximum data value.
     */
    suggestedMax?: number;
    /**
     * Percentage (string ending with %) or amount (number) for added room in the scale range above and below data.
     */
    grace?: string | number;

    ticks: {
        /**
         * The Intl.NumberFormat options used by the default label formatter
         */
        format: Intl.NumberFormatOptions;

        /**
         * if defined and stepSize is not specified, the step size will be rounded to this many decimal places.
         */
        precision: number;

        /**
         * User defined fixed step size for the scale
         */
        stepSize: number;

        /**
         * User defined count of ticks
         */
        count: number;
    };
};

type LineController

type LineController = DatasetController;

type LogarithmicScale

type LogarithmicScale<O extends LogarithmicScaleOptions = LogarithmicScaleOptions> =
    Scale<O>;

type LogarithmicScaleOptions

type LogarithmicScaleOptions = CartesianScaleOptions & {
    /**
     * Adjustment used when calculating the maximum data value.
     */
    suggestedMin?: number;
    /**
     * Adjustment used when calculating the minimum data value.
     */
    suggestedMax?: number;

    ticks: {
        /**
         * The Intl.NumberFormat options used by the default label formatter
         */
        format: Intl.NumberFormatOptions;
    };
};

type Overrides

type Overrides = {
    [key in ChartType]: CoreChartOptions<key> &
        ElementChartOptions<key> &
        PluginChartOptions<key> &
        DatasetChartOptions<ChartType> &
        ScaleChartOptions<key> &
        ChartTypeRegistry[key]['chartOptions'];
};

type ParsedDataType

type ParsedDataType<TType extends ChartType = ChartType> =
    ChartTypeRegistry[TType]['parsedDataType'];

type PieAnimationOptions

type PieAnimationOptions = DoughnutAnimationOptions;

type PieController

type PieController = DoughnutController;

type PieControllerChartOptions

type PieControllerChartOptions = DoughnutControllerChartOptions;

type PieControllerDatasetOptions

type PieControllerDatasetOptions = DoughnutControllerDatasetOptions;

type PieDataPoint

type PieDataPoint = DoughnutDataPoint;

type PieMetaExtensions

type PieMetaExtensions = DoughnutMetaExtensions;

type PointProps

type PointProps = Point;

type PointStyle

type PointStyle =
    | 'circle'
    | 'cross'
    | 'crossRot'
    | 'dash'
    | 'line'
    | 'rect'
    | 'rectRounded'
    | 'rectRot'
    | 'star'
    | 'triangle'
    | false
    | HTMLImageElement
    | HTMLCanvasElement;

type PolarAreaAnimationOptions

type PolarAreaAnimationOptions = DoughnutAnimationOptions;

type RadarController

type RadarController = DatasetController;

type RadarControllerChartOptions

type RadarControllerChartOptions = LineControllerChartOptions;

type RadialLinearScaleOptions

type RadialLinearScaleOptions = CoreScaleOptions & {
    animate: boolean;

    startAngle: number;

    angleLines: {
        /**
         * if true, angle lines are shown.
         * @default true
         */
        display: boolean;
        /**
         * Color of angled lines.
         * @default 'rgba(0, 0, 0, 0.1)'
         */
        color: Scriptable<Color, ScriptableScaleContext>;
        /**
         * Width of angled lines.
         * @default 1
         */
        lineWidth: Scriptable<number, ScriptableScaleContext>;
        /**
         * Length and spacing of dashes on angled lines. See MDN.
         * @default []
         */
        borderDash: Scriptable<number[], ScriptableScaleContext>;
        /**
         * Offset for line dashes. See MDN.
         * @default 0
         */
        borderDashOffset: Scriptable<number, ScriptableScaleContext>;
    };

    /**
     * if true, scale will include 0 if it is not already included.
     * @default false
     */
    beginAtZero: boolean;

    grid: Partial<GridLineOptions>;

    /**
     * User defined minimum number for the scale, overrides minimum value from data.
     */
    min: number;
    /**
     * User defined maximum number for the scale, overrides maximum value from data.
     */
    max: number;

    pointLabels: {
        /**
         * Background color of the point label.
         * @default undefined
         */
        backdropColor: Scriptable<Color, ScriptableScalePointLabelContext>;
        /**
         * Padding of label backdrop.
         * @default 2
         */
        backdropPadding: Scriptable<
            number | ChartArea,
            ScriptableScalePointLabelContext
        >;

        /**
         * Border radius
         * @default 0
         * @since 3.8.0
         */
        borderRadius: Scriptable<
            number | BorderRadius,
            ScriptableScalePointLabelContext
        >;

        /**
         * if true, point labels are shown. When `display: 'auto'`, the label is hidden if it overlaps with another label.
         * @default true
         */
        display: boolean | 'auto';
        /**
         * Color of label
         * @see Defaults.color
         */
        color: Scriptable<Color, ScriptableScalePointLabelContext>;
        /**
         */
        font: ScriptableAndScriptableOptions<
            Partial<FontSpec>,
            ScriptableScalePointLabelContext
        >;

        /**
         * Callback function to transform data labels to point labels. The default implementation simply returns the current string.
         */
        callback: (
            label: string,
            index: number
        ) => string | string[] | number | number[];

        /**
         * Padding around the pointLabels
         * @default 5
         */
        padding: Scriptable<number, ScriptableScalePointLabelContext>;

        /**
         * if true, point labels are centered.
         * @default false
         */
        centerPointLabels: boolean;
    };

    /**
     * Adjustment used when calculating the maximum data value.
     */
    suggestedMax: number;
    /**
     * Adjustment used when calculating the minimum data value.
     */
    suggestedMin: number;

    ticks: RadialTickOptions;
};

type RadialTickOptions

type RadialTickOptions = TickOptions & {
    /**
     * The Intl.NumberFormat options used by the default label formatter
     */
    format: Intl.NumberFormatOptions;

    /**
     * Maximum number of ticks and gridlines to show.
     * @default 11
     */
    maxTicksLimit: number;

    /**
     * if defined and stepSize is not specified, the step size will be rounded to this many decimal places.
     */
    precision: number;

    /**
     * User defined fixed step size for the scale.
     */
    stepSize: number;

    /**
     * User defined number of ticks
     */
    count: number;
};

type ScaleChartOptions

type ScaleChartOptions<TType extends ChartType = ChartType> = {
    scales: {
        [key: string]: ScaleOptionsByType<ChartTypeRegistry[TType]['scales']>;
    };
};

type ScaleOptions

type ScaleOptions<TScale extends ScaleType = ScaleType> = DeepPartial<
    ScaleOptionsByType<TScale>
>;

type ScaleOptionsByType

type ScaleOptionsByType<TScale extends ScaleType = ScaleType> = {
    [key in ScaleType]: { type: key } & ScaleTypeRegistry[key]['options'];
}[TScale];

type ScaleType

type ScaleType = keyof ScaleTypeRegistry;

type ScatterController

type ScatterController = LineController;

type ScatterControllerChartOptions

type ScatterControllerChartOptions = LineControllerChartOptions;

type ScatterControllerDatasetOptions

type ScatterControllerDatasetOptions = LineControllerDatasetOptions;

type ScatterDataPoint

type ScatterDataPoint = Point;

type Scriptable

type Scriptable<T, TContext> =
    | T
    | ((ctx: TContext, options: AnyObject) => T | undefined);

type ScriptableAndArray

type ScriptableAndArray<T, TContext> = readonly T[] | Scriptable<T, TContext>;

type ScriptableAndArrayOptions

type ScriptableAndArrayOptions<T, TContext> = {
    [P in keyof T]: ScriptableAndArray<T[P], TContext>;
};

type ScriptableAndScriptableOptions

type ScriptableAndScriptableOptions<T, TContext> =
    | Scriptable<T, TContext>
    | ScriptableOptions<T, TContext>;

type ScriptableOptions

type ScriptableOptions<T, TContext> = { [P in keyof T]: Scriptable<T[P], TContext> };

type TextAlign

type TextAlign = 'left' | 'center' | 'right';

type TimeScaleOptions

type TimeScaleOptions = Omit<CartesianScaleOptions, 'min' | 'max'> & {
    min: string | number;
    max: string | number;
    suggestedMin: string | number;
    suggestedMax: string | number;
    /**
     * Scale boundary strategy (bypassed by min/max time options)
     * - `data`: make sure data are fully visible, ticks outside are removed
     * - `ticks`: make sure ticks are fully visible, data outside are truncated
     * @since 2.7.0
     * @default 'data'
     */
    bounds: 'ticks' | 'data';

    /**
     * If true, bar chart offsets are computed with skipped tick sizes
     * @since 3.8.0
     * @default false
     */
    offsetAfterAutoskip: boolean;

    /**
     * options for creating a new adapter instance
     */
    adapters: {
        date: unknown;
    };

    time: TimeScaleTimeOptions;

    ticks: TimeScaleTickOptions;
};

type TimeScaleTickOptions

type TimeScaleTickOptions = {
    /**
     * Ticks generation input values:
     * - 'auto': generates "optimal" ticks based on scale size and time options.
     * - 'data': generates ticks from data (including labels from data `{t|x|y}` objects).
     * - 'labels': generates ticks from user given `data.labels` values ONLY.
     * @see https://github.com/chartjs/Chart.js/pull/4507
     * @since 2.7.0
     * @default 'auto'
     */
    source: 'labels' | 'auto' | 'data';
    /**
     * The number of units between grid lines.
     * @default 1
     */
    stepSize: number;
};

type TimeScaleTimeOptions

type TimeScaleTimeOptions = {
    /**
     * Custom parser for dates.
     */
    parser: string | ((v: unknown) => number);
    /**
     * If defined, dates will be rounded to the start of this unit. See Time Units below for the allowed units.
     */
    round: false | TimeUnit;
    /**
     * If boolean and true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday.
     * If `number`, the index of the first day of the week (0 - Sunday, 6 - Saturday).
     * @default false
     */
    isoWeekday: boolean | number;
    /**
     * Sets how different time units are displayed.
     */
    displayFormats: {
        [key: string]: string;
    };
    /**
     * The format string to use for the tooltip.
     */
    tooltipFormat: string;
    /**
     * If defined, will force the unit to be a certain type. See Time Units section below for details.
     * @default false
     */
    unit: false | TimeUnit;
    /**
     * The minimum display format to be used for a time unit.
     * @default 'millisecond'
     */
    minUnit: TimeUnit;
};

type TimeSeriesScale

type TimeSeriesScale<O extends TimeScaleOptions = TimeScaleOptions> = TimeScale<O>;

type TimeUnit

type TimeUnit =
    | 'millisecond'
    | 'second'
    | 'minute'
    | 'hour'
    | 'day'
    | 'week'
    | 'month'
    | 'quarter'
    | 'year';

type TooltipPositioner

type TooltipPositioner = keyof TooltipPositionerMap;

type TooltipPositionerFunction

type TooltipPositionerFunction<TType extends ChartType> = (
    this: TooltipModel<TType>,
    items: readonly ActiveElement[],
    eventPosition: Point
) => TooltipPosition | false;

type TooltipXAlignment

type TooltipXAlignment = 'left' | 'center' | 'right';

type TooltipYAlignment

type TooltipYAlignment = 'top' | 'center' | 'bottom';

type TransitionSpec

type TransitionSpec<TType extends ChartType> = {
    animation: AnimationSpec<TType>;
    animations: AnimationsSpec<TType>;
};

type TransitionsSpec

type TransitionsSpec<TType extends ChartType> = {
    [mode: string]: TransitionSpec<TType>;
};

type TRBL

type TRBL = {
    top: number;
    right: number;
    bottom: number;
    left: number;
};

type UpdateMode

type UpdateMode = keyof typeof UpdateModeEnum;

Namespaces

namespace controllers

module 'dist/controllers/index.d.ts' {}

class BarController

class BarController extends DatasetController {}

property id

static id: string;

property overrides

static overrides: any;

{any}

method getFirstScaleIdForIndexAxis

getFirstScaleIdForIndexAxis: () => string;

method parseArrayData

protected parseArrayData: (
    meta: any,
    data: any,
    start: any,
    count: any
) => any[];

Overriding array data parsing since we support mixed primitive/array data for float bars

method parseObjectData

protected parseObjectData: (
    meta: any,
    data: any,
    start: any,
    count: any
) => any[];

Overriding object data parsing since we support mixed primitive/array value-scale data for float bars

method parsePrimitiveData

protected parsePrimitiveData: (
    meta: any,
    data: any,
    start: any,
    count: any
) => any[];

Overriding primitive data parsing since we support mixed primitive/array data for float bars

method update

update: (mode: any) => void;

class BubbleController

class BubbleController extends DatasetController {}

property id

static id: string;

property overrides

static overrides: any;

{any}

method getLabelAndValue

protected getLabelAndValue: (index: any) => { label: any; value: string };

method getMaxOverflow

protected getMaxOverflow: () => number;

method parseArrayData

protected parseArrayData: (meta: any, data: any, start: any, count: any) => any;

Parse array of arrays

method parseObjectData

protected parseObjectData: (meta: any, data: any, start: any, count: any) => any;

Parse array of objects

method parsePrimitiveData

protected parsePrimitiveData: (
    meta: any,
    data: any,
    start: any,
    count: any
) => any;

Parse array of primitive values

method update

update: (mode: any) => void;

class DoughnutController

class DoughnutController extends DatasetController {}

constructor

constructor(chart: any, datasetIndex: any);

property descriptors

static descriptors: {
    _scriptable: (name: any) => boolean;
    _indexable: (name: any) => boolean;
};

property id

static id: string;

property innerRadius

innerRadius: number;

property offsetX

offsetX: number;

property offsetY

offsetY: number;

property outerRadius

outerRadius: number;

property overrides

static overrides: any;

{any}

method calculateCircumference

calculateCircumference: (value: any) => number;

method calculateTotal

calculateTotal: () => number;

method getLabelAndValue

getLabelAndValue: (index: any) => { label: any; value: string };

method getMaxBorderWidth

getMaxBorderWidth: (arcs: any) => number;

method getMaxOffset

getMaxOffset: (arcs: any) => number;

method parse

parse: (start: any, count: any) => void;

Override data parsing, since we are not using scales

class LineController

class LineController extends DatasetController {}

property id

static id: string;

property overrides

static overrides: any;

{any}

method getMaxOverflow

protected getMaxOverflow: () => any;

method update

update: (mode: any) => void;

class PieController

class PieController extends DoughnutController {}

class PolarAreaController

class PolarAreaController extends DatasetController {}

constructor

constructor(chart: any, datasetIndex: any);

property id

static id: string;

property innerRadius

innerRadius: number;

property outerRadius

outerRadius: number;

property overrides

static overrides: any;

{any}

method countVisibleElements

countVisibleElements: () => number;

method getLabelAndValue

getLabelAndValue: (index: any) => { label: any; value: string };

method getMinMax

protected getMinMax: () => { min: number; max: number };

method parseObjectData

parseObjectData: (
    meta: any,
    data: any,
    start: any,
    count: any
) => { r: unknown }[];

method update

update: (mode: any) => void;

class RadarController

class RadarController extends DatasetController {}

property id

static id: string;

property overrides

static overrides: any;

{any}

method getLabelAndValue

protected getLabelAndValue: (index: any) => { label: any; value: string };

method parseObjectData

parseObjectData: (
    meta: any,
    data: any,
    start: any,
    count: any
) => { r: unknown }[];

method update

update: (mode: any) => void;

class ScatterController

class ScatterController extends DatasetController {}

property id

static id: string;

property overrides

static overrides: any;

{any}

method getLabelAndValue

protected getLabelAndValue: (index: any) => { label: any; value: string };

method getMaxOverflow

protected getMaxOverflow: () => any;

method update

update: (mode: any) => void;

namespace elements

module 'dist/elements/index.d.ts' {}

class ArcElement

class ArcElement extends Element<ArcProps, ArcOptions> {}

constructor

constructor(cfg: any);

property circumference

circumference: number;

property defaultRoutes

static defaultRoutes: { backgroundColor: string };

property defaults

static defaults: {
    borderAlign: string;
    borderColor: string;
    borderDash: any[];
    borderDashOffset: number;
    borderJoinStyle: any;
    borderRadius: number;
    borderWidth: number;
    offset: number;
    spacing: number;
    angle: any;
    circular: boolean;
    selfJoin: boolean;
};

property descriptors

static descriptors: { _scriptable: boolean; _indexable: (name: any) => boolean };

property endAngle

endAngle: number;

property fullCircles

fullCircles: number;

property id

static id: string;

property innerRadius

innerRadius: number;

property outerRadius

outerRadius: number;

property pixelMargin

pixelMargin: number;

property startAngle

startAngle: number;

method draw

draw: (ctx: CanvasRenderingContext2D) => void;

method getCenterPoint

getCenterPoint: (useFinalPosition: boolean) => { x: number; y: number };

method inRange

inRange: (chartX: number, chartY: number, useFinalPosition: boolean) => boolean;

method tooltipPosition

tooltipPosition: (useFinalPosition: boolean) => { x: number; y: number };

class BarElement

class BarElement extends Element<
    import('../types/basic.js').AnyObject,
    import('../types/basic.js').AnyObject
> {}

constructor

constructor(cfg: any);

property base

base: any;

property defaults

static defaults: any;

{any}

property height

height: any;

property horizontal

horizontal: any;

property id

static id: string;

property inflateAmount

inflateAmount: any;

property options

options: any;

property width

width: any;

method draw

draw: (ctx: any) => void;

method getCenterPoint

getCenterPoint: (useFinalPosition: any) => { x: number; y: number };

method getRange

getRange: (axis: any) => number;

method inRange

inRange: (mouseX: any, mouseY: any, useFinalPosition: any) => boolean;

method inXRange

inXRange: (mouseX: any, useFinalPosition: any) => boolean;

method inYRange

inYRange: (mouseY: any, useFinalPosition: any) => boolean;

class LineElement

class LineElement extends Element<
    import('../types/basic.js').AnyObject,
    import('../types/basic.js').AnyObject
> {}

constructor

constructor(cfg: any);

property animated

animated: boolean;

property defaults

static defaults: any;

{any}

property descriptors

static descriptors: { _scriptable: boolean; _indexable: (name: any) => boolean };

property id

static id: string;

property options

options: any;

property points

points: any;

property segments

readonly segments: Segment[];

method draw

draw: (
    ctx: CanvasRenderingContext2D,
    chartArea: object,
    start?: number,
    count?: number
) => void;

Draw
Parameter ctx
Parameter chartArea
Parameter start
Parameter count

method first

first: () => PointElement | undefined;

First non-skipped point on this line
Returns
{PointElement|undefined}

method interpolate

interpolate: (point: PointElement, property: string) => PointElement | undefined;

Interpolate a point in this line at the same value on property as the reference point provided
Parameter point
the reference point
Parameter property
the property to match on
Returns
{PointElement|undefined}

method last

last: () => PointElement | undefined;

Last non-skipped point on this line
Returns
{PointElement|undefined}

method path

path: (
    ctx: CanvasRenderingContext2D | Path2D,
    start?: number,
    count?: number
) => undefined | boolean;

Append all segments of this line to current path.
Parameter ctx
Parameter start
Parameter count
Returns
{undefined|boolean} - true if line is a full loop (path should be closed)

method pathSegment

pathSegment: (
    ctx: CanvasRenderingContext2D,
    segment: { start: number; end: number; loop: boolean },
    params: { move: boolean; reverse: boolean; start: number; end: number }
) => undefined | boolean;

Append a segment of this line to current path.
Parameter ctx
Parameter segment
Parameter
{number} segment.start - start index of the segment, referring the points array
Parameter
{number} segment.end - end index of the segment, referring the points array
Parameter
{boolean} segment.loop - indicates that the segment is a loop
Parameter params
Parameter
{boolean} params.move - move to starting point (vs line to it)
Parameter
{boolean} params.reverse - path the segment from end to start
Parameter
{number} params.start - limit segment to points starting from start index
Parameter
{number} params.end - limit segment to points ending at start + count index
Returns
{undefined|boolean} - true if the segment is a full loop (path should be closed)

method updateControlPoints

updateControlPoints: (chartArea: any, indexAxis: any) => void;

class PointElement

class PointElement extends Element<PointProps, PointOptions & PointHoverOptions> {}

constructor

constructor(cfg: any);

property defaultRoutes

static defaultRoutes: { backgroundColor: string; borderColor: string };

{any}

property defaults

static defaults: {
    borderWidth: number;
    hitRadius: number;
    hoverBorderWidth: number;
    hoverRadius: number;
    pointStyle: string;
    radius: number;
    rotation: number;
};

{any}

property id

static id: string;

property parsed

parsed: CartesianParsedData;

property skip

skip?: boolean;

property stop

stop?: boolean;

method draw

draw: (ctx: CanvasRenderingContext2D, area: ChartArea) => void;

method getCenterPoint

getCenterPoint: (useFinalPosition?: boolean) => { x: number; y: number };

method getRange

getRange: () => any;

method inRange

inRange: (mouseX: number, mouseY: number, useFinalPosition?: boolean) => boolean;

method inXRange

inXRange: (mouseX: number, useFinalPosition?: boolean) => boolean;

method inYRange

inYRange: (mouseY: number, useFinalPosition?: boolean) => boolean;

method size

size: (options?: Partial<PointOptions & PointHoverOptions>) => number;

namespace plugins

module 'dist/plugins/index.d.ts' {}

variable Colors

const Colors: {
    id: string;
    defaults: ColorsPluginOptions;
    beforeLayout(chart: Chart, _args: any, options: ColorsPluginOptions): void;
};

namespace plugins.Decimation

namespace plugins.Decimation {}

variable id

const id: string;

function beforeElementsUpdate

beforeElementsUpdate: (chart: any, args: any, options: any) => void;

function destroy

destroy: (chart: any) => void;

namespace plugins.Decimation.defaults

namespace plugins.Decimation.defaults {}

variable algorithm

const algorithm: string;

variable enabled

const enabled: boolean;

namespace plugins.Filler

namespace plugins.Filler {}

variable id

const id: string;

function afterDatasetsUpdate

afterDatasetsUpdate: (chart: any, _args: any, options: any) => void;

function beforeDatasetDraw

beforeDatasetDraw: (chart: any, args: any, options: any) => void;

function beforeDatasetsDraw

beforeDatasetsDraw: (chart: any, _args: any, options: any) => void;

function beforeDraw

beforeDraw: (chart: any, _args: any, options: any) => void;

namespace plugins.Filler.defaults

namespace plugins.Filler.defaults {}

variable drawTime

const drawTime: string;

variable propagate

const propagate: boolean;

namespace plugins.Legend

namespace plugins.Legend {}

variable id

const id: string;

function afterEvent

afterEvent: (chart: any, args: any) => void;

function afterUpdate

afterUpdate: (chart: any) => void;

function beforeUpdate

beforeUpdate: (chart: any, _args: any, options: any) => void;

function start

start: (chart: any, _args: any, options: any) => void;

function stop

stop: (chart: any) => void;

namespace plugins.Legend.defaults

namespace plugins.Legend.defaults {}

variable align

const align: string;

variable display

const display: boolean;

variable fullSize

const fullSize: boolean;

variable onHover

const onHover: any;

variable onLeave

const onLeave: any;

variable position

const position: string;

variable reverse

const reverse: boolean;

variable weight

const weight: number;

function onClick

onClick: (e: any, legendItem: any, legend: any) => void;

namespace plugins.Legend.defaults.labels

namespace plugins.Legend.defaults.labels {}

variable boxWidth

const boxWidth: number;

variable padding

const padding: number;

function color

color: (ctx: any) => any;

function generateLabels

generateLabels: (chart: any) => any;

namespace plugins.Legend.defaults.title

namespace plugins.Legend.defaults.title {}

variable display

const display: boolean;

variable position

const position: string;

variable text

const text: string;

function color

color: (ctx: any) => any;

function color_1

color_1: (ctx: any) => any;

namespace plugins.Legend.descriptors

namespace plugins.Legend.descriptors {}

namespace plugins.Legend.descriptors.labels

namespace plugins.Legend.descriptors.labels {}

namespace plugins.Legend.descriptors.labels_1

namespace plugins.Legend.descriptors.labels_1 {}

namespace plugins.SubTitle

namespace plugins.SubTitle {}

variable id

const id: string;

function beforeUpdate

beforeUpdate: (chart: any, _args: any, options: any) => void;

function start

start: (chart: any, _args: any, options: any) => void;

function stop

stop: (chart: any) => void;

namespace plugins.SubTitle.defaultRoutes

namespace plugins.SubTitle.defaultRoutes {}

variable color

const color: string;

namespace plugins.SubTitle.defaults

namespace plugins.SubTitle.defaults {}

variable align

const align: string;

variable display

const display: boolean;

variable fullSize

const fullSize: boolean;

variable padding

const padding: number;

variable position

const position: string;

variable text

const text: string;

variable weight

const weight: number;

namespace plugins.SubTitle.defaults.font

namespace plugins.SubTitle.defaults.font {}

variable weight

const weight: string;

namespace plugins.SubTitle.descriptors

namespace plugins.SubTitle.descriptors {}

namespace plugins.Title

namespace plugins.Title {}

variable id

const id: string;

function beforeUpdate

beforeUpdate: (chart: any, _args: any, options: any) => void;

function start

start: (chart: any, _args: any, options: any) => void;

function stop

stop: (chart: any) => void;

namespace plugins.Title.defaultRoutes

namespace plugins.Title.defaultRoutes {}

variable color

const color: string;

namespace plugins.Title.defaults

namespace plugins.Title.defaults {}

variable align

const align: string;

variable display

const display: boolean;

variable fullSize

const fullSize: boolean;

variable padding

const padding: number;

variable position

const position: string;

variable text

const text: string;

variable weight

const weight: number;

namespace plugins.Title.defaults.font

namespace plugins.Title.defaults.font {}

variable weight

const weight: string;

namespace plugins.Title.descriptors

namespace plugins.Title.descriptors {}

namespace plugins.Tooltip

namespace plugins.Tooltip {}

variable additionalOptionScopes

const additionalOptionScopes: string[];

variable id

const id: string;

function afterDraw

afterDraw: (chart: any) => void;

function afterEvent

afterEvent: (chart: any, args: any) => void;

function afterInit

afterInit: (chart: any, _args: any, options: any) => void;

function beforeUpdate

beforeUpdate: (chart: any, _args: any, options: any) => void;

function reset

reset: (chart: any, _args: any, options: any) => void;

namespace plugins.Tooltip.defaultRoutes

namespace plugins.Tooltip.defaultRoutes {}

variable bodyFont

const bodyFont: string;

variable footerFont

const footerFont: string;

variable titleFont

const titleFont: string;

namespace plugins.Tooltip.defaults

namespace plugins.Tooltip.defaults {}

variable backgroundColor

const backgroundColor: string;

variable bodyAlign

const bodyAlign: string;

variable bodyColor

const bodyColor: string;

variable bodyFont

const bodyFont: {};

variable bodySpacing

const bodySpacing: number;

variable borderColor

const borderColor: string;

variable borderWidth

const borderWidth: number;

variable boxPadding

const boxPadding: number;

variable caretPadding

const caretPadding: number;

variable caretSize

const caretSize: number;

variable cornerRadius

const cornerRadius: number;

variable displayColors

const displayColors: boolean;

variable enabled

const enabled: boolean;

variable external

const external: any;

variable footerAlign

const footerAlign: string;

variable footerColor

const footerColor: string;

variable footerMarginTop

const footerMarginTop: number;

variable footerSpacing

const footerSpacing: number;

variable multiKeyBackground

const multiKeyBackground: string;

variable padding

const padding: number;

variable position

const position: string;

variable titleAlign

const titleAlign: string;

variable titleColor

const titleColor: string;

variable titleMarginBottom

const titleMarginBottom: number;

variable titleSpacing

const titleSpacing: number;

function boxHeight

boxHeight: (ctx: any, opts: any) => any;

function boxWidth

boxWidth: (ctx: any, opts: any) => any;

namespace plugins.Tooltip.defaults.animation

namespace plugins.Tooltip.defaults.animation {}

variable duration

const duration: number;

variable easing

const easing: string;

namespace plugins.Tooltip.defaults.animations

namespace plugins.Tooltip.defaults.animations {}

namespace plugins.Tooltip.defaults.animations.numbers

namespace plugins.Tooltip.defaults.animations.numbers {}

variable properties

const properties: string[];

variable type

const type: string;

namespace plugins.Tooltip.defaults.animations.opacity

namespace plugins.Tooltip.defaults.animations.opacity {}

variable duration

const duration: number;

variable easing

const easing: string;

namespace plugins.Tooltip.defaults.callbacks

namespace plugins.Tooltip.defaults.callbacks {}

function afterBody

afterBody: () => void;

An empty function that can be used, for example, for optional callback.

function afterFooter

afterFooter: () => void;

An empty function that can be used, for example, for optional callback.

function afterLabel

afterLabel: () => void;

An empty function that can be used, for example, for optional callback.

function afterTitle

afterTitle: () => void;

An empty function that can be used, for example, for optional callback.

function beforeBody

beforeBody: () => void;

An empty function that can be used, for example, for optional callback.

function beforeFooter

beforeFooter: () => void;

An empty function that can be used, for example, for optional callback.

function beforeLabel

beforeLabel: () => void;

An empty function that can be used, for example, for optional callback.

function beforeTitle

beforeTitle: () => void;

An empty function that can be used, for example, for optional callback.

footer: () => void;

An empty function that can be used, for example, for optional callback.

function label

label: (tooltipItem: any) => any;

function labelColor

labelColor: (tooltipItem: any) => {
    borderColor: any;
    backgroundColor: any;
    borderWidth: any;
    borderDash: any;
    borderDashOffset: any;
    borderRadius: number;
};

function labelPointStyle

labelPointStyle: (tooltipItem: any) => { pointStyle: any; rotation: any };

function labelTextColor

labelTextColor: () => any;

function title

title: (tooltipItems: any) => any;

namespace plugins.Tooltip.defaults.footerFont

namespace plugins.Tooltip.defaults.footerFont {}

variable weight

const weight: string;

namespace plugins.Tooltip.defaults.titleFont

namespace plugins.Tooltip.defaults.titleFont {}

variable weight

const weight: string;

namespace plugins.Tooltip.descriptors

namespace plugins.Tooltip.descriptors {}

namespace plugins.Tooltip.descriptors.animation

namespace plugins.Tooltip.descriptors.animation {}

namespace plugins.Tooltip.descriptors.animation_1

namespace plugins.Tooltip.descriptors.animation_1 {}

namespace plugins.Tooltip.descriptors.animations

namespace plugins.Tooltip.descriptors.animations {}

namespace plugins.Tooltip.descriptors.animations_1

namespace plugins.Tooltip.descriptors.animations_1 {}

namespace plugins.Tooltip.descriptors.callbacks

namespace plugins.Tooltip.descriptors.callbacks {}

namespace plugins.Tooltip.positioners

namespace plugins.Tooltip.positioners {}

function average

average: (items: any) => false | { x: number; y: number };

Average mode places the tooltip at the average position of the elements shown

function nearest

nearest: (items: any, eventPosition: any) => false | { x: any; y: any };

Gets the tooltip position nearest of the item nearest to the event position

namespace scales

module 'dist/scales/index.d.ts' {}

class CategoryScale

class CategoryScale extends Scale {}

property defaults

static defaults: any;

{any}

property id

static id: string;

method buildTicks

buildTicks: () => { value: any }[];

method getLabelForValue

getLabelForValue: (value: any) => any;

method getPixelForTick

getPixelForTick: (index: any) => number;

method getPixelForValue

getPixelForValue: (value: any) => number;

method getValueForPixel

getValueForPixel: (pixel: any) => number;

method init

init: (scaleOptions: any) => void;

method parse

parse: (raw: any, index: any) => number;

class LinearScale

class LinearScale extends LinearScaleBase {}

property defaults

static defaults: any;

{any}

property id

static id: string;

method getPixelForValue

getPixelForValue: (value: any) => number;

method getValueForPixel

getValueForPixel: (pixel: any) => number;

class LogarithmicScale

class LogarithmicScale extends Scale {}

property defaults

static defaults: any;

{any}

property end

end: number;

{number}

property id

static id: string;

property start

start: number;

{number}

method getLabelForValue

getLabelForValue: (value: number) => string;

Parameter value
{string}

method getPixelForValue

getPixelForValue: (value: any) => number;

method getValueForPixel

getValueForPixel: (pixel: any) => number;

method handleTickRangeOptions

handleTickRangeOptions: () => void;

method parse

parse: (raw: any, index: any) => number;

class RadialLinearScale

class RadialLinearScale extends LinearScaleBase {}

property defaultRoutes

static defaultRoutes: {
    'angleLines.color': string;
    'pointLabels.color': string;
    'ticks.color': string;
};

property defaults

static defaults: any;

{any}

property descriptors

static descriptors: { angleLines: { _fallback: string } };

property drawingArea

drawingArea: number;

{number}

property id

static id: string;

property xCenter

xCenter: number;

{number}

property yCenter

yCenter: number;

{number}

method drawGrid

protected drawGrid: () => void;

method drawLabels

protected drawLabels: () => void;

method generateTickLabels

generateTickLabels: (ticks: any) => void;

method getBasePosition

getBasePosition: (index: any) => { x: number; y: number; angle: number };

method getDistanceFromCenterForValue

getDistanceFromCenterForValue: (value: any) => number;

method getIndexAngle

getIndexAngle: (index: any) => number;

method getPointLabelContext

getPointLabelContext: (index: any) => any;

method getPointLabelPosition

getPointLabelPosition: (index: any) => {
    left: any;
    top: any;
    right: any;
    bottom: any;
};

method getPointPosition

getPointPosition: (
    index: any,
    distanceFromCenter: any,
    additionalAngle?: number
) => { x: number; y: number; angle: number };

method getPointPositionForValue

getPointPositionForValue: (
    index: any,
    value: any
) => { x: number; y: number; angle: number };

method getValueForDistanceFromCenter

getValueForDistanceFromCenter: (distance: any) => any;

method setCenterPoint

setCenterPoint: (
    leftMovement: any,
    rightMovement: any,
    topMovement: any,
    bottomMovement: any
) => void;

class TimeScale

class TimeScale extends Scale {}

constructor

constructor(props: {});

Parameter props

property defaults

static defaults: any;

{any}

property id

static id: string;

method format

format: (value: number, format: string | undefined) => string;

Parameter value
Parameter format
{string}

method generateTickLabels

generateTickLabels: (ticks: object[]) => void;

Parameter ticks

method getDataTimestamps

protected getDataTimestamps: () => any;

method getDecimalForValue

getDecimalForValue: (value: number) => number;

Parameter value
Milliseconds since epoch (1 January 1970 00:00:00 UTC) {number}

method getLabelForValue

getLabelForValue: (value: number) => string;

Parameter value
{string}

method getLabelTimestamps

protected getLabelTimestamps: () => number[];

method getPixelForValue

getPixelForValue: (value: number) => number;

Parameter value
Milliseconds since epoch (1 January 1970 00:00:00 UTC) {number}

method getValueForPixel

getValueForPixel: (pixel: number) => number;

Parameter pixel
{number}

method init

init: (scaleOpts: any, opts?: {}) => void;

method initOffsets

protected initOffsets: (timestamps?: number[]) => void;

Returns the start and end offsets from edges in the form of {start, end} where each value is a relative width to the scale and ranges between 0 and 1. They add extra margins on the both sides by scaling down the original scale. Offsets are added when the offset option is true.
Parameter timestamps

method normalize

protected normalize: (values: number[]) => number[];

Parameter values

method parse

parse: (raw: any, index?: number | null) => number;

Parameter raw
Parameter index
{number}

class TimeSeriesScale

class TimeSeriesScale extends TimeScale {}

method buildLookupTable

protected buildLookupTable: (timestamps: number[]) => object[];

Returns an array of {time, pos} objects used to interpolate a specific time or position (pos) on the scale, by searching entries before and after the requested value. pos is a decimal between 0 and 1: 0 being the start of the scale (left or top) and 1 the other extremity (left + width or top + height). Note that it would be more optimized to directly store pre-computed pixels, but the scale dimensions are not guaranteed at the time we need to create the lookup table. The table ALWAYS contains at least two items: min and max.
Parameter timestamps
{object[]}

method initOffsets

protected initOffsets: () => void;

Package Files (40)

Dependencies (1)

@kurkle/color

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/chart.js.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/chart.js)

HTML

<a href="https://www.jsdocs.io/package/chart.js"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 months ago.
Package analyzed in 16580 ms.
Missing or incorrect documentation? Open an issue for this package.

chart.js

Install

Overview

Index

Variables

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable animator

variable BarController

variable BarElement

variable BubbleController

variable CategoryScale

variable Colors

variable Decimation

variable defaults

variable DoughnutController

variable Filler

variable Interaction

variable layouts

variable Legend

variable LinearScale

variable LineController

variable LineElement

variable LogarithmicScale

variable PieController

variable PolarAreaController

variable RadarController

variable RadialLinearScale

variable registerables

variable registry

variable ScatterController

variable SubTitle

variable Ticks

variable TimeScale

variable TimeSeriesScale

variable Title

variable Tooltip

Classes

class Animation

constructor

method active

method cancel

method tick

method update

class Animations

constructor

method configure

method update

class Animator

method add

method has

method listen

method remove

method running

method start

method stop

class ArcElement

constructor

property circumference

property defaultRoutes

property defaults

property descriptors

property endAngle

property fullCircles

property id

property innerRadius

property outerRadius

property pixelMargin

property startAngle

method draw

method getCenterPoint

method inRange

method tooltipPosition

class BasePlatform

method acquireContext

Parameter canvas