Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove global from defaults #6893

Merged
merged 1 commit into from
Jan 3, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/charts/line.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ If the `steppedLine` value is set to anything other than false, `lineTension` wi

## Configuration Options

The line chart defines the following configuration options. These options are merged with the global chart configuration options, `Chart.defaults.global`, to form the options passed to the chart.
The line chart defines the following configuration options. These options are merged with the global chart configuration options, `Chart.defaults`, to form the options passed to the chart.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down
2 changes: 1 addition & 1 deletion docs/charts/radar.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ The interaction with each point can be controlled with the following properties:

## Configuration Options

The radar chart defines the following configuration options. These options are merged with the global chart configuration options, `Chart.defaults.global`, to form the options passed to the chart.
The radar chart defines the following configuration options. These options are merged with the global chart configuration options, `Chart.defaults`, to form the options passed to the chart.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down
8 changes: 4 additions & 4 deletions docs/configuration/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ The configuration is used to change how the chart behaves. There are properties

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.

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.
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`. The defaults for each chart type are discussed in the documentation for that chart type.

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.

```javascript
Chart.defaults.global.hover.mode = 'nearest';
Chart.defaults.hover.mode = 'nearest';

// Hover mode is set to nearest because it was not overridden here
var chartHoverModeNearest = new Chart(ctx, {
Expand All @@ -38,7 +38,7 @@ Options may be configured directly on the dataset. The dataset options can be ch

- per dataset: dataset.*
- per chart: options.datasets[type].*
- or globally: Chart.defaults.global.datasets[type].*
- or globally: Chart.defaults.datasets[type].*

where type corresponds to the dataset type.

Expand All @@ -48,7 +48,7 @@ The following example would set the `showLine` option to 'false' for all line da

```javascript
// Do not show lines for all datasets by default
Chart.defaults.global.datasets.line.showLine = false;
Chart.defaults.datasets.line.showLine = false;

// This chart would show a line only for the third dataset
var chart = new Chart(ctx, {
Expand Down
2 changes: 1 addition & 1 deletion docs/configuration/animations.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Chart.js animates charts out of the box. A number of options are provided to con

## Animation Configuration

The following animation options are available. The global options for are defined in `Chart.defaults.global.animation`.
The following animation options are available. The global options for are defined in `Chart.defaults.animation`.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down
14 changes: 7 additions & 7 deletions docs/configuration/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ While chart types provide settings to configure the styling of each dataset, you

## Global Configuration

The element options can be specified per chart or globally. The global options for elements are defined in `Chart.defaults.global.elements`. For example, to set the border width of all bar charts globally you would do:
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:

```javascript
Chart.defaults.global.elements.rectangle.borderWidth = 2;
Chart.defaults.elements.rectangle.borderWidth = 2;
```

## Point Configuration
Point elements are used to represent the points in a line, radar or bubble chart.

Global point options: `Chart.defaults.global.elements.point`.
Global point options: `Chart.defaults.elements.point`.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down Expand Up @@ -46,7 +46,7 @@ If the value is an image, that image is drawn on the canvas using [drawImage](ht
## Line Configuration
Line elements are used to represent the line in a line chart.

Global line options: `Chart.defaults.global.elements.line`.
Global line options: `Chart.defaults.elements.line`.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand All @@ -59,14 +59,14 @@ Global line options: `Chart.defaults.global.elements.line`.
| `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | `string` | `'miter'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `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...](../charts/line.md#cubicinterpolationmode)
| `cubicInterpolationMode` | `string` | `'default'` | Interpolation mode to apply. [See more...](../charts/line.md#cubicinterpolationmode)
| `fill` | <code>boolean&#124;string</code> | `true` | How to fill the area under the line. See [area charts](../charts/area.md#filling-modes).
| `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).

## Rectangle Configuration
Rectangle elements are used to represent the bars in a bar chart.

Global rectangle options: `Chart.defaults.global.elements.rectangle`.
Global rectangle options: `Chart.defaults.elements.rectangle`.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand All @@ -78,7 +78,7 @@ Global rectangle options: `Chart.defaults.global.elements.rectangle`.
## Arc Configuration
Arcs are used in the polar area, doughnut and pie charts.

Global arc options: `Chart.defaults.global.elements.arc`.
Global arc options: `Chart.defaults.elements.arc`.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down
2 changes: 1 addition & 1 deletion docs/configuration/layout.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Layout Configuration

The layout configuration is passed into the `options.layout` namespace. The global options for the chart layout is defined in `Chart.defaults.global.layout`.
The layout configuration is passed into the `options.layout` namespace. The global options for the chart layout is defined in `Chart.defaults.layout`.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down
4 changes: 2 additions & 2 deletions docs/configuration/legend.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ The chart legend displays data about the datasets that are appearing on the char

## Configuration options

The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.global.legend`.
The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.legend`.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down Expand Up @@ -138,7 +138,7 @@ function(e, legendItem) {
Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly.

```javascript
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var defaultLegendClickHandler = Chart.defaults.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
var index = legendItem.datasetIndex;

Expand Down
2 changes: 1 addition & 1 deletion docs/configuration/title.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
The chart title defines text to draw at the top of the chart.

## Title Configuration
The title configuration is passed into the `options.title` namespace. The global options for the chart title is defined in `Chart.defaults.global.title`.
The title configuration is passed into the `options.title` namespace. The global options for the chart title is defined in `Chart.defaults.title`.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down
2 changes: 1 addition & 1 deletion docs/configuration/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Tooltip Configuration

The tooltip configuration is passed into the `options.tooltips` namespace. The global options for the chart tooltips is defined in `Chart.defaults.global.tooltips`.
The tooltip configuration is passed into the `options.tooltips` namespace. The global options for the chart tooltips is defined in `Chart.defaults.tooltips`.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down
2 changes: 1 addition & 1 deletion docs/developers/charts.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ Chart.defaults.derivedBubble = Chart.defaults.bubble;

// Sets the default dataset config for 'derivedBubble' to be the same as the bubble dataset defaults.
// It looks like a bug exists when the dataset defaults don't exist
Chart.defaults.global.datasets.derivedBubble = Chart.defaults.global.datasets.bubble;
Chart.defaults.datasets.derivedBubble = Chart.defaults.datasets.bubble;

// I think the recommend using Chart.controllers.bubble.extend({ extensions here });
var custom = Chart.controllers.bubble.extend({
Expand Down
2 changes: 1 addition & 1 deletion docs/general/colors.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Colors

When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at `Chart.defaults.global.defaultColor`. It is initially set to `'rgba(0, 0, 0, 0.1)'`.
When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at `Chart.defaults.color`. It is initially set to `'rgba(0, 0, 0, 0.1)'`.

You can also pass a [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.

Expand Down
12 changes: 6 additions & 6 deletions docs/general/fonts.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# Fonts

There are 4 special global settings that can change all of the fonts on the chart. These options are in `Chart.defaults.global`. The global font settings only apply when more specific options are not included in the config.
There are 4 special global settings that can change all of the fonts on the chart. These options are in `Chart.defaults`. The global font settings only apply when more specific options are not included in the config.

For example, in this chart the text will all be red except for the labels in the legend.

```javascript
Chart.defaults.global.defaultFontColor = 'red';
Chart.defaults.fontColor = 'red';
let chart = new Chart(ctx, {
type: 'line',
data: data,
Expand All @@ -22,10 +22,10 @@ let chart = new Chart(ctx, {

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `defaultFontColor` | `Color` | `'#666'` | Default font color for all text.
| `defaultFontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text.
| `defaultFontSize` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
| `defaultFontStyle` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.
| `fontColor` | `Color` | `'#666'` | Default font color for all text.
| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text.
| `fontSize` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
| `fontStyle` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.

## Missing Fonts

Expand Down
2 changes: 1 addition & 1 deletion docs/general/interactions/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Interactions

The hover configuration is passed into the `options.hover` namespace. The global hover configuration is at `Chart.defaults.global.hover`. To configure which events trigger chart interactions, see [events](./events.md#events).
The hover configuration is passed into the `options.hover` namespace. The global hover configuration is at `Chart.defaults.hover`. To configure which events trigger chart interactions, see [events](./events.md#events).

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down
11 changes: 11 additions & 0 deletions docs/getting-started/v3-migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,17 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
* The `hover` property of scriptable options `context` object was renamed to `active` to align it with the datalabels plugin.
* The `zeroLine*` options of axes were removed. Use scriptable scale options instead.

## Defaults

* `global` namespace was removed from `defaults`. So `Chart.defaults.global` is now `Chart.defaults`
* `default` prefix was removed from defaults. For example `Chart.defaults.global.defaultColor` is now `Chart.defaults.color`
* `defaultColor` was renamed to `color`
* `defaultFontColor` was renamed to `fontColor`
* `defaultFontFamily` was renamed to `fontFamily`
* `defaultFontSize` was renamed to `fontSize`
* `defaultFontStyle` was renamed to `fontStyle`
* `defaultLineHeight` was renamed to `lineHeight`

### Options

* `scales.[x/y]Axes` arrays were removed. Scales are now configured directly to `options.scales` object with the object key being the scale Id.
Expand Down
2 changes: 1 addition & 1 deletion samples/animations/loop.html
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
}
};
}
return Chart.defaults.global.animation;
return Chart.defaults.animation;
},
elements: {
point: {
Expand Down
2 changes: 1 addition & 1 deletion samples/tooltips/custom-line.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
<canvas id="chart"></canvas>
</div>
<script>
Chart.defaults.global.pointHitDetectionRadius = 1;
Chart.defaults.pointHitDetectionRadius = 1;

var customTooltips = function(tooltip) {
// Tooltip Element
Expand Down
2 changes: 1 addition & 1 deletion samples/tooltips/custom-pie.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
</div>

<script>
Chart.defaults.global.tooltips.custom = function(tooltip) {
Chart.default.tooltips.custom = function(tooltip) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');

Expand Down
18 changes: 8 additions & 10 deletions src/controllers/controller.bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,14 @@ defaults._set('bar', {
}
});

defaults._set('global', {
datasets: {
bar: {
categoryPercentage: 0.8,
barPercentage: 0.9,
animation: {
numbers: {
type: 'number',
properties: ['x', 'y', 'base', 'width', 'height']
}
defaults._set('datasets', {
bar: {
categoryPercentage: 0.8,
barPercentage: 0.9,
animation: {
numbers: {
type: 'number',
properties: ['x', 'y', 'base', 'width', 'height']
}
}
}
Expand Down
10 changes: 4 additions & 6 deletions src/controllers/controller.horizontalBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,10 @@ defaults._set('horizontalBar', {
}
});

defaults._set('global', {
datasets: {
horizontalBar: {
categoryPercentage: 0.8,
barPercentage: 0.9
}
defaults._set('datasets', {
horizontalBar: {
categoryPercentage: 0.8,
barPercentage: 0.9
}
});

Expand Down
8 changes: 3 additions & 5 deletions src/controllers/controller.scatter.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,9 @@ defaults._set('scatter', {
}
});

defaults._set('global', {
datasets: {
scatter: {
showLine: false
}
defaults._set('datasets', {
scatter: {
showLine: false
}
});

Expand Down
40 changes: 19 additions & 21 deletions src/core/core.animations.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,25 @@ import Animation from './core.animation';
import defaults from '../core/core.defaults';
import {noop, extend, isObject} from '../helpers/helpers.core';

defaults._set('global', {
animation: {
duration: 1000,
easing: 'easeOutQuart',
active: {
duration: 400
},
resize: {
duration: 0
},
numbers: {
type: 'number',
properties: ['x', 'y', 'borderWidth', 'radius', 'tension']
},
colors: {
type: 'color',
properties: ['borderColor', 'backgroundColor']
},
onProgress: noop,
onComplete: noop
}
defaults._set('animation', {
duration: 1000,
easing: 'easeOutQuart',
active: {
duration: 400
},
resize: {
duration: 0
},
numbers: {
type: 'number',
properties: ['x', 'y', 'borderWidth', 'radius', 'tension']
},
colors: {
type: 'color',
properties: ['borderColor', 'backgroundColor']
},
onProgress: noop,
onComplete: noop
});

function copyOptions(target, values) {
Expand Down
Loading