Interface: Defaults | Chart.js
Description: Open source HTML5 Charts for your website

# # Interface: Defaults

## # Hierarchy

- `CoreChartOptions`<`ChartType`>

- `ElementChartOptions`<`ChartType`>

- `PluginChartOptions`<`ChartType`>

  ↳ `Defaults`

## # Properties

### # animation

• animation: `false` | `AnimationSpec`<keyof `ChartTypeRegistry`> & { `onComplete?`: (`event`: `AnimationEvent`) => `void` ; `onProgress?`: (`event`: `AnimationEvent`) => `void` }

#### # Inherited from

CoreChartOptions.animation

#### # Defined in

index.esm.d.ts:1640
(opens new window)

### # animations

• animations: `AnimationsSpec`<keyof `ChartTypeRegistry`>

#### # Inherited from

CoreChartOptions.animations

#### # Defined in

index.esm.d.ts:1650
(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:1505
(opens new window)

### # backgroundColor

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

base background color

`see` Defaults.backgroundColor

#### # Inherited from

CoreChartOptions.backgroundColor

#### # Defined in

index.esm.d.ts:1474
(opens new window)

### # borderColor

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

base border color

`see` Defaults.borderColor

#### # Inherited from

CoreChartOptions.borderColor

#### # Defined in

index.esm.d.ts:1479
(opens new window)

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

index.esm.d.ts:1463
(opens new window)

### # color

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

base color

`see` Defaults.color

#### # Inherited from

CoreChartOptions.color

#### # Defined in

index.esm.d.ts:1469
(opens new window)

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

index.esm.d.ts:1450
(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:1522
(opens new window)

### # elements

• elements: `ElementOptionsByType`<keyof `ChartTypeRegistry`>

#### # Inherited from

ElementChartOptions.elements

#### # Defined in

index.esm.d.ts:2047
(opens new window)

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

index.esm.d.ts:1532
(opens new window)

### # font

• font: `Partial`<`FontSpec`>

base font

`see` Defaults.font

#### # Inherited from

CoreChartOptions.font

#### # Defined in

index.esm.d.ts:1484
(opens new window)

### # hover

• hover: `CoreInteractionOptions`

#### # Inherited from

CoreChartOptions.hover

#### # Defined in

index.esm.d.ts:1526
(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:1458
(opens new window)

### # interaction

• interaction: `CoreInteractionOptions`

#### # Inherited from

CoreChartOptions.interaction

#### # Defined in

index.esm.d.ts:1524
(opens new window)

### # layout

• layout: `Partial`<{ `autoPadding`: `boolean` ; `padding`: `Scriptable`<`number` | `Partial`<`ChartArea`>, `ScriptableContext`<keyof `ChartTypeRegistry`>> }>

#### # Inherited from

CoreChartOptions.layout

#### # Defined in

index.esm.d.ts:1544
(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:1511
(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:1494
(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:58
(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:49
(opens new window)

### # plugins

• plugins: `PluginOptionsByType`<keyof `ChartTypeRegistry`>

#### # Inherited from

PluginChartOptions.plugins

#### # Defined in

index.esm.d.ts:2845
(opens new window)

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

index.esm.d.ts:1499
(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:1489
(opens new window)

### # scale

• scale: `ScaleOptionsByType`<keyof `ScaleTypeRegistry`>

#### # Defined in

index.esm.d.ts:659
(opens new window)

### # scales

• scales: `Object`

#### # Type declaration

Name | Type
--- | ---
`category` | { `type`: `"category"` } & `Omit`<`CartesianScaleOptions`, `"min"` | `"max"`> & { `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`: `GridLineOptions` ; `max`: `number` ; `min`: `number` ; `pointLabels`: { `backdropColor`: `Scriptable`<`Color`, `ScriptableScalePointLabelContext`> ; `backdropPadding`: `Scriptable`<`number` | `ChartArea`, `ScriptableScalePointLabelContext`> ; `borderRadius`: `Scriptable`<`number` | `BorderRadius`, `ScriptableScalePointLabelContext`> ; `centerPointLabels`: `boolean` ; `color`: `Scriptable`<`Color`, `ScriptableScalePointLabelContext`> ; `display`: `boolean` ; `font`: `ScriptableAndScriptableOptions`<`Partial`<`FontSpec`>, `ScriptableScalePointLabelContext`> ; `padding`: `Scriptable`<`number`, `ScriptableScalePointLabelContext`> ; `callback`: (`label`: `string`, `index`: `number`) => `string` | `number` | `string`[] | `number`[] } ; `startAngle`: `number` ; `suggestedMax`: `number` ; `suggestedMin`: `number` ; `ticks`: `RadialTickOptions` }
`time` | { `type`: `"time"` } & `Omit`<`CartesianScaleOptions`, `"min"` | `"max"`> & { `adapters`: { `date`: `unknown` } ; `bounds`: `"data"` | `"ticks"` ; `max`: `string` | `number` ; `min`: `string` | `number` ; `offsetAfterAutoskip`: `boolean` ; `suggestedMax`: `string` | `number` ; `suggestedMin`: `string` | `number` ; `ticks`: { `source`: `"auto"` | `"data"` | `"labels"` } ; `time`: { `displayFormats`: { [key: string]: `string`; } ; `isoWeekday`: `number` | `boolean` ; `minUnit`: `TimeUnit` ; `parser`: `string` | (`v`: `unknown`) => `number` ; `round`: `false` | `TimeUnit` ; `stepSize`: `number` ; `tooltipFormat`: `string` ; `unit`: `false` | `TimeUnit` } }
`timeseries` | { `type`: `"timeseries"` } & `Omit`<`CartesianScaleOptions`, `"min"` | `"max"`> & { `adapters`: { `date`: `unknown` } ; `bounds`: `"data"` | `"ticks"` ; `max`: `string` | `number` ; `min`: `string` | `number` ; `offsetAfterAutoskip`: `boolean` ; `suggestedMax`: `string` | `number` ; `suggestedMin`: `string` | `number` ; `ticks`: { `source`: `"auto"` | `"data"` | `"labels"` } ; `time`: { `displayFormats`: { [key: string]: `string`; } ; `isoWeekday`: `number` | `boolean` ; `minUnit`: `TimeUnit` ; `parser`: `string` | (`v`: `unknown`) => `number` ; `round`: `false` | `TimeUnit` ; `stepSize`: `number` ; `tooltipFormat`: `string` ; `unit`: `false` | `TimeUnit` } }

#### # Defined in

index.esm.d.ts:660
(opens new window)

### # transitions

• transitions: `TransitionsSpec`<keyof `ChartTypeRegistry`>

#### # Inherited from

CoreChartOptions.transitions

#### # Defined in

index.esm.d.ts:1651
(opens new window)

## # Methods

### # describe

▸ describe(`scope`, `values`): `AnyObject`

#### # Parameters

Name | Type
--- | ---
`scope` | `string`
`values` | `AnyObject`

#### # Returns

`AnyObject`

#### # Defined in

index.esm.d.ts:668
(opens new window)

### # get

▸ get(`scope`): `AnyObject`

#### # Parameters

Name | Type
--- | ---
`scope` | `string`

#### # Returns

`AnyObject`

#### # Defined in

index.esm.d.ts:666
(opens new window)

### # 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` | `ScatterDataPoint` | `BubbleDataPoint`)[], `unknown`>

#### # Returns

`void`

#### # Inherited from

CoreChartOptions.onClick

#### # Defined in

index.esm.d.ts:1542
(opens new window)

### # 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` | `ScatterDataPoint` | `BubbleDataPoint`)[], `unknown`>

#### # Returns

`void`

#### # Inherited from

CoreChartOptions.onHover

#### # Defined in

index.esm.d.ts:1537
(opens new window)

### # 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` | `ScatterDataPoint` | `BubbleDataPoint`)[], `unknown`>
`size` | `Object`
`size.height` | `number`
`size.width` | `number`

#### # Returns

`void`

#### # Inherited from

CoreChartOptions.onResize

#### # Defined in

index.esm.d.ts:1516
(opens new window)

### # override

▸ override(`scope`, `values`): `AnyObject`

#### # Parameters

Name | Type
--- | ---
`scope` | `string`
`values` | `AnyObject`

#### # Returns

`AnyObject`

#### # Defined in

index.esm.d.ts:669
(opens new window)

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

index.esm.d.ts:688
(opens new window)

### # set

▸ set(`values`): `AnyObject`

#### # Parameters

Name | Type
--- | ---
`values` | `AnyObject`

#### # Returns

`AnyObject`

#### # Defined in

index.esm.d.ts:664
(opens new window)

▸ set(`scope`, `values`): `AnyObject`

#### # Parameters

Name | Type
--- | ---
`scope` | `string`
`values` | `AnyObject`

#### # Returns

`AnyObject`

#### # Defined in

index.esm.d.ts:665
(opens new window)