Interface: Defaults

• ElementChartOptions<>

• PluginChartOptions<>

  ↳ Defaults

• animation: | AnimationSpec<"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar"> & { onComplete?: (event: ) => void ; onProgress?: (event: AnimationEvent) => void }

Inherited from: .animation

Defined in:

animations

• animations: <"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar">

Inherited from: CoreChartOptions.

Defined in: index.esm.d.ts:1543 (opens new window)

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.

default 2

Inherited from: CoreChartOptions.

Defined in: index.esm.d.ts:1399 (opens new window)

backgroundColor

• backgroundColor: Color

base background color

see Defaults.backgroundColor

Inherited from: .backgroundColor

Defined in:

borderColor

• borderColor:

base border color

see Defaults.borderColor

Inherited from: CoreChartOptions.

Defined in: index.esm.d.ts:1378 (opens new window)

color

• color: Color

base color

see Defaults.color

Inherited from: .color

Defined in:

datasets

• datasets: object

Type declaration

Inherited from: CoreChartOptions.

Defined in: index.esm.d.ts:1354 (opens new window)

devicePixelRatio

• devicePixelRatio: number

Override the window’s default devicePixelRatio.

default window.devicePixelRatio

Inherited from: CoreChartOptions.

Defined in: index.esm.d.ts:1416 (opens new window)

elements

• elements: ElementOptionsByType<"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar">

Inherited from: ElementChartOptions.elements

Defined in:

events

• events: ("mousemove" | "mouseout" | "click" | "touchstart" | "touchmove")[]

The events option defines the browser events that the chart should listen to for tooltips and hovering.

default [‘mousemove’, ‘mouseout’, ‘click’, ‘touchstart’, ‘touchmove’]

Defined in:

• font: FontSpec

base font

see Defaults.font

Inherited from: .font

Defined in:

hover

• hover:

Inherited from: CoreChartOptions.

Defined in: index.esm.d.ts:1420 (opens new window)

indexAxis

• indexAxis: "x" | "y"

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

default ‘x’

Inherited from: CoreChartOptions.

Defined in: index.esm.d.ts:1362 (opens new window)

interaction

• interaction: CoreInteractionOptions

Inherited from: .interaction

Defined in:

layout

• layout: object

Type declaration

Inherited from: .layout

Defined in:

locale

• locale: string

Locale used for number formatting (using Intl.NumberFormat).

user’s browser setting

Inherited from: .locale

Defined in:

maintainAspectRatio

• maintainAspectRatio: boolean

Maintain the original canvas aspect ratio (width / height) when resizing.

default true

Inherited from: .maintainAspectRatio

Defined in:

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.

Inherited from: .normalized

Defined in:

parsing

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

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.

Inherited from: .parsing

Defined in:

plugins

• plugins: <"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar">

Inherited from: PluginChartOptions.

Defined in: index.esm.d.ts:2627 (opens new window)

• responsive: boolean

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

Inherited from: .responsive

Defined in:

scale

• scale: <"linear" | "logarithmic" | "category" | "time" | "timeseries" | "radialLinear">

Defined in: index.esm.d.ts:609 (opens new window)

scales

• scales: object

Type declaration

Defined in:

transitions

• transitions: <"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar">

Inherited from: CoreChartOptions.

Defined in: index.esm.d.ts:1544 (opens new window)

describe

▸ describe(scope: string, values: Record<string, unknown>): Record<string, unknown>

Parameters

Returns: Record<string, unknown>

Defined in:

get

▸ get(scope: string): Record<string, unknown>

Parameters

Returns: Record<string, unknown>

Defined in: index.esm.d.ts:616 (opens new window)

onClick

▸ onClick(event: ChartEvent, elements: [], chart: Chart<"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar", (number | | BubbleDataPoint)[], unknown>): void

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

Parameters

Returns: void

Inherited from:

Defined in: index.esm.d.ts:1436 (opens new window)

onHover

▸ onHover(event: ChartEvent, elements: [], : Chart<"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar", (number | | BubbleDataPoint)[], unknown>): void

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

Parameters

Returns: void

Inherited from:

Defined in: index.esm.d.ts:1431 (opens new window)

onResize

▸ onResize(chart: Chart<"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar", (number | | BubbleDataPoint)[], unknown>, size: { height: number ; width: number }): void

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

Parameters

Returns: void

Inherited from:

Defined in: index.esm.d.ts:1410 (opens new window)

override

▸ override(scope: string, values: Record<string, unknown>): Record<string, unknown>

Parameters

Returns: Record<string, unknown>

Defined in:

▸ 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’)

Parameters

Returns: void

Defined in:

set

▸ set(values: Record<string, unknown>): Record<string, unknown>

Parameters

Returns: Record<string, unknown>

Defined in: index.esm.d.ts:614 (opens new window)

▸ set(scope: string, values: Record<string, unknown>): Record<string, unknown>

Parameters

Defined in: index.esm.d.ts:615 (opens new window)