HEATMAP: Blending of Z values to fill in gaps in x value data

[AndrewJohnBenjamin]

Hi, I am creating a heatmap that can contain gaps in its x-axis data. For instance, my x-axis may look like this. 1, 2, 3, 4, 5, 6, 11, 12, 13, 14.

When I render my heatmap I am noticing that plotly is blending the Z values either side of this gap across the gap to fill it in. i.e. Plotly will blend the Z values for 6 and 11 together to bridge the gap in x values. Is there a way to prevent this and just have plotly render a white space or a solid colour instead?

Kind Regards,
Andy

[etpinard]

Using nulls should do the trick, unless I'm not understanding what you're looking for correctly.

Are looking for something like: https://codepen.io/etpinard/pen/RjjvLe?editors=0010 ?

[AndrewJohnBenjamin]

That is exactly the type of thing I am looking for. However, the original data is very large and its not really feasible to iterate through it filling in the gaps with null values for performance reasons. Is there another way to achieve this or without manipulating the source data?

[etpinard]

So if I understand correctly, you expect:

{
  type: 'heatmap',
  x: [1, 2, 3, 4, 5, 6, 11, 12, 13, 14],
  z: [[1, 2, 3, 4, 5, 6, 11, 12, 13, 14]]
}

to give

where each x item correspond to a single brick of width 1.

---

Related: #1117

[AndrewJohnBenjamin]

Correct, this is exactly the behaviour I am looking for. At the moment plotly is bridging the gap by blending the z values either side of it. See below.

Notice the area where the gap in x values is and how plotly has blended the z-values either side of it, Instead of this blending, I wish it to be whitespace, exactly as in your example above.

Note: In the above image, the zsmooth option has been set to false

[etpinard]

Ok @AndrewJohnBenjamin - this sounds like a fairly common use case. I don't think this constitute a bug however. To me, he best way to implement this would be adding an attribute like brickwidth.

[AndrewJohnBenjamin]

Can you provide me with a very basic example of how to implement this please? I've checked the api docs and I cannot find a reference to 'brickwidth' in there anywhere. I can see a 'xgap' attribute that sets the width of bricks on the chart but nothing about 'brickwidth' itself. Also, if I were to set this attribute, wouldnt it effect the entire chart by manipulating the size of every brick?

[etpinard]

Can you provide me with a very basic example of how to implement this please?

By implementing, you mean adding this feature to the library, or simply fixing your graph?

If the latter then there's no easy way I'm afraid at the moment. I'd recommend adding nulls like mentioned in #2167 (comment)

[AndrewJohnBenjamin]

understood. Sorry, seemed to have got our wires crossed then. If this is the only way currently then at least I can work with it; was just wondering if the library already provided a way around it; but you have answered that now. Thanks for your help on this one :)

[AndrewJohnBenjamin]

Just a quick update on this, I solved this issue by ensure that the last set of values before the gap and the first set of values after the gap are all null. That when when plotly blends these values across the gap, it is blending null with null, and the gap is therefore white. This was a better solution than manually populating all the x values in the gap with nulls for obvious performance reasons

[niels-hop]

Is there a solution for this problem yet? It has been almost 3 years since this question was asked and I am seeing a lot of the same questions when i search for this issue with heatmaps.

[nicolaskruchten]

The solution listed above is still the recommended way to do this.

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson