Colorbar Orientation Change Causes Render Issue #6973

Activity

1. archmoj

   added

   bugsomething brokensomething broken

   on Apr 17, 2024
2. gvwilson

   self-assigned this

   on Jul 12, 2024
3. gvwilson

   removed their assignment

   on Aug 2, 2024
4. gvwilson

   added

   P3backlogbacklog

   on Aug 9, 2024
5. emilykl

   added

   good for agent

   on Aug 28, 2026
6. nwiswell commented on Sep 29, 2026

   

   nwiswell

   on Sep 29, 2026

   More actions

   I can reproduce this on plotly.js 3.5.1, 4.1.1, and main at 8983c11.

   const z = [[1, 2], [3, 4]];
   const layout = { width: 500, height: 400 };
   
   // 1. The tick labels of the horizontal colorbar stay after the change to vertical.
   await Plotly.newPlot(gd, [{ type: 'heatmap', z, colorbar: { orientation: 'h' } }], layout);
   await Plotly.react(gd, [{ type: 'heatmap', z, colorbar: { orientation: 'v' } }], layout);
   
   // 2. The title of the vertical colorbar stays after the change to horizontal.
   await Plotly.newPlot(gd, [{ type: 'heatmap', z, colorbar: { title: { text: 'Vertical title' } } }], layout);
   await Plotly.react(gd, [{ type: 'heatmap', z, colorbar: { orientation: 'h', len: 0.2 } }], layout);

   Version	Case 1	Case 2
   4.1.1 and main	Two sets of tick labels. The plot width drops to 64 px. A fresh newPlot gives 331 px.	Stale tick labels and "Vertical title". The plot height drops to 64 px. A fresh newPlot gives 205 px.
   3.5.1	Same as 4.1.1	Plotly.react throws "Something went wrong with axis scaling".

   Plotly.restyle(gd, {'colorbar.orientation': 'v'}) gives the same stale tick labels as case 1.

   The colorbar axis id starts with the orientation letter: x for a horizontal colorbar and y for a vertical colorbar (mockColorBarAxis in src/components/colorbar/draw.js). The tick label groups and the title elements use this id in their class. The cleanup before a redraw selects only the classes for the current letter. Thus the elements of the previous orientation stay in the colorbar group. positionCB measures the stale elements with Drawing.bBox, and the colorbar pushes a margin that is too large.

   A horizontal colorbar has the title side right by default. For this side, drawAxis measures the stale title as the title width. On 3.x, this width can invert the axis domain, and setScale throws. #7908 clamps the domain since 4.0.0, so the throw stops, but the stale elements stay.

   Workaround: give the trace a new uid when colorbar.orientation changes. The colorbar then gets a new group.

   I have a fix with a jasmine test, and I can open a pull request.
7. camdecoster commented on Sep 29, 2026

   

   camdecoster

   on Sep 29, 2026

   Contributor

   More actions

   I'll review your proposed solution and follow up.