Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 89422ba

Browse filesBrowse files
committed
add %{label} & %{value} to bar hovertemplate
1 parent 7717428 commit 89422ba
Copy full SHA for 89422ba

File tree

5 files changed

+83
-2
lines changed
Filter options

5 files changed

+83
-2
lines changed

‎src/traces/bar/constants.js

Copy file name to clipboardExpand all lines: src/traces/bar/constants.js
+7-2Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
'use strict';
1111

1212
module.exports = {
13-
TEXTPAD: 3, // padding in pixels around text
14-
eventDataKeys: []
13+
// padding in pixels around text
14+
TEXTPAD: 3,
15+
// 'value' and 'label' are not really necessary for bar traces,
16+
// but they were made available to `texttemplate` (maybe by accident)
17+
// via tokens `%{value}` and `%{label}` starting in 1.50.0,
18+
// so let's include them in the event data also.
19+
eventDataKeys: ['value', 'label']
1520
};

‎src/traces/bar/event_data.js

Copy file name to clipboard
+27Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright 2012-2019, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
module.exports = function eventData(out, pt, trace) {
12+
// standard cartesian event data
13+
out.x = 'xVal' in pt ? pt.xVal : pt.x;
14+
out.y = 'yVal' in pt ? pt.yVal : pt.y;
15+
if(pt.xa) out.xaxis = pt.xa;
16+
if(pt.ya) out.yaxis = pt.ya;
17+
18+
if(trace.orientation === 'h') {
19+
out.label = out.y;
20+
out.value = out.x;
21+
} else {
22+
out.label = out.x;
23+
out.value = out.y;
24+
}
25+
26+
return out;
27+
};

‎src/traces/bar/hover.js

Copy file name to clipboardExpand all lines: src/traces/bar/hover.js
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ var Color = require('../../components/color');
1515

1616
var fillText = require('../../lib').fillText;
1717
var getLineWidth = require('./helpers').getLineWidth;
18+
var hoverLabelText = require('../../plots/cartesian/axes').hoverLabelText;
1819

1920
function hoverPoints(pointData, xval, yval, hovermode) {
2021
var barPointData = hoverOnBars(pointData, xval, yval, hovermode);
@@ -151,6 +152,9 @@ function hoverOnBars(pointData, xval, yval, hovermode) {
151152
pointData[posLetter + '1'] = pa.c2p(isClosest ? maxPos(di) : extent[1], true);
152153
pointData[posLetter + 'LabelVal'] = di.p;
153154

155+
pointData.labelLabel = hoverLabelText(pa, pointData[posLetter + 'LabelVal']);
156+
pointData.valueLabel = hoverLabelText(sa, pointData[sizeLetter + 'LabelVal']);
157+
154158
// spikelines always want "closest" distance regardless of hovermode
155159
pointData.spikeDistance = (sizeFn(di) + thisBarPositionFn(di)) / 2 + maxSpikeDistance - maxHoverDistance;
156160
// they also want to point to the data value, regardless of where the label goes

‎src/traces/bar/index.js

Copy file name to clipboardExpand all lines: src/traces/bar/index.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
style: require('./style').style,
2323
styleOnSelect: require('./style').styleOnSelect,
2424
hoverPoints: require('./hover').hoverPoints,
25+
eventData: require('./event_data'),
2526
selectPoints: require('./select'),
2627

2728
moduleType: 'trace',

‎test/jasmine/tests/bar_test.js

Copy file name to clipboardExpand all lines: test/jasmine/tests/bar_test.js
+44Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2325,6 +2325,50 @@ describe('bar hover', function() {
23252325
.catch(failTest)
23262326
.then(done);
23272327
});
2328+
2329+
it('should allow both x/y tokens and label/value tokens', function(done) {
2330+
gd = createGraphDiv();
2331+
2332+
function _hover(xpx, ypx) {
2333+
return function() {
2334+
Fx.hover(gd, {xpx: xpx, ypx: ypx}, 'xy');
2335+
Lib.clearThrottle();
2336+
};
2337+
}
2338+
2339+
Plotly.plot(gd, {
2340+
data: [{
2341+
type: 'bar',
2342+
x: ['a', 'b'],
2343+
y: ['1000', '1200'],
2344+
hovertemplate: ['%{x} is %{y}', '%{label} is %{value}']
2345+
}],
2346+
layout: {
2347+
xaxis: { tickprefix: '*', ticksuffix: '*' },
2348+
yaxis: { tickprefix: '$', ticksuffix: ' !', tickformat: '.2f'},
2349+
width: 400,
2350+
height: 400,
2351+
margin: {l: 0, t: 0, r: 0, b: 0},
2352+
hovermode: 'closest'
2353+
}
2354+
})
2355+
.then(_hover(100, 200))
2356+
.then(function() {
2357+
assertHoverLabelContent({
2358+
nums: '*a* is $1000.00 !',
2359+
name: 'trace 0'
2360+
});
2361+
})
2362+
.then(_hover(300, 200))
2363+
.then(function() {
2364+
assertHoverLabelContent({
2365+
nums: '*b* is $1200.00 !',
2366+
name: 'trace 0'
2367+
});
2368+
})
2369+
.catch(failTest)
2370+
.then(done);
2371+
});
23282372
});
23292373

23302374
describe('with special width/offset combinations', function() {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.