Review update 1

docs/configuration/animations.md

@@ -20,9 +20,10 @@ The following animation options are available. The global options for are define
 | `active` | `object` | `{ duration: 400 }` | Option overrides for `active` animations (hover)
 | `resize` | `object` | `{ duration: 0 }` | Option overrides for `resize` animations.
 | [property] | `object` | `undefined` | Option overrides for [property].
-| [collection] | `object` | `undefined` | Option overrides for multiple properties, identified by `properties` array.
+| [collection] | `object` | [defaults...](#default-collections) | Option overrides for multiple properties, identified by `properties` array.
+| [mode] | `object` | [defaults...](#default-modes) | Option overrides for update mode. Core modes: `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. A custom mode can be used by passing a custom `mode` to [update](../developers/api.md#updatemode)
 
-Default collections:
+### Default collections
 
 | Name | Option | Value
 | ---- | ------ | -----
@@ -35,6 +36,17 @@ Direct property configuration overrides configuration of same property in a coll
 
 These defaults can be overridden in `options.animation` and `dataset.animation`.
 
+### Default modes
+
+| Mode | Option | Value
+| -----| ------ | -----
+| active | duration | 400
+| resize | duration | 0
+| show | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }`
+| | visible | `{ type: 'boolean', duration: 0 }`
+| hide | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }`
+| | visible | `{ type: 'boolean', easing: 'easeInExpo' }`
+
 ## Easing
 
 Available options are:

docs/developers/api.md

@@ -28,7 +28,7 @@ myLineChart.update(); // Calling update now animates the position of March from
 
 > **Note:** replacing the data reference (e.g. `myLineChart.data = {datasets: [...]}` only works starting **version 2.6**. Prior that, replacing the entire data object could be achieved with the following workaround: `myLineChart.config.data = {datasets: [...]}`.
 
-A `mode` string can be provided to indicate what should be updated and what animation configuration should be used. Core calls this method using any of `undefined`, `'reset'`, `'resize'` or `'active'`. `'none'` is also a supported mode for skipping animations for single update.
+A `mode` string can be provided to indicate what should be updated and what animation configuration should be used. Core calls this method using any of `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'` or `undefined`. `'none'` is also a supported mode for skipping animations for single update. Please see [animations](../configuration/animations.md) docs for more details.
 
 Example:
 
@@ -164,4 +164,20 @@ Like [setDatasetVisibility](#setdatasetvisibility) except that it hides only a s
 ```javascript
 chart.setDataVisibility(0, 2, false); // hides the item in dataset 0, at index 2
 chart.update(); // chart now renders with item hidden
-```
+```
+
+## hide(datasetIndex)
+
+Sets the visibility for the given dataset to false. Updates the chart and animates the dataset with `'hide'` mode. This animation can be configured under the `hide` key in animation options. Please see [animations](../configuration/animations.md) docs for more details.
+
+```javascript
+chart.hide(1); // hides dataset at index 1 and does 'hide' animation.
+```
+
+## show(datasetIndex)
+
+Sets the visibility for the given dataset to true. Updates the chart and animates the dataset with `'show'` mode. This animation can be configured under the `show` key in animation options. Please see [animations](../configuration/animations.md) docs for more details.
+
+```javascript
+chart.show(1); // shows dataset at index 1 and does 'show' animation.
+```

src/core/core.animation.js

@@ -5,7 +5,7 @@ import helpers from '../helpers';
 const transparent = 'transparent';
 const interpolators = {
 	boolean: function(from, to, factor) {
-		return factor > 0.9 ? to : from;
+		return factor > 0.5 ? to : from;
 	},
 	color: function(from, to, factor) {
 		var c0 = helpers.color(from || transparent);

src/core/core.animations.js

@@ -9,7 +9,7 @@ const numbers = ['x', 'y', 'borderWidth', 'radius', 'tension'];
 const colors = ['borderColor', 'backgroundColor'];
 
 defaults._set('animation', {
-	// Plain properties are copied to each object
+	// Plain properties can be overridden in each object
 	duration: 1000,
 	easing: 'easeOutQuart',
 	onProgress: noop,
@@ -40,7 +40,7 @@ defaults._set('animation', {
 		},
 		visible: {
 			type: 'boolean',
-			duration: 0
+			duration: 0 // show immediately
 		},
 	},
 	hide: {
@@ -51,7 +51,7 @@ defaults._set('animation', {
 		},
 		visible: {
 			type: 'boolean',
-			easing: 'linear'
+			easing: 'easeInExpo' // for keeping the dataset visible almost all the way through the animation
 		},
 	}
 });

src/core/core.controller.js

@@ -838,33 +838,33 @@ class Chart {
 		}
 	}
 
-	_updateVisibility(datasetIndex, index, visible) {
+	/**
+	 * @private
+	 */
+	_updateDatasetVisibility(datasetIndex, visible) {
 		const me = this;
 		const mode = visible ? 'show' : 'hide';
 		const meta = me.getDatasetMeta(datasetIndex);
 		const anims = meta.controller._resolveAnimations(undefined, mode);
-		if (index === undefined) {
-			me.setDatasetVisibility(datasetIndex, visible);
-			// Animate visible state, so hide animation can be seen
-			anims.update(meta, {visible});
-		} else {
-			if (!meta.data[index]) {
-				return;
-			}
-			me.setDataVisibility(datasetIndex, index, visible);
-		}
+		me.setDatasetVisibility(datasetIndex, visible);
+
+		// Animate visible state, so hide animation can be seen. This could be handled better if update / updateDataset returned a Promise.
+		anims.update(meta, {visible});
+
+		// First update everything else, but the dataset that is changing visibility
 		meta._skipUpdate = true;
 		me.update();
+		// Then update the dataset with proper mode.
 		meta._skipUpdate = false;
 		me.updateDataset(datasetIndex, mode);
 	}
 
-	hide(datasetIndex, index) {
-		this._updateVisibility(datasetIndex, index, false);
+	hide(datasetIndex) {
+		this._updateDatasetVisibility(datasetIndex, false);
 	}
 
-	show(datasetIndex, index) {
-		this._updateVisibility(datasetIndex, index, true);
+	show(datasetIndex) {
+		this._updateDatasetVisibility(datasetIndex, true);
 	}
 
 	/**