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() {