Skip to content

provide option to display totals on top of each bar #5375

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

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

provide option to display totals on top of each bar #5375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f99ee3b
[Bars] Add possibility to display totals for bars
wilhelmhb Jan 6, 2021
9493050
[Bars] Force text to be inside if total is to be displayed
wilhelmhb Jan 6, 2021
0743a99
[Bars] Option to display totals on top of each bar
wilhelmhb Jan 7, 2021
0883ffd
Merge branch 'master' of https://github.com/plotly/plotly.js into bar…
wilhelmhb Jul 13, 2022
66852fb
[Bars] Fix option name for displaying totals
wilhelmhb Jul 13, 2022
db3d1d6
[Bars] Add test for displaying totals
wilhelmhb Jul 13, 2022
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: 15 additions & 1 deletion src/traces/bar/layout_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,19 @@ module.exports = {
'Sets the gap (in plot fraction) between bars of',
'the same location coordinate.'
].join(' ')
}
},
barshowtotal: {
valType: 'boolean',
dflt: false,
role: 'style',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no longer role needed for attributes like this one.
Please remove the role: 'style', line.

editType: 'plot',
description: 'Display the total value of each bar.'
},
totaltemplate: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may want this attribute or a similar one to control hover.
It may be better to have

stackbartotal: {
  texttemplate: ...,
  hovertemplate: ...
}

And there is no need for barshowtotal as it could be enabled by texttemplate.

valType: 'string',
dflt: '%{total}',
role: 'style',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no longer role needed for attributes like this one.
Please remove the role: 'style', line.

editType: 'plot',
description: 'Template to display the total value of each bar.'
},
};
2 changes: 2 additions & 0 deletions src/traces/bar/layout_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,6 @@ module.exports = function(layoutIn, layoutOut, fullData) {

coerce('bargap', (shouldBeGapless && !gappedAnyway) ? 0 : 0.2);
coerce('bargroupgap');
var showTotal = coerce('barshowtotal');
if(showTotal) coerce('totaltemplate');
};
49 changes: 47 additions & 2 deletions src/traces/bar/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,9 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback)
}

appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCompleteCallback);
if(fullLayout.barshowtotal) {
appendBarTotal(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCompleteCallback);
}

if(plotinfo.layerClipId) {
Drawing.hideOutsideRangePoint(di, bar.select('text'), xa, ya, trace.xcalendar, trace.ycalendar);
Expand All @@ -267,7 +270,7 @@ function appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCom
var textPosition;

function appendTextNode(bar, text, font) {
var textSelection = Lib.ensureSingle(bar, 'text')
var textSelection = Lib.ensureSingle(bar, 'text', 'bartext-' + textPosition)
.text(text)
.attr({
'class': 'bartext bartext-' + textPosition,
Expand All @@ -287,7 +290,7 @@ function appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCom
var isHorizontal = (trace.orientation === 'h');

var text = getText(fullLayout, cd, i, xa, ya);
textPosition = getTextPosition(trace, i);
textPosition = fullLayout.barshowtotal ? 'inside' : getTextPosition(trace, i);

// compute text position
var inStackOrRelativeMode =
Expand Down Expand Up @@ -435,6 +438,48 @@ function appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCom
.attr('transform', Lib.getTextTransform(transform));
}

// total for stacked bars
function appendBarTotal(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCompleteCallback) {
var fullLayout = gd._fullLayout;
// get trace attributes
var trace = cd[0].trace;
var isHorizontal = (trace.orientation === 'h');
var inStackOrRelativeMode =
opts.mode === 'stack' ||
opts.mode === 'relative';
var calcBar = cd[i];
var isOutmostBar = !inStackOrRelativeMode || calcBar._outmost;

if(isOutmostBar) {
var layoutFont = fullLayout.font;
var font = style.getOutsideTextFont(trace, i, layoutFont);
var totalTemplate = fullLayout.totaltemplate;
var obj = {total: isHorizontal ? calcBar.x : calcBar.y};
var totalText = Lib.texttemplateString(totalTemplate, obj, fullLayout._d2locale, {}, obj, trace._meta || {});
var totalSelection = Lib.ensureSingle(bar, 'text', 'bartext-outside')
.text(totalText)
.attr({
'class': 'bartext bartext-outside',
'text-anchor': 'middle',
// prohibit tex interpretation until we can handle
// tex and regular text together
'data-notex': 1
})
.call(Drawing.font, font)
.call(svgTextUtils.convertToTspans, gd);

var textBB = Drawing.bBox(totalSelection.node());
var transform = toMoveOutsideBar(x0, x1, y0, y1, textBB, {
isHorizontal: isHorizontal,
constrained: false,
angle: trace.textangle
});

transition(totalSelection, fullLayout, opts, makeOnCompleteCallback)
.attr('transform', Lib.getTextTransform(transform));
}
}

function getRotateFromAngle(angle) {
return (angle === 'auto') ? 0 : angle;
}
Expand Down
34 changes: 34 additions & 0 deletions test/image/mocks/bar_stackrelative_negative_total.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"data":[
{
"name":"Col1",
"y":["-1","2","3","4","5"],
"x":["1","2","3","4","5"],
"type":"bar"
},
{
"name":"Col2",
"y":["2","3","4","-3","2"],
"x":["1","2","3","4","5"],
"type":"bar"
},
{
"name":"Col3",
"y":["5","4","3","-2","1"],
"x":["1","2","3","4","5"],
"type":"bar"
},
{
"name":"Col4",
"y":["-3","0","1","0","-3"],
"x":["1","2","3","4","5"],
"type":"bar"
}
],
"layout":{
"height":400,
"width":400,
"barshowtotal": true,
"barmode":"relative"
}
}