Plotly Heat Map Color Scale

gsmith1515 0
Viewed 17

How can I set the scale of the colorscale for my plotly heat map independent of the values of the data?

Example data:

const z = [2,5,6,2,6,8,2];

But I would like my color scale to be from 0 to 10, red to green respectively.

So far I have this, which is amazing, but because my max data is 5.2 and min data is 4.2 it is showing that as green for 5.2 and red for 4.2, but I would like to set a static scale from 0-10.

enter image description here

heatmap plotly reactjs
1 Answers

5 minutes of googling...classic

zmin, zmax, and zauto will take care of it.

<Plot
                    data={[{
                        x,
                        y,
                        z,

                        colorscale: [
                            [0, 'rgba(254, 73, 44, 0.9)'],
                            [0.5, 'rgba(255, 208, 0, 0.9)'],
                            [1, 'rgba(97, 201, 164, 0.9)']
                        ],
                        zmax: 12,
                        zmin: 0,
                        zauto: false,
                        zsmooth: 'best',
                        type: attributes.showLines !== undefined ? attributes.showLines ? 'contour' : 'heatmap' : 'heatmap',
                        showscale: false,
                        connectgaps: true,
                        zAxis: { domain: [0, 20] }
                    }
                    ]}
                    layout={{
                        title: null, autosize: true, autosize: true, yaxis: { autorange: 'reversed' },
                        zaxis: { zmin: 0, zmax: 15, zauto: false, },
                        xaxis: {

                            type: 'date'
                        },
                    }}
                    useResizeHandler={true}
                    style={{ width: "100%", height: "100%" }}

                />
gsmith15150
Related