| [`circumference`](#general) | `number` | - | - | `undefined`
| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
| [`data`](#data-structure) | `number[]` | - | - | **required**
-| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
| [`data`](#data-structure) | `number[]` | - | - | **required**
-| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
* `datasets[type]` - dataset type options
* `overrides[type]` - chart type options
-These paths are valid under `defaults` for global confuguration and `options` for instance configuration.
+These paths are valid under `defaults` for global configuration and `options` for instance configuration.
## animation
| `'active'` | animation.duration | 400 | Override default duration to 400ms for hover animations
| `'resize'` | animation.duration | 0 | Override default duration to 0ms (= no animation) for resize
| `'show'` | animations.colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }` | Colors are faded in from transparent when dataset is shown using legend / [api](../developers/api.md#showdatasetIndex).
-| `'show'` | animations.visible | `{ type: 'boolean', duration: 0 }` | Dataset visiblity is immediately changed to true so the color transition from transparent is visible.
+| `'show'` | animations.visible | `{ type: 'boolean', duration: 0 }` | Dataset visibility is immediately changed to true so the color transition from transparent is visible.
| `'hide'` | animations.colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }` | Colors are faded to transparent when dataset id hidden using legend / [api](../developers/api.md#hidedatasetIndex).
| `'hide'` | animations.visible | `{ type: 'boolean', easing: 'easeInExpo' }` | Visibility is changed to false at a very late phase of animation
Namespace: `options.plugins.subtitle`. The global defaults for subtitle are configured in `Chart.defaults.plugins.subtitle`.
-Excactly the same configuration options with [title](./title.md) are available for subtitle, the namespaces only differ.
+Exactly the same configuration options with [title](./title.md) are available for subtitle, the namespaces only differ.
## Example Usage
* Polar area `startAngle` option is now consistent with `Radar`, 0 is at top and value is in degrees. Default is changed from `-½π` to `0`.
* Doughnut `rotation` option is now in degrees and 0 is at top. Default is changed from `-½π` to `0`.
* Doughnut `circumference` option is now in degrees. Default is changed from `2π` to `360`.
-* Doughnut `cutoutPercentage` was renamed to `cutout`and accepts pixels as numer and percent as string ending with `%`.
+* Doughnut `cutoutPercentage` was renamed to `cutout`and accepts pixels as number and percent as string ending with `%`.
* `scale` option was removed in favor of `options.scales.r` (or any other scale id, with `axis: 'r'`)
* `scales.[x/y]Axes` arrays were removed. Scales are now configured directly to `options.scales` object with the object key being the scale Id.
* `scales.[x/y]Axes.barPercentage` was moved to dataset option `barPercentage`
## Out of the box working samples
These samples are made for demonstration purposes only. They won't work out of the box if you copy paste them into your own website. This is because of how the docs are getting built. Some boilerplate code gets hidden.
-For a sample that can be copyed and pasted and used directly you can check the [usage page](../getting-started/usage.md).
+For a sample that can be copied and pasted and used directly you can check the [usage page](../getting-started/usage.md).
## Autogenerated data
The data used in the samples is autogenerated using custom functions. These functions do not ship with the library, for more information about this you can check the [utils page](./utils.md).
## Actions block
-The samples have an `actions` code block. These actions are not part of chart.js. They are internally transformed to seperate buttons together with onClick listeners by a plugin we use in the documentation. To implement such actions yourself you can make some buttons and add onClick event listeners to them. Then in these event listeners you can call your variable in which you made the chart and do the logic that the button is supposed to do.
+The samples have an `actions` code block. These actions are not part of chart.js. They are internally transformed to separate buttons together with onClick listeners by a plugin we use in the documentation. To implement such actions yourself you can make some buttons and add onClick event listeners to them. Then in these event listeners you can call your variable in which you made the chart and do the logic that the button is supposed to do.
value = _resolveArray(prop, value, target, descriptors.isIndexable);
}
if (needsSubResolver(prop, value)) {
- // if the resolved value is an object, crate a sub resolver for it
+ // if the resolved value is an object, create a sub resolver for it
value = _attachContext(value, _context, _subProxy && _subProxy[prop], descriptors);
}
return value;
/**
* Throttles calling `fn` once per animation frame
- * Latest argments are used on the actual call
+ * Latest arguments are used on the actual call
* @param {function} fn
* @param {*} thisArg
* @param {function} [updateFn]
* Handle an event
* @param {ChartEvent} e - The event to handle
* @param {boolean} [replay] - This is a replayed event (from update)
- * @param {boolean} [inChartArea] - The event is indide chartArea
+ * @param {boolean} [inChartArea] - The event is inside chartArea
* @returns {boolean} true if the tooltip changed
*/
handleEvent(e, replay, inChartArea = true) {
/**
* Helper for determining the active elements for event
* @param {ChartEvent} e - The event to handle
- * @param {Element[]} lastActive - Previously active elements
+ * @param {Element[]} lastActive - Previously active elements
* @param {boolean} [replay] - This is a replayed event (from update)
- * @param {boolean} [inChartArea] - The event is indide chartArea
+ * @param {boolean} [inChartArea] - The event is inside chartArea
* @returns {Element[]} - Active elements
- * @private
+ * @private
*/
_getActiveElements(e, lastActive, replay, inChartArea) {
const options = this.options;
expect(options.cubicInterpolationMode).toBe('monotone');
});
- it('should be overriden by user-supplied values', function() {
+ it('should be overridden by user-supplied values', function() {
Chart.helpers.merge(Chart.defaults.datasets.line, {
spanGaps: true,
tension: 0.231
})).toBeUndefined();
});
- it('should assing options directly, if target does not have previous options', function() {
+ it('should assign options directly, if target does not have previous options', function() {
const chart = {};
const anims = new Chart.Animations(chart, {option: {duration: 200}});
const target = {};
expect(chart.options.hover).toBeFalse();
});
- it('when options.interation=false and options.hover is not defined', function() {
+ it('when options.interaction=false and options.hover is not defined', function() {
var chart = acquireChart({
type: 'line',
options: {
expect(chart.options.hover).toBeFalse();
});
- it('when options.interation=false and options.hover is defined', function() {
+ it('when options.interaction=false and options.hover is defined', function() {
var chart = acquireChart({
type: 'line',
options: {
expect(_pointInLine({x: 10, y: 10}, {x: 20, y: 20}, 1)).toEqual({x: 20, y: 20});
});
- it('Should intepolate a point in stepped line', function() {
+ it('Should interpolate a point in stepped line', function() {
expect(_steppedInterpolation({x: 10, y: 10}, {x: 20, y: 20}, 0, 'before')).toEqual({x: 10, y: 10});
expect(_steppedInterpolation({x: 10, y: 10}, {x: 20, y: 20}, 0.4, 'before')).toEqual({x: 14, y: 20});
expect(_steppedInterpolation({x: 10, y: 10}, {x: 20, y: 20}, 0.5, 'before')).toEqual({x: 15, y: 20});
it('should have ticks with accurate labels', function() {
var scale = this.scale;
var ticks = scale.getTicks();
- // pixelsPerTick is an aproximation which assumes same number of milliseconds per year (not true)
+ // pixelsPerTick is an approximation which assumes same number of milliseconds per year (not true)
// we use a threshold of 1 day so that we still match these values
var pixelsPerTick = scale.width / (ticks.length - 1);
/**
* Throttles calling `fn` once per animation frame
- * Latest argments are used on the actual call
+ * Latest arguments are used on the actual call
* @param {function} fn
* @param {*} thisArg
* @param {function} [updateFn]
*/
afterDataLimits?(chart: Chart, args: { scale: Scale }, options: O): void;
/**
- * @desc Called before scale bulds its ticks. This hook is called separately for each scale in the chart.
+ * @desc Called before scale builds its ticks. This hook is called separately for each scale in the chart.
* @param {Chart} chart - The chart instance.
* @param {object} args - The call arguments.
* @param {Scale} args.scale - The scale.
projects / thirdparty / Chart.js.git / commitdiff
