# Interface: CoreChartOptions<TType>

# Type parameters

Name Type
TType extends ChartType

# Hierarchy

# Properties

# animation

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

# Inherited from


# Defined in

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

# animations

animations: AnimationsSpec<TType>

# Inherited from


# Defined in

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

# backgroundColor

backgroundColor: Scriptable<Color, ScriptableContext<TType>>

base background color

see Defaults.backgroundColor

# Defined in

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

# borderColor

borderColor: Scriptable<Color, ScriptableContext<TType>>

base border color

see Defaults.borderColor

# Defined in

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

# color

color: Scriptable<Color, ScriptableContext<TType>>

base color

see Defaults.color

# Defined in

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

# devicePixelRatio

devicePixelRatio: number

Override the window's default devicePixelRatio.

default window.devicePixelRatio

# Defined in

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

# events

events: ("mousemove" | "mouseout" | "click" | "touchstart" | "touchmove" | "touchend" | "pointerenter" | "pointerdown" | "pointermove" | "pointerup" | "pointerleave" | "pointerout")[]

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:1495 (opens new window)

# font

font: Partial<FontSpec>

base font

see Defaults.font

# Defined in

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

# hover

hover: CoreInteractionOptions

# Defined in

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

# interaction

interaction: CoreInteractionOptions

# Defined in

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

# layout

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

# Defined in

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

# maintainAspectRatio

maintainAspectRatio: boolean

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

default true

# Defined in

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


# Defined in

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


# Defined in

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

# responsive

responsive: boolean

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

default true

# Defined in

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

# transitions

transitions: TransitionsSpec<TType>

# Inherited from


# Defined in

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


# Defined in

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


# Defined in

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


# Defined in

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