Elements

While chart types provide settings to configure the styling of each dataset, you sometimes want to style all datasets the same way. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: arc, lines, points, and bars. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

Global Configuration

The element options can be specified per chart or globally. The global options for elements are defined in Chart.defaults.elements. For example, to set the border width of all bar charts globally you would do:

  1. Chart.defaults.elements.bar.borderWidth = 2;

Point Configuration

Point elements are used to represent the points in a line, radar or bubble chart.

Namespace: options.elements.point, global point options: Chart.defaults.elements.point.

NameTypeDefaultDescription
radiusnumber3Point radius.
pointStylepointStyle‘circle’Point style.
rotationnumber0Point rotation (in degrees).
backgroundColorColorChart.defaults.backgroundColorPoint fill color.
borderWidthnumber1Point stroke width.
borderColorColor‘Chart.defaults.borderColorPoint stroke color.
hitRadiusnumber1Extra radius added to point radius for hit detection.
hoverRadiusnumber4Point radius when hovered.
hoverBorderWidthnumber1Stroke width when hovered.

Point Styles

Types

The pointStyle argument accepts the following type of inputs: string, Image and HTMLCanvasElement

Info

When a string is provided, the following values are supported:

  • 'circle'
  • 'cross'
  • 'crossRot'
  • 'dash'
  • 'line'
  • 'rect'
  • 'rectRounded'
  • 'rectRot'
  • 'star'
  • 'triangle'

If the value is an image or a canvas element, that image or canvas element is drawn on the canvas using drawImageElements - 图1 (opens new window).

Line Configuration

Line elements are used to represent the line in a line chart.

Namespace: options.elements.line, global line options: Chart.defaults.elements.line.

NameTypeDefaultDescription
tensionnumber0Bézier curve tension (0 for no Bézier curves).
backgroundColorColorChart.defaults.backgroundColorLine fill color.
borderWidthnumber3Line stroke width.
borderColorColorChart.defaults.borderColorLine stroke color.
borderCapStylestring‘butt’Line cap style. See MDNElements - 图2 (opens new window).
borderDashnumber[][]Line dash. See MDNElements - 图3 (opens new window).
borderDashOffsetnumber0.0Line dash offset. See MDNElements - 图4 (opens new window).
borderJoinStyle‘round’|‘bevel’|‘miter’‘miter’Line join style. See MDNElements - 图5 (opens new window).
capBezierPointsbooleantruetrue to keep Bézier control inside the chart, false for no restriction.
cubicInterpolationModestring‘default’Interpolation mode to apply. See more…
fillboolean|stringfalseHow to fill the area under the line. See area charts.
steppedbooleanfalsetrue to show the line as a stepped line (tension will be ignored).

Bar Configuration

Bar elements are used to represent the bars in a bar chart.

Namespace: options.elements.bar, global bar options: Chart.defaults.elements.bar.

NameTypeDefaultDescription
backgroundColorColorChart.defaults.backgroundColorBar fill color.
borderWidthnumber0Bar stroke width.
borderColorColorChart.defaults.borderColorBar stroke color.
borderSkippedstring‘start’Skipped (excluded) border: ‘start’, ‘end’, ‘middle’, ‘bottom’, ‘left’, ‘top’, ‘right’ or false.
borderRadiusnumber|object0The bar border radius (in pixels).
inflateAmountnumber|‘auto’‘auto’The amount of pixels to inflate the bar rectangle(s) when drawing.
pointStylestring|Image|HTMLCanvasElement‘circle’Style of the point for legend.

Arc Configuration

Arcs are used in the polar area, doughnut and pie charts.

Namespace: options.elements.arc, global arc options: Chart.defaults.elements.arc.

NameTypeDefaultDescription
angle - for polar onlynumbercircumference / (arc count)Arc angle to cover.
backgroundColorColorChart.defaults.backgroundColorArc fill color.
borderAlign‘center’|‘inner’‘center’Arc stroke alignment.
borderColorColor‘#fff’Arc stroke color.
borderJoinStyle‘round’|‘bevel’|‘miter’‘bevel’|‘round’Line join style. See MDNElements - 图6 (opens new window). The default is ‘round’ when borderAlign is ‘inner’
borderWidthnumber2Arc stroke width.