diff --git a/docs/general/interactions/modes.md b/docs/general/interactions/modes.md index d6a8c261fba..56b0d7eeb71 100644 --- a/docs/general/interactions/modes.md +++ b/docs/general/interactions/modes.md @@ -2,6 +2,8 @@ When configuring interaction with the graph via hover or tooltips, a number of different modes are available. +`options.hover` and `options.tooltips` extend from `options.interaction`. So if `mode`, `intersect` or any other common settings are configured only in `options.interaction`, both hover and tooltips obey that. + The modes are detailed below and how they behave in conjunction with the `intersect` setting. ## point @@ -12,7 +14,7 @@ var chart = new Chart(ctx, { type: 'line', data: data, options: { - tooltips: { + interaction: { mode: 'point' } } @@ -27,7 +29,7 @@ var chart = new Chart(ctx, { type: 'line', data: data, options: { - tooltips: { + interaction: { mode: 'nearest' } } @@ -48,7 +50,7 @@ var chart = new Chart(ctx, { type: 'line', data: data, options: { - tooltips: { + interaction: { mode: 'index' } } @@ -62,7 +64,7 @@ var chart = new Chart(ctx, { type: 'horizontalBar', data: data, options: { - tooltips: { + interaction: { mode: 'index', axis: 'y' } @@ -81,7 +83,7 @@ var chart = new Chart(ctx, { type: 'line', data: data, options: { - tooltips: { + interaction: { mode: 'dataset' } } @@ -96,7 +98,7 @@ var chart = new Chart(ctx, { type: 'line', data: data, options: { - tooltips: { + interaction: { mode: 'x' } } @@ -111,7 +113,7 @@ var chart = new Chart(ctx, { type: 'line', data: data, options: { - tooltips: { + interaction: { mode: 'y' } } diff --git a/samples/charts/line/multi-axis.html b/samples/charts/line/multi-axis.html index d3569e85525..07f082e6656 100644 --- a/samples/charts/line/multi-axis.html +++ b/samples/charts/line/multi-axis.html @@ -61,7 +61,9 @@ data: lineChartData, options: { responsive: true, - hoverMode: 'index', + interaction: { + mode: 'index' + }, stacked: false, title: { display: true, diff --git a/samples/charts/scatter/multi-axis.html b/samples/charts/scatter/multi-axis.html index 6c20b98f0de..6672f375073 100644 --- a/samples/charts/scatter/multi-axis.html +++ b/samples/charts/scatter/multi-axis.html @@ -87,8 +87,10 @@ data: scatterChartData, options: { responsive: true, - hoverMode: 'nearest', - intersect: true, + interaction: { + intersect: true, + mode: 'nearest' + }, title: { display: true, text: 'Chart.js Scatter Chart - Multi Axis' diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 760fd8887ef..ba66a68376a 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -6,7 +6,7 @@ var elements = require('../elements/index'); var helpers = require('../helpers/index'); defaults._set('bar', { - hover: { + interaction: { mode: 'label' }, diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js index 77956c9dc7b..93ca413f5af 100644 --- a/src/controllers/controller.bubble.js +++ b/src/controllers/controller.bubble.js @@ -6,7 +6,7 @@ var elements = require('../elements/index'); var helpers = require('../helpers/index'); defaults._set('bubble', { - hover: { + interaction: { mode: 'single' }, diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index b24a7a00e9f..d3830af6b17 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -12,7 +12,7 @@ defaults._set('doughnut', { // Boolean - Whether we animate scaling the Doughnut from the centre animateScale: false }, - hover: { + interaction: { mode: 'single' }, legendCallback: function(chart) { diff --git a/src/controllers/controller.horizontalBar.js b/src/controllers/controller.horizontalBar.js index b761c344403..e3496855a67 100644 --- a/src/controllers/controller.horizontalBar.js +++ b/src/controllers/controller.horizontalBar.js @@ -5,7 +5,7 @@ var BarController = require('./controller.bar'); var defaults = require('../core/core.defaults'); defaults._set('horizontalBar', { - hover: { + interaction: { mode: 'index', axis: 'y' }, @@ -55,9 +55,7 @@ defaults._set('horizontalBar', { var datasetLabel = data.datasets[item.datasetIndex].label || ''; return datasetLabel + ': ' + item.xLabel; } - }, - mode: 'index', - axis: 'y' + } } }); diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index fffb1ce55d2..e1c48235d2f 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -9,7 +9,7 @@ defaults._set('line', { showLines: true, spanGaps: false, - hover: { + interaction: { mode: 'label' }, diff --git a/src/controllers/controller.scatter.js b/src/controllers/controller.scatter.js index 319296d33ba..3086d26140b 100644 --- a/src/controllers/controller.scatter.js +++ b/src/controllers/controller.scatter.js @@ -4,7 +4,7 @@ var LineController = require('./controller.line'); var defaults = require('../core/core.defaults'); defaults._set('scatter', { - hover: { + interaction: { mode: 'single' }, diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 117a6d576ea..965cc42d737 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -12,6 +12,24 @@ var plugins = require('./core.plugins'); var scaleService = require('../core/core.scaleService'); var Tooltip = require('./core.tooltip'); +function mergeDefaults(options, type) { + options = helpers.configMerge( + defaults.global, + defaults[type], + options || {}); + + // Hover and tooltips follow interaction options by default. + options.hover = helpers.configMerge( + options.interaction, + options.hover); + + options.tooltips = helpers.configMerge( + options.interaction, + options.tooltips); + + return options; +} + module.exports = function(Chart) { // Create a dictionary of chart types, to allow for extension of existing types @@ -33,10 +51,7 @@ module.exports = function(Chart) { data.datasets = data.datasets || []; data.labels = data.labels || []; - config.options = helpers.configMerge( - defaults.global, - defaults[config.type], - config.options || {}); + config.options = mergeDefaults(config.options, config.type); return config; } @@ -52,10 +67,7 @@ module.exports = function(Chart) { layouts.removeBox(chart, scale); }); - newOptions = helpers.configMerge( - Chart.defaults.global, - Chart.defaults[chart.config.type], - newOptions); + newOptions = mergeDefaults(newOptions, chart.config.type); chart.options = chart.config.options = newOptions; chart.ensureScalesHaveIDs(); diff --git a/src/core/core.interaction.js b/src/core/core.interaction.js index 9b99e53bb1b..89720ff9da4 100644 --- a/src/core/core.interaction.js +++ b/src/core/core.interaction.js @@ -1,7 +1,15 @@ 'use strict'; +var defaults = require('./core.defaults'); var helpers = require('../helpers/index'); +defaults._set('global', { + interaction: { + mode: 'nearest', + intersect: true + }, +}); + /** * Helper function to get relative position for an event * @param {Event|IEvent} event - The event to get the position for diff --git a/src/core/core.js b/src/core/core.js index 906b897c699..e0dd8e7a20d 100644 --- a/src/core/core.js +++ b/src/core/core.js @@ -9,8 +9,6 @@ defaults._set('global', { events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'], hover: { onHover: null, - mode: 'nearest', - intersect: true, animationDuration: 400 }, onClick: null, diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index c3245d9cf1e..da3434aaf1d 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -8,9 +8,7 @@ defaults._set('global', { tooltips: { enabled: true, custom: null, - mode: 'nearest', position: 'average', - intersect: true, backgroundColor: 'rgba(0,0,0,0.8)', titleFontStyle: 'bold', titleSpacing: 2, diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js index cf9eb30a22b..75d2c969c92 100644 --- a/test/specs/core.controller.tests.js +++ b/test/specs/core.controller.tests.js @@ -69,7 +69,7 @@ describe('Chart', function() { var defaults = Chart.defaults; defaults.global.responsiveAnimationDuration = 42; defaults.global.hover.onHover = callback; - defaults.line.hover.mode = 'x-axis'; + defaults.line.interaction.mode = 'x-axis'; defaults.line.spanGaps = true; var chart = acquireChart({ @@ -83,12 +83,15 @@ describe('Chart', function() { expect(options.responsiveAnimationDuration).toBe(42); expect(options.hover.onHover).toBe(callback); expect(options.hover.mode).toBe('x-axis'); + expect(options.tooltips.mode).toBe('x-axis'); + expect(options.tooltips.position).toBe(defaults.global.tooltips.position); + expect(options.tooltips.callbacks.label).toBe(defaults.global.tooltips.callbacks.label); }); it('should override default options', function() { var defaults = Chart.defaults; defaults.global.responsiveAnimationDuration = 42; - defaults.line.hover.mode = 'x-axis'; + defaults.line.interaction.mode = 'x-axis'; defaults.line.spanGaps = true; var chart = acquireChart({