elements

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Elements configuration applies to all datasets unless overridden

Element options configure the styling of all datasets of the same type. Four types of elements can be configured: arcs, lines, points, and bars. When set globally, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

Global element options via Chart.defaults.elements

Element options can be configured globally using Chart.defaults.elements. For example, to set the border width of all bar charts globally, use Chart.defaults.elements.bar.borderWidth = 2;

Arc configuration options

Arc elements configuration uses namespace options.elements.arc with global options at Chart.defaults.elements.arc. Configuration options: angle (number, for polar only, default circumference / arc count) - arc angle to cover; backgroundColor (Color, default Chart.defaults.backgroundColor) - arc fill color; borderAlign ('center'|'inner', default 'center') - arc stroke alignment; borderColor (Color, default '#fff') - arc stroke color; borderDash (number[], default []) - arc line dash; borderDashOffset (number, default 0.0) - arc line dash offset; borderJoinStyle ('round'|'bevel'|'miter', default 'bevel' or 'round' when borderAlign is 'inner') - line join style, default is 'round' when borderAlign is 'inner'; borderWidth (number, default 2) - arc stroke width; circular (boolean, default true) - by default the arc is curved; if false the arc will be flat.

Bar configuration options

Bar elements configuration uses namespace options.elements.bar with global options at Chart.defaults.elements.bar. Configuration options: backgroundColor (Color, default Chart.defaults.backgroundColor) - bar fill color; borderWidth (number, default 0) - bar stroke width; borderColor (Color, default Chart.defaults.borderColor) - bar stroke color; borderSkipped (string, default 'start') - skipped (excluded) border, accepts values 'start', 'end', 'middle', 'bottom', 'left', 'top', 'right', or false; borderRadius (number|object, default 0) - bar border radius in pixels; inflateAmount (number|'auto', default 'auto') - amount of pixels to inflate the bar rectangle(s) when drawing; pointStyle (string|Image|HTMLCanvasElement, default 'circle') - style of the point for legend.

Line configuration options

Line elements configuration uses namespace options.elements.line with global options at Chart.defaults.elements.line. Configuration options: tension (number, default 0) - Bézier curve tension (0 for no Bézier curves); backgroundColor (Color, default Chart.defaults.backgroundColor) - line fill color; borderWidth (number, default 3) - line stroke width; borderColor (Color, default Chart.defaults.borderColor) - line stroke color; borderCapStyle (string, default 'butt') - line cap style; borderDash (number[], default []) - line dash; borderDashOffset (number, default 0.0) - line dash offset; borderJoinStyle ('round'|'bevel'|'miter', default 'miter') - line join style; capBezierPoints (boolean, default true) - true to keep Bézier control inside the chart; cubicInterpolationMode (string, default 'default') - interpolation mode to apply; fill (boolean|string, default false) - how to fill the area under the line; stepped (boolean, default false) - true to show the line as a stepped line (tension will be ignored).

Point styles accepted values

The pointStyle argument accepts these types: string, Image, or HTMLCanvasElement. For string values, supported values are: 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle', and false. If the value is an image or canvas element, that image or canvas element is drawn using drawImage.

Point configuration options

Point elements configuration uses namespace options.elements.point with global options at Chart.defaults.elements.point. Configuration options: radius (number, default 3) - point radius; pointStyle (pointStyle, default 'circle') - point style; rotation (number, default 0) - point rotation in degrees; backgroundColor (Color, default Chart.defaults.backgroundColor) - point fill color; borderWidth (number, default 1) - point stroke width; borderColor (Color, default Chart.defaults.borderColor) - point stroke color; hitRadius (number, default 1) - extra radius added for hit detection; hoverRadius (number, default 4) - point radius when hovered; hoverBorderWidth (number, default 1) - stroke width when hovered.

Option resolution order for dataset element level

Dataset element level options are resolved in this order: dataset, options.datasets[dataset.type], options.datasets[dataset.type].elements[elementType], options.elements[elementType], options, overrides[config.type].datasets[dataset.type], overrides[config.type].datasets[dataset.type].elements[elementType], defaults.datasets[dataset.type], defaults.datasets[dataset.type].elements[elementType], defaults.elements[elementType], defaults. Each scope is looked up with elementType prefix in the option name first (for example, pointRadius for point element), then without the prefix.

Removed fontColor fallback for legend text in Chart.js 4.0

In Chart.js 4.0, the fallback to fontColor for the legend text and strikethrough color has been removed.

Arc element backgroundColor scriptable option

The backgroundColor property of arc elements can be a function that receives a context object. The context object contains properties including dataIndex and active. This allows different colors or gradients to be applied based on the data point index and whether the element is in a hover state.

Hover styling with hoverRadius and hoverBackgroundColor

Point elements can be styled on hover using hoverRadius (the radius of the point when hovered) and hoverBackgroundColor (the background color of the point when hovered).

Line element tension property

The line element tension property controls line smoothness in a line chart. It is accessed via options.elements.line.tension and can be set to values like 0 (no smoothing) or 0.4 (smooth curves).

Elements bar borderWidth option for horizontal bars

The elements.bar.borderWidth property controls the border width of horizontal bars. This property applies to all bars in the chart unless overridden at the dataset level.

Chart elements renamed in v3

In Chart.js 3.x, the following chart elements were renamed: `Chart.elements.Arc` → `Chart.elements.ArcElement`, `Chart.elements.Line` → `Chart.elements.LineElement`, `Chart.elements.Point` → `Chart.elements.PointElement`, `Chart.elements.Rectangle` → `Chart.elements.BarElement`.

elements.rectangle renamed to elements.bar in v3

In Chart.js 3.x, the `elements.rectangle` option was renamed to `elements.bar`.

Element._model and Element._view removed in v3

In Chart.js 3.x, `Element._model` and `Element._view` are no longer used. Properties are now set directly on elements. Use the `getProps` method to access these properties inside methods such as `inXRange`, `inYRange`, and `getCenterPoint`.

Give your agent this brain