Properties in Chart.defaults.global contain configuration options for all types of charts, including graphical elements, titles and captions, layout properties, animation, tooltips, events, and plugins. But it doesn't include grids and scales, which are configured in the Chart.defaults.scale object. The options available in Chart.defaults.global are listed as follows. All these properties, except the default font and color settings, are also available as properties in the options configuration object of any chart instance:
|
Object |
Value |
Description |
|
defaultColor |
CSS color |
The default color for all chart elements. This property is overriden in several chart elements, so it's not really very useful. The default is 'rgba(0,0,0,0.1)'. |
|
defaultFontColor |
CSS color (examples: 'lightblue', '#9cf', '#ff0000', 'rgb(100%,50%,25%)', 'hsl(60,100%,50%)', 'rgba(100%,50%,25%,0.6)', 'hsla(60,100%,50%,0.1)') |
The default color for all text (unless overridden with a more specific font color property). The default is '#666'. |
|
defaultFontFamily |
CSS font-family name or list (example: 'Helvetica, "Helvetica Neue", sans-serif') |
The default family for all text (unless overridden with a more specific font color property). The default is 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif. |
|
defaultFontSize |
Font size in pixels |
The default size in pixels for all text (unless overridden with a more specific font size property). The default is 12. |
|
defaultFontStyle |
CSS font-style (ex: 'bold', 'italic', 'normal') or any style available with the font that is being used (ex: 'condensed bold', 'light', and so on) |
The default style for all text (unless overridden with a more specific font style property). The default is 'normal'. |
|
layout.padding |
The number or object with numerical properties for top, left, right, bottom |
If the value is a number, the padding in pixels is applied to all sides of a chart. If it's an object, the individual values can be applied to different sides of the chart. |
|
maintainAspectRatio |
true or false |
Maintains the aspect ratio of the canvas element. |
|
responsive |
true or false |
Resizes the chart when the canvas is resized. The default is true. |
|
showLines |
true or false |
If true, shows lines between point values. Default is true, but is overridden to false in scatter charts. |
|
title |
Object |
See the Legends and labels section in this chapter. |
|
legend |
Object |
See the Legends and labels section in this chapter. |
|
tooltips |
Object |
See Chapter 7, Advanced Chart.js. |
|
hover |
Object |
See Chapter 7, Advanced Chart.js. |
|
elements |
Object |
See the Chart elements section in this chapter. |
|
events |
Object |
See the Animation section in this chapter. |
|
plugins |
Object |
See Chapter 7, Advanced Chart.js. |
|
animation |
Object |
See the Animation section in this chapter. |
For example, the following configuration will turn off-line rendering between value points for any charts. Since this property is not overridden in line or radar charts, if you create a line chart, it won't have any lines. Only the points will be visible:
Chart.defaults.global.showLines = false;
This other configuration will turn off the legends for all charts (very useful for single-dataset charts):
Chart.defaults.global.legend.display = false;