Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Restyle a heatmap

I’d like to update the data of a heatmap.
I understand that restlye is faster than newPlot.

The problem is that I cannot make it work: when I call restyle with exactly the same data as the one I used to create the heatmap, the heatmap is completely broken.

See this codepen.

Please help.

That’s because restyle doesn’t expect the same input arguments as new newPlot.

Here’s how to make your example work:

Assuming you already looked at, has more info on how restyle works.

Thanks a lot Etienne. This was exactly what I was looking for!

Regarding the performance of updating the data of a heatmap.

I have a 50x50 data matrix.
With restyle, on my MacBookPro it takes between 50 and 100 msec to redraw the heatmap depending on the browser:

  • Safari 10.0.3: 50 msec
  • Chrome 57: 80 msec
  • Firefox 52: 100 msec

Here is the codepen

What could I do in order to make the heatmap render faster?


You can try setting the xaxis and yaxis range fields so that plotly.js doesn’t have to go though its auto-range routine.

Apart form that, that’s about as fast as you can do at the moment with heatmap. Maybe heatmapgl would perform better, but I have my doubts.

Thanks a lot Etienne!
With heatmapgl and autorange: false, it gets down to 35mec on Chrome.