Skip to content

Latest commit

 

History

History
107 lines (81 loc) · 6.28 KB

elements.md

File metadata and controls

107 lines (81 loc) · 6.28 KB
Raw

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 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:

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.

Name Type Default Description
radius number 3 Point radius.
pointStyle pointStyle 'circle' Point style.
rotation number 0 Point rotation (in degrees).
backgroundColor Color Chart.defaults.backgroundColor Point fill color.
borderWidth number 1 Point stroke width.
borderColor Color 'Chart.defaults.borderColor 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

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'
  • false

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

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.

Name Type Default Description
tension number 0 Bézier curve tension (0 for no Bézier curves).
backgroundColor Color Chart.defaults.backgroundColor Line fill color.
borderWidth number 3 Line stroke width.
borderColor Color Chart.defaults.borderColor Line stroke color.
borderCapStyle string 'butt' Line cap style. See MDN.
borderDash number[] [] Line dash. See MDN.
borderDashOffset number 0.0 Line dash offset. See MDN.
borderJoinStyle 'round'|'bevel'|'miter' 'miter' Line join style. See MDN.
capBezierPoints boolean true true to keep Bézier control inside the chart, false for no restriction.
cubicInterpolationMode string 'default' Interpolation mode to apply. See more...
fill boolean|string false How to fill the area under the line. See area charts.
stepped boolean false true 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.

Name Type Default Description
backgroundColor Color Chart.defaults.backgroundColor Bar fill color.
borderWidth number 0 Bar stroke width.
borderColor Color Chart.defaults.borderColor Bar stroke color.
borderSkipped string 'start' Skipped (excluded) border: 'start', 'end', 'middle', 'bottom', 'left', 'top', 'right' or false.
borderRadius number|object 0 The bar border radius (in pixels).
inflateAmount number|'auto' 'auto' The amount of pixels to inflate the bar rectangle(s) when drawing.
pointStyle string|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.

Name Type Default Description
angle - for polar only number circumference / (arc count) Arc angle to cover.
backgroundColor Color Chart.defaults.backgroundColor Arc fill color.
borderAlign 'center'|'inner' 'center' Arc stroke alignment.
borderColor Color '#fff' Arc stroke color.
borderDash number[] [] Arc line dash. See MDN.
borderDashOffset number 0.0 Arc line dash offset. See MDN.
borderJoinStyle 'round'|'bevel'|'miter' 'bevel'|'round' Line join style. See MDN. The default is 'round' when borderAlign is 'inner'
borderWidth number 2 Arc stroke width.
circular boolean true By default the Arc is curved. If circular: false the Arc will be flat