Responsive: true causes styling (colors) to disappear on resize

plotly.js
1

Here is the code I used to generate the images attached. The one without color is what happens when responsive is true, and a resize occurs. **It turns out it is due to the coloring: ‘heatmap’ option. When I select another option such as ‘lines’ or something else, it seems to work fine:

var data = [ {
    z: [[10, 10.625, 12.5, 15.625, 20],
        [5.625, 6.25, 8.125, 11.25, 15.625],
        [2.5, 3.125, 5.0, 8.125, 12.5],
        [0.625, 1.25, 3.125, 6.25, 10.625],
        [0, 0.625, 2.5, 5.625, 10]],
    type: 'contour',
    contours: {
      coloring: 'heatmap',
      showlabels: true,
      labelfont: {
        family: 'Raleway',
        size: 12,
        color: 'white',
      }
    }
  }];
  
var layout = {
    title: 'Contour with Labels'
}

Plotly.newPlot('contourDiv', data, layout, {responsive: true});

I also get this exception when responsive is on:

Error: <rect> attribute height: Expected length, "NaN".

after
after.png1078×375 16.4 KB
before
before.png1085×389 71.1 KB

2

Thanks very much for the report.

You can subscribe to https://github.com/plotly/plotly.js/issues/3858 for the most up-to-date development info.