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

# # Interface: CoreChartOptions<TType>

## # Type parameters

Name | Type
--- | ---
`TType` | extends `ChartType`

## # Hierarchy

- `ParsingOptions`

- `AnimationOptions`<`TType`>

  ↳ `CoreChartOptions`

  ↳↳ `Defaults`

## # Properties

### # animation

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

#### # Inherited from

AnimationOptions.animation

#### # Defined in

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

### # animations

• animations: `AnimationsSpec`<`TType`>

#### # Inherited from

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

#### # Defined in

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

### # backgroundColor

• backgroundColor: `Scriptable`<`Color`, `ScriptableContext`<`TType`>>

base background color

`see` Defaults.backgroundColor

#### # Defined in

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

### # borderColor

• borderColor: `Scriptable`<`Color`, `ScriptableContext`<`TType`>>

base border color

`see` Defaults.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}

#### # Defined in

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

### # color

• color: `Scriptable`<`Color`, `ScriptableContext`<`TType`>>

base color

`see` Defaults.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`

#### # Defined in

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

### # devicePixelRatio

• devicePixelRatio: `number`

Override the window's default devicePixelRatio.

`default` window.devicePixelRatio

#### # Defined in

index.esm.d.ts:1522
(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']

#### # Defined in

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

### # font

• font: `Partial`<`FontSpec`>

base font

`see` Defaults.font

#### # Defined in

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

### # hover

• hover: `CoreInteractionOptions`

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

#### # Defined in

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

### # interaction

• interaction: `CoreInteractionOptions`

#### # Defined in

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

### # layout

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

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

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

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

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

ParsingOptions.parsing

#### # Defined in

index.esm.d.ts:49
(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

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

#### # Defined in

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

### # transitions

• transitions: `TransitionsSpec`<`TType`>

#### # Inherited from

AnimationOptions.transitions

#### # Defined in

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

## # Methods

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

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

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

#### # Defined in

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