Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add options.interaction where options.hover and options.tooltips extend from #5889

Closed
wants to merge 1 commit into from
Closed

Add options.interaction where options.hover and options.tooltips extend from #5889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions docs/general/interactions/modes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -12,7 +14,7 @@ var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
interaction: {
mode: 'point'
}
}
Expand All @@ -27,7 +29,7 @@ var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
interaction: {
mode: 'nearest'
}
}
Expand All @@ -48,7 +50,7 @@ var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
interaction: {
mode: 'index'
}
}
Expand All @@ -62,7 +64,7 @@ var chart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
tooltips: {
interaction: {
mode: 'index',
axis: 'y'
}
Expand All @@ -81,7 +83,7 @@ var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
interaction: {
mode: 'dataset'
}
}
Expand All @@ -96,7 +98,7 @@ var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
interaction: {
mode: 'x'
}
}
Expand All @@ -111,7 +113,7 @@ var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
interaction: {
mode: 'y'
}
}
Expand Down
4 changes: 3 additions & 1 deletion samples/charts/line/multi-axis.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
interaction: {
mode: 'index'
},
stacked: false,
title: {
display: true,
Expand Down
6 changes: 4 additions & 2 deletions samples/charts/scatter/multi-axis.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
2 changes: 1 addition & 1 deletion src/controllers/controller.bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ var elements = require('../elements/index');
var helpers = require('../helpers/index');

defaults._set('bar', {
hover: {
interaction: {
mode: 'label'
},

Expand Down
2 changes: 1 addition & 1 deletion src/controllers/controller.bubble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ var elements = require('../elements/index');
var helpers = require('../helpers/index');

defaults._set('bubble', {
hover: {
interaction: {
mode: 'single'
},

Expand Down
2 changes: 1 addition & 1 deletion src/controllers/controller.doughnut.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
6 changes: 2 additions & 4 deletions src/controllers/controller.horizontalBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ var BarController = require('./controller.bar');
var defaults = require('../core/core.defaults');

defaults._set('horizontalBar', {
hover: {
interaction: {
mode: 'index',
axis: 'y'
},
Expand Down Expand Up @@ -55,9 +55,7 @@ defaults._set('horizontalBar', {
var datasetLabel = data.datasets[item.datasetIndex].label || '';
return datasetLabel + ': ' + item.xLabel;
}
},
mode: 'index',
axis: 'y'
}
}
});

Expand Down
2 changes: 1 addition & 1 deletion src/controllers/controller.line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ defaults._set('line', {
showLines: true,
spanGaps: false,

hover: {
interaction: {
mode: 'label'
},

Expand Down
2 changes: 1 addition & 1 deletion src/controllers/controller.scatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ var LineController = require('./controller.line');
var defaults = require('../core/core.defaults');

defaults._set('scatter', {
hover: {
interaction: {
mode: 'single'
},

Expand Down
28 changes: 20 additions & 8 deletions src/core/core.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
}
Expand All @@ -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();
Expand Down
8 changes: 8 additions & 0 deletions src/core/core.interaction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 0 additions & 2 deletions src/core/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ defaults._set('global', {
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
hover: {
onHover: null,
mode: 'nearest',
intersect: true,
animationDuration: 400
},
onClick: null,
Expand Down
2 changes: 0 additions & 2 deletions src/core/core.tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
7 changes: 5 additions & 2 deletions test/specs/core.controller.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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({
Expand Down