Plotly.js: Plotly Unified Color Scale

[hiteshsahu]

I am using plotly.js to plot graph in HTML5 Web app. The problem is the colorbar change its color scale depending on input values. Plotly assign a color based on distribution of points

For eg consider this colorscale:
max value(1.0) = Blue
med value (0.5) = Green
min( 0.0) = Red.

• If data is in range of 0-100 then 100 will be Blue
• If suddenly some value bounced to 200 then the range will change to 0-200 now Green color represents 100.

I want 100 to be always represented by Blue color. For this, I need to assign color to value range like
100 - Blue,
100- 150 Deep Blue,
Higher than that Black

Is there any way I can fix color for the data range? My data range varies from 0- 6k, 2k-6k, 4k to 6k. I need 6 k to be blue all the time.

Please refer below code pen for the issue.

See the Pen Ploty Unified color scale by Hitesh Sahu (@hiteshsahu) on CodePen.

[etpinard]

See:

• https://plot.ly/javascript/heatmap-and-contour-colorscales/
• https://plot.ly/javascript/reference/#heatmap-colorscale
• https://plot.ly/javascript/reference/#heatmap-zmax
• https://plot.ly/javascript/reference/#heatmap-zmin

and https://community.plot.ly/ if you have any other questions on the topic.

[hiteshsahu]

Thanks, @etpinard setting zautosolved my problem.

Adding code snippet for future reference if somebody wants similar thing.

  var plotData5kW = [{
                z: data5kW,
                showscale: true,
                fixedrange: true,
                hoverinfo: "z",
                colorbar: {
                  title: 'Speed(RPM)',
                  titleside: 'top',
                  titlefont: { color: 'black' }
                },
                type: 'heatmap',
               // Define color scale range in a bound
               zauto:false,
               zmin: 0,
               zmax : 6000,
              colorscale: 5kWColorScale,
                }
            ];

            Materialize.toast("Displaying 5.5kW Graph : For Model: " + data5kW.name, 2000);
            Plotly.newPlot('compressorDiv', plotData5kW, layoutScale, { displayModeBar: false });