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 rectangles. 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.global.elements. For example, to set the border width of all bar charts globally you would do:

Chart.defaults.global.elements.rectangle.borderWidth = 2;

Point Configuration

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

Global point options: Chart.defaults.global.elements.point

Name Type Default Description
radius Number 3 Point radius.
pointStyle String circle Point style.
backgroundColor Color 'rgba(0,0,0,0.1)' Point fill color.
borderWidth Number 1 Point stroke width.
borderColor Color 'rgba(0,0,0,0.1)' Point stroke color.
hitRadius Number 1 Extra radius added to point radius for hit detection.
hoverRadius Number 4 Point radius when hovered.
hoverBorderWidth Number 1 Stroke width when hovered.

Point Styles

The following values are supported:

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

If the value is an image, that image is drawn on the canvas using drawImage.

Line Configuration

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

Global line options: Chart.defaults.global.elements.line

Name Type Default Description
tension Number 0.4 Bézier curve tension (0 for no Bézier curves).
backgroundColor Color 'rgba(0,0,0,0.1)' Line fill color.
borderWidth Number 3 Line stroke width.
borderColor Color 'rgba(0,0,0,0.1)' Line stroke color.
borderCapStyle String 'butt' Line cap style (see MDN).
borderDash Array [] Line dash (see MDN).
borderDashOffset Number 0 Line dash offset (see MDN).
borderJoinStyle String 'miter Line join style (see MDN).
capBezierPoints Boolean true true to keep Bézier control inside the chart, false for no restriction.
fill Boolean/String true Fill location: 'zero', 'top', 'bottom', true (eq. 'zero') or false (no fill).
stepped Boolean false true to show the line as a stepped line (tension will be ignored).

Rectangle Configuration

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

Global rectangle options: Chart.defaults.global.elements.rectangle

Name Type Default Description
backgroundColor Color 'rgba(0,0,0,0.1)' Bar fill color.
borderWidth Number 0 Bar stroke width.
borderColor Color 'rgba(0,0,0,0.1)' Bar stroke color.
borderSkipped String 'bottom' Skipped (excluded) border: 'bottom', 'left', 'top' or 'right'.

Arc Configuration

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

Global arc options: Chart.defaults.global.elements.arc.

Name Type Default Description
backgroundColor Color 'rgba(0,0,0,0.1)' Arc fill color.
borderColor Color '#fff' Arc stroke color.
borderWidth Number 2 Arc stroke width.

results matching ""

    No results matching ""