Logic of the heat map in plotly js

plotly.js
1

Hi,
https://jsfiddle.net/1yLavejg/10/
In my heatmap some values are plotting incorrect. ex see the tool tip of x value 16:20:52, 16:20:54.
Here y value is showing 475 instead of 300 and bar also plotted up to 700 range of y-axis.
As per my knowledge, the problem is highest value and second highest of y-values are getting problem.
In my data highest value of yvalue is 1100 and second highest value of y value is 300. Here plotting 300 is giving problem
How the plotly is plotting heat map logic.

thx
Lavanya.

2

or in other words, can anyone of you explain the current logic of the heatmap? or it is buggy?
I expect this forum to be very active…

3

Looks like something is off here, possible related to https://github.com/plotly/plotly.js/issues/1117

In the meantime, I’d recommend converting your z array in a 2D array as in https://jsfiddle.net/1yLavejg/16/

4

Either there is a bug in Plotly.js, or the docs aren’t explaining well.

I have a heatmap using the "Greens" color scale (using 100 - value to make high values be green instead of no green).

I have only four cells in the plot. Here are my Z values:

[
  [100 - 99.22473078966097, 100 - 99.97762449215773]
  [100 - 99.99976697347195, 100 - 99.99756040043489]
]

As you can see, all four values are very similar, yet for some odd reason one cell is always opposite color:

heatmap
heatmap816×386 1.48 KB

5

I think I see what the issue is in my case: the data always has a min and max value (hence the visual always has a maximum green cell and a minimum green cell). The question is, how do I tell it to pick the color scale based on a predefined range of values, not a range that is based on the current data?

EDIT:

Ah, yep. I needed to specify zmin and zmax for things to work as expected. I had assumed, based on the examples, that heat maps were calculated from a default range of 1 to 100.