diff --git a/draftlogs/7908_fix.md b/draftlogs/7908_fix.md new file mode 100644 index 00000000000..955c79cea16 --- /dev/null +++ b/draftlogs/7908_fix.md @@ -0,0 +1 @@ + - Fix crash ("Something went wrong with axis scaling") when a colorbar's title or padding leaves it with a negative domain length [[#7908](https://github.com/plotly/plotly.js/pull/7908)] diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index 3fe5a5e9ce3..df9f220389c 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -302,10 +302,10 @@ function drawColorBar(g, opts, gd) { // allow it outside [0,1] ax.domain = isVertical ? [ vFrac + ypad / gs.h, - vFrac + lenFrac - ypad / gs.h + Math.max(vFrac + lenFrac - ypad / gs.h, vFrac + ypad / gs.h) ] : [ vFrac + xpad / gs.w, - vFrac + lenFrac - xpad / gs.w + Math.max(vFrac + lenFrac - xpad / gs.w, vFrac + xpad / gs.w) ]; ax.setScale(); @@ -473,10 +473,10 @@ function drawColorBar(g, opts, gd) { titleHeight += 5; if(titleSide === 'top') { - ax.domain[1] -= titleHeight / gs.h; + ax.domain[1] = Math.max(ax.domain[1] - titleHeight / gs.h, ax.domain[0]); titleTrans[1] *= -1; } else { - ax.domain[0] += titleHeight / gs.h; + ax.domain[0] = Math.min(ax.domain[0] + titleHeight / gs.h, ax.domain[1]); var nlines = svgTextUtils.lineCount(titleText); titleTrans[1] += (1 - nlines) * lineSize; } diff --git a/test/jasmine/tests/colorbar_test.js b/test/jasmine/tests/colorbar_test.js index 99fa90e5e5b..6dbd1042b93 100644 --- a/test/jasmine/tests/colorbar_test.js +++ b/test/jasmine/tests/colorbar_test.js @@ -95,6 +95,57 @@ describe('Test colorbar:', function() { .then(done, done.fail); }); + // see https://github.com/plotly/plotly.js/issues/6499 + it('does not throw when the colorbar is too short for its own length/padding', function(done) { + Plotly.newPlot(gd, [{ + type: 'scatter', + mode: 'markers', + x: [1, 2, 3], + y: [1, 2, 3], + marker: { + color: [1, 2, 3], + colorbar: {len: 0.01, thickness: 30} + } + }], {width: 300, height: 120}) + .then(done, done.fail); + }); + + it('does not throw when a top-side colorbar title is taller than the colorbar', function(done) { + Plotly.newPlot(gd, [{ + type: 'scatter', + mode: 'markers', + x: [1, 2, 3], + y: [1, 2, 3], + marker: { + color: [1, 2, 3], + colorbar: { + title: {text: 'Long title', side: 'top', font: {size: 60}}, + len: 0.3, + thickness: 30 + } + } + }], {width: 300, height: 120}) + .then(done, done.fail); + }); + + it('does not throw when a bottom-side colorbar title is taller than the colorbar', function(done) { + Plotly.newPlot(gd, [{ + type: 'scatter', + mode: 'markers', + x: [1, 2, 3], + y: [1, 2, 3], + marker: { + color: [1, 2, 3], + colorbar: { + title: {text: 'Long title', side: 'bottom', font: {size: 60}}, + len: 0.3, + thickness: 30 + } + } + }], {width: 300, height: 120}) + .then(done, done.fail); + }); + function assertCB(msg, present, opts) { var expandedMarginR = opts.expandedMarginR; var expandedMarginT = opts.expandedMarginT;