Clamp colorbar axis domain to prevent inversion errors

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)]

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;
                     }

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;