Local configuration options override global default configurations, which can be configured using the Chart.defaults.global object. You can configure properties, such as fonts, colors, axes, gridlines, ticks, animations, tooltips, and element properties, either globally (for all charts), or locally (for a specific chart).

To specify a global font family, you can use the following code:

Chart.defaults.global.defaultFontFamily = "Helvetica Neue";

This will affect all of the text in the chart. You can also define defaults for specific text elements by changing the properties, such as Chart.defaults.global.legend, Chart.defaults.global.title, and many more, as follows:

Chart.defaults.global.legend.fontSize = 10; // all legend text will be size 10

The default color used in charts is rgba(0,0,0,0.1) (lightgray). You can change this using Chart.defaults.global.defaultColor.

Global properties are great to include in a separate .js file, so that your charts have a consistent look and field. You might also prefer to use them even when you have a single chart.

The following table lists specific configurations for bar charts that can be applied locally or globally. The global bar chart settings are stored in Chart.defaults.bar and Charts.defaults.horizontalBar. Local settings should be stored inside the options object under scales.xAxes[] or scales.yAxes[], for vertical and horizontal bar charts, respectively. Try using some of these in your chart and see the results you get: