| commit | author | age | ||
| 83c3f6 | 1 | # Configuration |
| SP | 2 | |
| 3 | The configuration is used to change how the chart behaves. There are properties to control styling, fonts, the legend, etc. | |
| 4 | ||
| 5 | ## Global Configuration | |
| 6 | ||
| 7 | This concept was introduced in Chart.js 1.0 to keep configuration [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type. | |
| 8 | ||
| 9 | Chart.js merges the options object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately. This way you can be as specific as you would like in your individual chart configuration, while still changing the defaults for all chart types where applicable. The global general options are defined in `Chart.defaults.global`. The defaults for each chart type are discussed in the documentation for that chart type. | |
| 10 | ||
| 11 | The following example would set the hover mode to 'nearest' for all charts where this was not overridden by the chart type defaults or the options passed to the constructor on creation. | |
| 12 | ||
| 13 | ```javascript | |
| 14 | Chart.defaults.global.hover.mode = 'nearest'; | |
| 15 | ||
| 16 | // Hover mode is set to nearest because it was not overridden here | |
| 17 | var chartHoverModeNearest = new Chart(ctx, { | |
| 18 | type: 'line', | |
| 19 | data: data, | |
| 20 | }); | |
| 21 | ||
| 22 | // This chart would have the hover mode that was passed in | |
| 23 | var chartDifferentHoverMode = new Chart(ctx, { | |
| 24 | type: 'line', | |
| 25 | data: data, | |
| 26 | options: { | |
| 27 | hover: { | |
| 28 | // Overrides the global setting | |
| 29 | mode: 'index' | |
| 30 | } | |
| 31 | } | |
| 32 | }) | |
| 33 | ``` | |
| 34 | ||
