# Interface: Defaults

# Hierarchy

# Properties

# animation

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

Inherited from: CoreChartOptions.animation

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


# animations

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

Inherited from: CoreChartOptions.animations

Defined in: index.esm.d.ts:1537 (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.aspectRatio

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


# backgroundColor

backgroundColor: Color

base background color

see Defaults.backgroundColor

Inherited from: CoreChartOptions.backgroundColor

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


# borderColor

borderColor: Color

base border color

see Defaults.borderColor

Inherited from: CoreChartOptions.borderColor

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


# color

color: Color

base color

see Defaults.color

Inherited from: CoreChartOptions.color

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


# datasets

datasets: object

# Type declaration:

Name Type
bar
bubble
doughnut
line
pie
polarArea
radar
scatter

Inherited from: CoreChartOptions.datasets

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


# devicePixelRatio

devicePixelRatio: number

Override the window's default devicePixelRatio.

default window.devicePixelRatio

Inherited from: CoreChartOptions.devicePixelRatio

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


# elements

elements: Partial<ElementOptionsByType>

Inherited from: ElementChartOptions.elements

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


# 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']

Inherited from: CoreChartOptions.events

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


# font

font: FontSpec

base font

see Defaults.font

Inherited from: CoreChartOptions.font

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


# hover

hover: CoreInteractionOptions

Inherited from: CoreChartOptions.hover

Defined in: index.esm.d.ts:1414 (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.indexAxis

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


# interaction

interaction: CoreInteractionOptions

Inherited from: CoreChartOptions.interaction

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


# layout

layout: object

# Type declaration:

Name Type
padding Scriptable<number | ChartArea, ScriptableContext<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>>

Inherited from: CoreChartOptions.layout

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


# locale

locale: string

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

default user's browser setting

Inherited from: CoreChartOptions.locale

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


# maintainAspectRatio

maintainAspectRatio: boolean

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

default true

Inherited from: CoreChartOptions.maintainAspectRatio

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


# 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: CoreChartOptions.normalized

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


# 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: CoreChartOptions.parsing

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


# plugins

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

Inherited from: PluginChartOptions.plugins

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


# responsive

responsive: boolean

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

default true

Inherited from: CoreChartOptions.responsive

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


# scale

scale: ScaleOptionsByType<linear | logarithmic | category | time | timeseries | radialLinear>

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


# scales

scales: object

# Type declaration:

Name Type
category
linear
logarithmic
radialLinear
time
timeseries

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


# transitions

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

Inherited from: CoreChartOptions.transitions

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

# Methods

# describe

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

# Parameters:

Name Type
scope string
values Record<string, unknown>

Returns: Record<string, unknown>

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


# get

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

# Parameters:

Name Type
scope string

Returns: Record<string, unknown>

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


# onClick

onClick(event: ChartEvent, elements: ActiveElement[], chart: Chart<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | 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:

Name Type
event ChartEvent
elements ActiveElement[]
chart Chart<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>

Returns: void

Inherited from: CoreChartOptions

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


# onHover

onHover(event: ChartEvent, elements: ActiveElement[], chart: Chart<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | 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:

Name Type
event ChartEvent
elements ActiveElement[]
chart Chart<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>

Returns: void

Inherited from: CoreChartOptions

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


# onResize

onResize(chart: Chart<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | 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:

Name Type
chart Chart<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>
size object
size.height number
size.width number

Returns: void

Inherited from: CoreChartOptions

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


# override

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

# Parameters:

Name Type
scope string
values Record<string, unknown>

Returns: Record<string, unknown>

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


# 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

# Parameters:

Name Type Description
scope string Scope this route applies to.
name string Property name that should be routed to different namespace when not defined here.
targetScope string The namespace where those properties should be routed to. Empty string ('') is the root of defaults.
targetName string The target name in the target scope the property should be routed to.

Returns: void

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


# set

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

# Parameters:

Name Type
values Record<string, unknown>

Returns: Record<string, unknown>

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

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

# Parameters:

Name Type
scope string
values Record<string, unknown>

Returns: Record<string, unknown>

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