Skip to content

Commit eb7c2f3

Browse files
kurklekurkle
committed
Review update 1
1 parent 72c8b07 commit eb7c2f3

File tree

10 files changed

+407
-62
lines changed

10 files changed

+407
-62
lines changed

‎docs/configuration/animations.md‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,31 @@ The following animation options are available. The global options for are define
1111
| `duration` | `number` | `1000` | The number of milliseconds an animation takes.
1212
| `easing` | `string` | `'easeOutQuart'` | Easing function to use. [more...](#easing)
1313
| `onProgress` | `function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks)
14-
| `onComplete` | `function` | `null` | Callback called at the end of an animation. [more...](#animation-callbacks)
14+
| `onComplete` | `function` | `null` | Callback called when all animations are completed. [more...](#animation-callbacks)
15+
| `delay` | `number` | `undefined` | Delay before starting the animations.
16+
| `loop` | `boolean` | `undefined` | If set to `true`, loop the animations loop endlessly.
17+
| `type` | `string` | `typeof property` | Type of property, determines the interpolator used. Possible values: `'number'`, '`color`'.
18+
| `from` | <code>number&#124;Color</code> | `undefined` | Start value for the animation. Current value is used when `undefined`
19+
| `active` | `object` | `{ duration: 400 }` | Option overrides for `active` animations (hover)
20+
| `resize` | `object` | `{ duration: 0 }` | Option overrides for `resize` animations.
21+
| [property] | `object` | `undefined` | Option overrides for [property].
22+
| [collection] | `object` | `undefined` | Option overrides for multiple properties, identified by `properties` array.
23+
24+
Default collections:
25+
| Name | option | value
26+
| `numbers` | `type` | `'number'`
27+
| | `properties` | `['x', 'y', 'borderWidth', 'radius', 'tension']`
28+
| `colors` | `type` | `'color'`
29+
| | `properties` | `['borderColor', 'backgroundColor']`
30+
31+
Direct property configuration overrides configuration of same property in a collection.
32+
33+
These defaults can be overridden in `options.animation` and `dataset.animation`.
1534

1635
## Easing
1736

1837
Available options are:
38+
1939
* `'linear'`
2040
* `'easeInQuad'`
2141
* `'easeOutQuad'`
@@ -52,34 +72,23 @@ See [Robert Penner's easing equations](http://robertpenner.com/easing/).
5272

5373
## Animation Callbacks
5474

55-
The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed a `Chart.Animation` instance:
75+
The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed following object:
5676

5777
```javascript
5878
{
5979
// Chart object
6080
chart: Chart,
6181

62-
// Current Animation frame number
82+
// Number of animations still in progress
6383
currentStep: number,
6484

65-
// Number of animation frames
85+
// Total number of animations at the start of current animation
6686
numSteps: number,
67-
68-
// Animation easing to use
69-
easing: string,
70-
71-
// Function that renders the chart
72-
render: function,
73-
74-
// User callback
75-
onAnimationProgress: function,
76-
77-
// User callback
78-
onAnimationComplete: function
7987
}
8088
```
8189

8290
The following example fills a progress bar during the chart animation.
91+
8392
```javascript
8493
var chart = new Chart(ctx, {
8594
type: 'line',

‎docs/getting-started/v3-migration.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
4949
* `scales.[x/y]Axes.time.max` was renamed to `scales[id].max`
5050
* `scales.[x/y]Axes.time.min` was renamed to `scales[id].min`
5151

52+
### Animations
53+
54+
Animation system was completely rewritten in Chart.js v3. Each property can now be animated separately. Please see [animations](../configuration/animations.md) docs for details.
55+
5256
## Developer migration
5357

5458
### Removed
@@ -105,7 +109,6 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
105109
* `helpers.log10` was renamed to `helpers.math.log10`
106110
* `helpers.almostEquals` was renamed to `helpers.math.almostEquals`
107111
* `helpers.almostWhole` was renamed to `helpers.math.almostWhole`
108-
* `helpers._decimalPlaces` was renamed to `helpers.math._decimalPlaces`
109112
* `helpers.distanceBetweenPoints` was renamed to `helpers.math.distanceBetweenPoints`
110113
* `helpers.isNumber` was renamed to `helpers.math.isNumber`
111114
* `helpers.sign` was renamed to `helpers.math.sign`
@@ -126,10 +129,12 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
126129
* `TimeScale.getLabelCapacity` was renamed to `TimeScale._getLabelCapacity`
127130
* `TimeScale.tickFormatFunction` was renamed to `TimeScale._tickFormatFunction`
128131
* `TimeScale.getPixelForOffset` was renamed to `TimeScale._getPixelForOffset`
132+
* `Tooltip.options.legendColorBackgroupd` was renamed to `Tooltip.options.multiKeyBackground`
129133

130134
#### Renamed private APIs
131135

132136
* `helpers._alignPixel` was renamed to `helpers.canvas._alignPixel`
137+
* `helpers._decimalPlaces` was renamed to `helpers.math._decimalPlaces`
133138

134139
### Changed
135140

‎samples/animations/delay.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Stacked Bar Chart</title>
6+
<script src="../../dist/Chart.min.js"></script>
7+
<script src="../utils.js"></script>
8+
<style>
9+
canvas {
10+
-moz-user-select: none;
11+
-webkit-user-select: none;
12+
-ms-user-select: none;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div style="width: 75%">
19+
<canvas id="canvas"></canvas>
20+
</div>
21+
<button id="randomizeData">Randomize Data</button>
22+
<script>
23+
var barChartData = {
24+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
25+
datasets: [{
26+
label: 'Dataset 1',
27+
backgroundColor: window.chartColors.red,
28+
data: [
29+
randomScalingFactor(),
30+
randomScalingFactor(),
31+
randomScalingFactor(),
32+
randomScalingFactor(),
33+
randomScalingFactor(),
34+
randomScalingFactor(),
35+
randomScalingFactor()
36+
]
37+
}, {
38+
label: 'Dataset 2',
39+
backgroundColor: window.chartColors.blue,
40+
data: [
41+
randomScalingFactor(),
42+
randomScalingFactor(),
43+
randomScalingFactor(),
44+
randomScalingFactor(),
45+
randomScalingFactor(),
46+
randomScalingFactor(),
47+
randomScalingFactor()
48+
]
49+
}, {
50+
label: 'Dataset 3',
51+
backgroundColor: window.chartColors.green,
52+
data: [
53+
randomScalingFactor(),
54+
randomScalingFactor(),
55+
randomScalingFactor(),
56+
randomScalingFactor(),
57+
randomScalingFactor(),
58+
randomScalingFactor(),
59+
randomScalingFactor()
60+
]
61+
}]
62+
63+
};
64+
window.onload = function() {
65+
var ctx = document.getElementById('canvas').getContext('2d');
66+
var started = {};
67+
window.myBar = new Chart(ctx, {
68+
type: 'bar',
69+
data: barChartData,
70+
options: {
71+
animation: (context) => {
72+
if (context.active) {
73+
return {
74+
duration: 400
75+
};
76+
}
77+
var delay = 0;
78+
var dsIndex = context.datasetIndex;
79+
var index = context.dataIndex;
80+
if (!started[index + dsIndex * 1000]) {
81+
delay = index * 300 + dsIndex * 100;
82+
started[index + dsIndex * 1000] = true;
83+
}
84+
return {
85+
easing: 'linear',
86+
duration: 600,
87+
delay
88+
};
89+
},
90+
title: {
91+
display: true,
92+
text: 'Chart.js Bar Chart - Stacked'
93+
},
94+
tooltips: {
95+
mode: 'index',
96+
intersect: false
97+
},
98+
responsive: true,
99+
scales: {
100+
x: {
101+
stacked: true,
102+
},
103+
y: {
104+
stacked: true
105+
}
106+
}
107+
}
108+
});
109+
};
110+
111+
document.getElementById('randomizeData').addEventListener('click', function() {
112+
barChartData.datasets.forEach(function(dataset) {
113+
dataset.data = dataset.data.map(function() {
114+
return randomScalingFactor();
115+
});
116+
});
117+
window.myBar.update();
118+
});
119+
</script>
120+
</body>
121+
122+
</html>

0 commit comments

Comments
 (0)