# Interface: CoreChartOptions<TType>
# Type parameters
| Name | Type |
|---|---|
TType | extends ChartType |
# Hierarchy
AnimationOptions<TType>↳
CoreChartOptions↳↳
Defaults
# Properties
# animation
• animation: false | AnimationSpec<TType> & { 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
AnimationOptions.animation
# Defined in
types/index.d.ts:1757 (opens new window)
# animations
• animations: AnimationsSpec<TType>
# Inherited from
AnimationOptions.animations
# Defined in
types/index.d.ts:1767 (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
types/index.d.ts:1655 (opens new window)
# backgroundColor
• backgroundColor: ScriptableAndArray<Color, ScriptableContext<TType>>
base background color
See
Defaults.backgroundColor
# Defined in
types/index.d.ts:1614 (opens new window)
# borderColor
• borderColor: ScriptableAndArray<Color, ScriptableContext<TType>>
base border color
See
Defaults.borderColor
# Defined in
types/index.d.ts:1624 (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
types/index.d.ts:1603 (opens new window)
# color
• color: Scriptable<Color, ScriptableContext<TType>>
base color
See
Defaults.color
# Defined in
types/index.d.ts:1609 (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
types/index.d.ts:1590 (opens new window)
# devicePixelRatio
• devicePixelRatio: number
Override the window's default devicePixelRatio.
Default
window.devicePixelRatio
# Defined in
types/index.d.ts:1672 (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
types/index.d.ts:1682 (opens new window)
# font
• font: Partial<FontSpec>
base font
See
Defaults.font
# Defined in
types/index.d.ts:1634 (opens new window)
# hover
• hover: CoreInteractionOptions
# Defined in
types/index.d.ts:1676 (opens new window)
# hoverBackgroundColor
• hoverBackgroundColor: ScriptableAndArray<Color, ScriptableContext<TType>>
base hover background color
See
Defaults.hoverBackgroundColor
# Defined in
types/index.d.ts:1619 (opens new window)
# hoverBorderColor
• hoverBorderColor: ScriptableAndArray<Color, ScriptableContext<TType>>
base hover border color
See
Defaults.hoverBorderColor
# Defined in
types/index.d.ts:1629 (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
types/index.d.ts:1598 (opens new window)
# interaction
• interaction: CoreInteractionOptions
# Defined in
types/index.d.ts:1674 (opens new window)
# layout
• layout: Partial<{ autoPadding: boolean ; padding: Scriptable<Padding, ScriptableContext<TType>> }>
# Defined in
types/index.d.ts:1694 (opens new window)
# locale
• locale: string
Locale used for number formatting (using Intl.NumberFormat).
Default
user's browser setting
# Defined in
types/index.d.ts:1661 (opens new window)
# 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
# Defined in
types/index.d.ts:1644 (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
types/index.d.ts:63 (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
types/index.d.ts:54 (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
types/index.d.ts:1649 (opens new window)
# responsive
• responsive: boolean
Resizes the chart canvas when its container does (important note...).
Default
true
# Defined in
types/index.d.ts:1639 (opens new window)
# transitions
• transitions: TransitionsSpec<TType>
# Inherited from
AnimationOptions.transitions
# Defined in
types/index.d.ts:1768 (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 | [number, number] | Point | BubbleDataPoint)[], unknown> |
# Returns
void
# Defined in
types/index.d.ts:1692 (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 | [number, number] | Point | BubbleDataPoint)[], unknown> |
# Returns
void
# Defined in
types/index.d.ts:1687 (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 | [number, number] | Point | BubbleDataPoint)[], unknown> |
size | Object |
size.height | number |
size.width | number |
# Returns
void