diff --git a/docs/charts/line.md b/docs/charts/line.md
index bd2a24c98d2..dd4b4f9c2d1 100644
--- a/docs/charts/line.md
+++ b/docs/charts/line.md
@@ -52,6 +52,13 @@ The line chart allows a number of properties to be specified for each dataset. T
| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
| [`fill`](#line-styling) | boolean|string
| Yes | - | `true`
+| [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
+| [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
+| [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
+| [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
+| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
| [`label`](#general) | `string` | - | - | `''`
| [`lineTension`](#line-styling) | `number` | - | - | `0.4`
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
diff --git a/docs/charts/radar.md b/docs/charts/radar.md
index e5f3b313766..0985341d5ea 100644
--- a/docs/charts/radar.md
+++ b/docs/charts/radar.md
@@ -73,6 +73,13 @@ The radar chart allows a number of properties to be specified for each dataset.
| [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
+| [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
+| [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
+| [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
+| [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
+| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
| [`fill`](#line-styling) | boolean|string
| Yes | - | `true`
| [`label`](#general) | `string` | - | - | `''`
| [`lineTension`](#line-styling) | `number` | - | - | `0`
diff --git a/docs/general/options.md b/docs/general/options.md
index a43ad3f1912..f34789b3d3d 100644
--- a/docs/general/options.md
+++ b/docs/general/options.md
@@ -43,5 +43,6 @@ The context object contains the following properties:
- `dataIndex`: index of the current data
- `dataset`: dataset at index `datasetIndex`
- `datasetIndex`: index of the current dataset
+- `hover`: true if hovered
**Important**: since the context can represent different types of entities (dataset, data, etc.), some properties may be `undefined` so be sure to test any context property before using it.
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 694e7764611..9a051878b7d 100644
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -955,15 +955,19 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
},
updateHoverStyle: function(elements, mode, enabled) {
- var method = enabled ? 'setHoverStyle' : 'removeHoverStyle';
+ var prefix = enabled ? 'set' : 'remove';
var element, i, ilen;
for (i = 0, ilen = elements.length; i < ilen; ++i) {
element = elements[i];
if (element) {
- this.getDatasetMeta(element._datasetIndex).controller[method](element);
+ this.getDatasetMeta(element._datasetIndex).controller[prefix + 'HoverStyle'](element);
}
}
+
+ if (mode === 'dataset') {
+ this.getDatasetMeta(elements[0]._datasetIndex).controller['_' + prefix + 'DatasetHoverStyle']();
+ }
},
/**
diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
index 0df3ed60206..2d8972e6e2f 100644
--- a/src/core/core.datasetController.js
+++ b/src/core/core.datasetController.js
@@ -356,7 +356,7 @@ helpers.extend(DatasetController.prototype, {
/**
* @private
*/
- _resolveDatasetElementOptions: function(element) {
+ _resolveDatasetElementOptions: function(element, hover) {
var me = this;
var chart = me.chart;
var datasetOpts = me._config;
@@ -364,21 +364,23 @@ helpers.extend(DatasetController.prototype, {
var options = chart.options.elements[me.datasetElementType.prototype._type] || {};
var elementOptions = me._datasetElementOptions;
var values = {};
- var i, ilen, key;
+ var i, ilen, key, readKey;
// Scriptable options
var context = {
chart: chart,
dataset: me.getDataset(),
- datasetIndex: me.index
+ datasetIndex: me.index,
+ hover: hover
};
for (i = 0, ilen = elementOptions.length; i < ilen; ++i) {
key = elementOptions[i];
+ readKey = hover ? 'hover' + key.charAt(0).toUpperCase() + key.slice(1) : key;
values[key] = resolve([
- custom[key],
- datasetOpts[key],
- options[key]
+ custom[readKey],
+ datasetOpts[readKey],
+ options[readKey]
], context);
}
@@ -468,6 +470,42 @@ helpers.extend(DatasetController.prototype, {
model.borderWidth = resolve([custom.hoverBorderWidth, dataset.hoverBorderWidth, model.borderWidth], undefined, index);
},
+ /**
+ * @private
+ */
+ _removeDatasetHoverStyle: function() {
+ var element = this.getMeta().dataset;
+
+ if (element) {
+ this.removeHoverStyle(element);
+ }
+ },
+
+ /**
+ * @private
+ */
+ _setDatasetHoverStyle: function() {
+ var element = this.getMeta().dataset;
+ var prev = {};
+ var i, ilen, key, keys, hoverOptions, model;
+
+ if (!element) {
+ return;
+ }
+
+ model = element._model;
+ hoverOptions = this._resolveDatasetElementOptions(element, true);
+
+ keys = Object.keys(hoverOptions);
+ for (i = 0, ilen = keys.length; i < ilen; ++i) {
+ key = keys[i];
+ prev[key] = model[key];
+ model[key] = hoverOptions[key];
+ }
+
+ element.$previousStyle = prev;
+ },
+
/**
* @private
*/
diff --git a/test/specs/controller.line.tests.js b/test/specs/controller.line.tests.js
index 953594deac1..ca792f4e573 100644
--- a/test/specs/controller.line.tests.js
+++ b/test/specs/controller.line.tests.js
@@ -895,6 +895,34 @@ describe('Chart.controllers.line', function() {
expect(point._model.borderWidth).toBe(2);
expect(point._model.radius).toBe(3);
});
+
+ it ('should handle dataset hover styles defined via dataset properties', function() {
+ var chart = this.chart;
+ var point = chart.getDatasetMeta(0).data[0];
+ var dataset = chart.getDatasetMeta(0).dataset;
+
+ Chart.helpers.merge(chart.data.datasets[0], {
+ backgroundColor: '#AAA',
+ borderColor: '#BBB',
+ borderWidth: 6,
+ hoverBackgroundColor: '#000',
+ hoverBorderColor: '#111',
+ hoverBorderWidth: 12
+ });
+
+ chart.options.hover = {mode: 'dataset'};
+ chart.update();
+
+ jasmine.triggerMouseEvent(chart, 'mousemove', point);
+ expect(dataset._model.backgroundColor).toBe('#000');
+ expect(dataset._model.borderColor).toBe('#111');
+ expect(dataset._model.borderWidth).toBe(12);
+
+ jasmine.triggerMouseEvent(chart, 'mouseout', point);
+ expect(dataset._model.backgroundColor).toBe('#AAA');
+ expect(dataset._model.borderColor).toBe('#BBB');
+ expect(dataset._model.borderWidth).toBe(6);
+ });
});
it('should allow 0 as a point border width', function() {