Heatmap colors not rendering properly

plotly.js
1

The values that I plotted on the heatmap range from 0 to 2.5. However, the color bar does not show the correct range, and the colors are not rendering properly. All values above 79% should be red, but that is not happening. For example, one of the data points is 1.3, which is 52% of the range, but it is still red.

var heatmapData = [{
x: x,
y: y,
z: z,
type: ‘heatmap’,
colorscale: [
[0, ‘white’],
[0.50, ‘white’],

		[0.50, 'grey'],
		[0.79, 'grey'],

		[0.79, 'red'],
		[1.0, 'red']
	],
  	colorbar: {
		autotick: false,
		tick0: 0,
		dtick: 1,
  		title: colorTitle,
  		len: 0.5,
  	},
  	zmin: minMax[0],
  	zmax: minMax[1]
}];

image
image1065×712 28.1 KB

image

2

@gclopton1001

See my answer to your previous question: Heatmap Color Scale
The color mapping of data occurs in two steps: first the range of values is mapped to [0,1] through the normalization function. Then to each normal (i.e. a value in [0,1]) one associates the corresponding color in the colorscale.

3

The values that I plotted on the heat map range from 0 to 2.5. However, the color bar does not show the correct range.