# Interface: Defaults

# Hierarchy

# Properties

# animation

animation: false | AnimationSpec<keyof ChartTypeRegistry> & { onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>, event: AnimationEvent) => void ; onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>, event: AnimationEvent) => void }

# Inherited from

CoreChartOptions.animation

# Defined in

types/index.d.ts:1747


# animations

animations: AnimationsSpec<keyof ChartTypeRegistry>

# Inherited from

CoreChartOptions.animations

# Defined in

types/index.d.ts:1757


# 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

types/index.d.ts:1645


# backgroundColor

backgroundColor: Scriptable<Color, ScriptableContext<keyof ChartTypeRegistry>>

base background color

See

Defaults.backgroundColor

# Inherited from

CoreChartOptions.backgroundColor

# Defined in

types/index.d.ts:1614


# borderColor

borderColor: Scriptable<Color, ScriptableContext<keyof ChartTypeRegistry>>

base border color

See

Defaults.borderColor

# Inherited from

CoreChartOptions.borderColor

# Defined in

types/index.d.ts:1619


# clip

clip: number | false | ChartArea

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}

# Inherited from

CoreChartOptions.clip

# Defined in

types/index.d.ts:1603


# color

color: Scriptable<Color, ScriptableContext<keyof ChartTypeRegistry>>

base color

See

Defaults.color

# Inherited from

CoreChartOptions.color

# Defined in

types/index.d.ts:1609


# datasets

datasets: Object

# Type declaration

Name Type
bar BarControllerDatasetOptions
bubble BubbleControllerDatasetOptions
doughnut DoughnutControllerDatasetOptions
line LineControllerDatasetOptions & FillerControllerDatasetOptions
pie DoughnutControllerDatasetOptions
polarArea PolarAreaControllerDatasetOptions
radar RadarControllerDatasetOptions & FillerControllerDatasetOptions
scatter LineControllerDatasetOptions

# Inherited from

CoreChartOptions.datasets

# Defined in

types/index.d.ts:1590


# devicePixelRatio

devicePixelRatio: number

Override the window's default devicePixelRatio.

Default

window.devicePixelRatio

# Inherited from

CoreChartOptions.devicePixelRatio

# Defined in

types/index.d.ts:1662


# elements

elements: ElementOptionsByType<keyof ChartTypeRegistry>

# Inherited from

ElementChartOptions.elements

# Defined in

types/index.d.ts:2137


# events

events: keyof HTMLElementEventMap[]

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

types/index.d.ts:1672


# font

font: Partial<FontSpec>

base font

See

Defaults.font

# Inherited from

CoreChartOptions.font

# Defined in

types/index.d.ts:1624


# hover

hover: CoreInteractionOptions

# Inherited from

CoreChartOptions.hover

# Defined in

types/index.d.ts:1666


# 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

types/index.d.ts:1598


# interaction

interaction: CoreInteractionOptions

# Inherited from

CoreChartOptions.interaction

# Defined in

types/index.d.ts:1664


# layout

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

# Inherited from

CoreChartOptions.layout

# Defined in

types/index.d.ts:1684


# locale

locale: string

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

Default

user's browser setting

# Inherited from

CoreChartOptions.locale

# Defined in

types/index.d.ts:1651


# 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.

Default

true

# Inherited from

CoreChartOptions.maintainAspectRatio

# Defined in

types/index.d.ts:1634


# 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

types/index.d.ts:63


# 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

types/index.d.ts:54


# plugins

plugins: PluginOptionsByType<keyof ChartTypeRegistry>

# Inherited from

PluginChartOptions.plugins

# Defined in

types/index.d.ts:2951


# resizeDelay

resizeDelay: number

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

Default

0

# Inherited from

CoreChartOptions.resizeDelay

# Defined in

types/index.d.ts:1639


# responsive

responsive: boolean

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

Default

true

# Inherited from

CoreChartOptions.responsive

# Defined in

types/index.d.ts:1629


# scale

scale: ScaleOptionsByType<keyof ScaleTypeRegistry>

# Defined in

types/index.d.ts:668


# scales

scales: Object

# Type declaration

Name Type
category { type: "category" } & Omit<CartesianScaleOptions, "max" | "min"> & { labels: string[] | string[][] ; max: string | number ; min: string | number }
linear { type: "linear" } & CartesianScaleOptions & { beginAtZero: boolean ; grace?: string | number ; suggestedMax?: number ; suggestedMin?: number ; ticks: { count: number ; format: NumberFormatOptions ; precision: number ; stepSize: number } }
logarithmic { type: "logarithmic" } & CartesianScaleOptions & { suggestedMax?: number ; suggestedMin?: number ; ticks: { format: NumberFormatOptions } }
radialLinear { type: "radialLinear" } & CoreScaleOptions & { angleLines: { borderDash: Scriptable<number[], ScriptableScaleContext> ; borderDashOffset: Scriptable<number, ScriptableScaleContext> ; color: Scriptable<Color, ScriptableScaleContext> ; display: boolean ; lineWidth: Scriptable<number, ScriptableScaleContext> } ; animate: boolean ; beginAtZero: boolean ; grid: Partial<GridLineOptions> ; max: number ; min: number ; pointLabels: { backdropColor: Scriptable<Color, ScriptableScalePointLabelContext> ; backdropPadding: Scriptable<number | ChartArea, ScriptableScalePointLabelContext> ; borderRadius: Scriptable<number | BorderRadius, ScriptableScalePointLabelContext> ; callback: (label: string, index: number) => string | number | string[] | number[] ; centerPointLabels: boolean ; color: Scriptable<Color, ScriptableScalePointLabelContext> ; display: boolean | "auto" ; font: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableScalePointLabelContext> ; padding: Scriptable<number, ScriptableScalePointLabelContext> } ; startAngle: number ; suggestedMax: number ; suggestedMin: number ; ticks: RadialTickOptions }
time { type: "time" } & Omit<CartesianScaleOptions, "max" | "min"> & { adapters: { date: unknown } ; bounds: "data" | "ticks" ; max: string | number ; min: string | number ; offsetAfterAutoskip: boolean ; suggestedMax: string | number ; suggestedMin: string | number ; ticks: TimeScaleTickOptions ; time: TimeScaleTimeOptions }
timeseries { type: "timeseries" } & Omit<CartesianScaleOptions, "max" | "min"> & { adapters: { date: unknown } ; bounds: "data" | "ticks" ; max: string | number ; min: string | number ; offsetAfterAutoskip: boolean ; suggestedMax: string | number ; suggestedMin: string | number ; ticks: TimeScaleTickOptions ; time: TimeScaleTimeOptions }

# Defined in

types/index.d.ts:669


# transitions

transitions: TransitionsSpec<keyof ChartTypeRegistry>

# Inherited from

CoreChartOptions.transitions

# Defined in

types/index.d.ts:1758

# Methods

# describe

describe(scope, values): AnyObject

# Parameters

Name Type
scope string
values AnyObject

# Returns

AnyObject

# Defined in

types/index.d.ts:677


# get

get(scope): AnyObject

# Parameters

Name Type
scope string

# Returns

AnyObject

# Defined in

types/index.d.ts:675


# onClick

onClick(event, elements, chart): 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<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>

# Returns

void

# Inherited from

CoreChartOptions.onClick

# Defined in

types/index.d.ts:1682


# onHover

onHover(event, elements, chart): 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<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>

# Returns

void

# Inherited from

CoreChartOptions.onHover

# Defined in

types/index.d.ts:1677


# onResize

onResize(chart, size): void

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

# Parameters

Name Type
chart Chart<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>
size Object
size.height number
size.width number

# Returns

void

# Inherited from

CoreChartOptions.onResize

# Defined in

types/index.d.ts:1656


# override

override(scope, values): AnyObject

# Parameters

Name Type
scope string
values AnyObject

# Returns

AnyObject

# Defined in

types/index.d.ts:678


# route

route(scope, name, targetScope, targetName): 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

types/index.d.ts:697


# set

set(values): AnyObject

# Parameters

Name Type
values AnyObject

# Returns

AnyObject

# Defined in

types/index.d.ts:673

set(scope, values): AnyObject

# Parameters

Name Type
scope string
values AnyObject

# Returns

AnyObject

# Defined in

types/index.d.ts:674