Black Lives Matter. Please consider donating to Black Girls Code today.

Extending heat map along X axis


I’m looking for a way to extend a heat map along the x axis, for a fixed range of y values. For example, I would want to monitor temperature over time, along a corridor with thermometers placed ~ every 30cm.

I’ve been playing around with the extendTraces function, and have come up with this
…but it seems a little…odd.
Is this possible with extendTraces? Or would I have to recall an entirely new set of data (from start to current time), and redraw the graph? What I like about extendTraces is, it won’t remove the graph while you’ve zoomed in.


The call signature in your codepen was a little bit off. Here’s a working version:

Yes, here’s how:

Ah, how frustrating! After making the pen and submitting this post, I then explored using the update method which had overwritten my original pen…which didn’t work.

The solution you proposed with extendTraces was exactly how I had it before, but when you click the start button, the new values are missing the z value at y0?

I had this problem too. Is it possible to make extendTraces add in values like you did with the update function?

Thank you so much for your reply!

edit: It’s missing the z value at b0,y0

Right, I see. I don’t think extendTraces is currently working correctly when trying to extend heatmap columns referenced by a 2D z array. I’ll have a deeper look at the issue next week.

In the meantime, I got extendTraces to work correctly with x/y/z column data:

1 Like

Thank you so much, etienne! That’s what I was looking for. I see now the format I would need, in order to use extendTraces with the heat map.

I would love an update if you find anything, but I wouldn’t want to trouble you too much about it. I The example you have provided is enough to get a working version going.

edit: Found the solution myself :slight_smile: .

Hi can you please share your working solution to extend trace of heatmap


How to add a custom tooltip to extended Traces. I have used your approach to add new traces but after second set custom tooltip applied on first heatmap item.

Hi abhishekhingu1,

The solution was to not use extendTraces . I modify the data in a worker and then pass it back to the main thread. I then call react to update the plot.