Skip to content

GitHub Issue #1434 Add visual padding to automatically generated X and Y axis ranges in charts #7964

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
cnathe wants to merge 3 commits into
base: develop
Choose a base branch
from
+26 −0
Open

GitHub Issue #1434 Add visual padding to automatically generated X and Y axis ranges in charts #7964

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb09a0f
GitHub Issue #1434: Charting update to add 5% padding on auto-compute…
cnathe Aug 20, 2026
110523b
Merge remote-tracking branch 'origin/develop' into fb_chartPadding1434
cnathe Aug 21, 2026
5a492c8
Claude CR - restrict padding to axis aes
cnathe Aug 21, 2026
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
26 changes: 26 additions & 0 deletions core/webapp/vis/src/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,8 +469,15 @@ boxPlot.render();
return domain;
};

// size/color scales map data onto an aesthetic range rather than a visible axis, so they are never domain-padded.
var isAxisAes = function(aesName) {
return aesName == 'x' || aesName == 'xTop' || aesName == 'xSub' || aesName == 'yLeft' || aesName == 'yRight';
};

var getContinuousDomain = function(aesName, userScale, data, acc, errorAes) {
var userMin, userMax, min, max, minAcc, maxAcc;
var minFromUser = false, maxFromUser = false;
var PADDING = 0.05; // GitHub Issue #1434: 5% padding on auto-computed domain bounds

if (userScale && userScale.domain) {
userMin = userScale.domain[0];
Expand All @@ -479,6 +486,7 @@ boxPlot.render();

if (LABKEY.vis.isValid(userMin)) {
min = userMin;
minFromUser = true;
} else {
if ((aesName == 'yLeft' || aesName == 'yRight') && errorAes) {
minAcc = function(d) {
Expand All @@ -498,6 +506,7 @@ boxPlot.render();

if (LABKEY.vis.isValid(userMax)) {
max = userMax;
maxFromUser = true;
} else {
if ((aesName == 'yLeft' || aesName == 'yRight') && errorAes) {
maxAcc = function(d) {
Expand All @@ -520,6 +529,23 @@ boxPlot.render();
min = min - 1;
}
}
else if (isAxisAes(aesName) && LABKEY.vis.isValid(min) && LABKEY.vis.isValid(max)
&& (!minFromUser || !maxFromUser)) {
// Add padding so data points don't sit on the plot edges. Only pad
// bounds that were auto-computed; respect any user-specified bound exactly.
if (userScale && userScale.trans && userScale.trans === 'log' && min > 0) {
// Pad in log space so proportions are preserved and values stay > 0.
var logRange = (Math.log(max) - Math.log(min)) * PADDING;
if (!minFromUser) min = Math.exp(Math.log(min) - logRange);
if (!maxFromUser) max = Math.exp(Math.log(max) + logRange);
}
else {
var range = (max - min) * PADDING;
// Don't push a non-negative min below zero (zero-anchored data reads better flush)
if (!minFromUser) min = (min >= 0) ? Math.max(0, min - range) : min - range;
if (!maxFromUser) max = max + range;
}
}

// Keep time charts from getting in a bad state.
// They currently rely on us rendering an empty grid when there is an invalid x-axis.
Expand Down