Graphical elements

Graphical elements are the primitives used to render visualizations of datasets in different types of charts. You can define defaults for them configuring the four objects in the Chart.defaults.global.elements context, listed as follows. Some of these properties are overridden in the defaults for certain charts, so changing them at this level may not cause any effect:

Object

Description

Default properties

arc

 

The default properties for Canvas arcs, which are used in pie, doughnut, and polar area charts.

 
backgroundColor:"rgba(0,0,0,0.1)"
borderColor:"#fff"
borderWidth:2

line

The default properties for Canvas lines, which are used in line and radar charts. See Chapter 2, Technology Fundamentals, for Canvas properties used in borderCapStyle and borderJoinStyle. See Chapter 4, Creating Charts, for fill strategies.

 
backgroundColor:"rgba(0,0,0,0.1)"
borderCapStyle:"butt"
//(see Chapter 2)
 borderColor:"rgba(0,0,0,0.1)"
 borderDash:[]
 borderDashOffset:0
 borderJoinStyle:"miter"
//(see Chapter 2)
 borderWidth:3
 capBezierPoints:true
 fill:true //(see Chapter 4)
 tension:0.4
 stepped: false

Point

Value points are actually circles drawn with Canvas arcs. This object contains default properties for points in line, radar, scatter, or bubble charts. See Chapter 4, Creating Charts, for more point styles.

 
backgroundColor:"rgba(0,0,0,0.1)"
borderColor:"rgba(0,0,0,0.1)"
borderWidth:1
hitRadius:1
hoverBorderWidth:1
hoverRadius:4
pointStyle:"circle"
//(see Chapter 4)
radius:3

Rectangle

The default properties for Canvas rectangles used in bar and horizontalBar charts. One of the borders is not drawn (skipped).

 
backgroundColor:"rgba(0,0,0,0.1)"
borderColor:"rgba(0,0,0,0.1)"
borderSkipped:"bottom" ("left"in horizontalBar)
borderWidth:0
Options in Charts.defaults.global.elements that apply to elements in all charts

The following code will make all line and radar charts use red dashed 5-pixel lines as the default, unless they are overridden in their default configuration or options object. See Config/defaults-2-global-elements.html, as follows:

const line = Chart.defaults.global.elements.line;
line.borderDash = [5,5];
line.borderWidth = 5;
line.borderColor = 'red';