Defined 5 colors for contour lines but get 6 colors displayed

plotly.js
1

I’m new in Plotly, and struggle with the colors in contour lines.

I have following code:

window.UpdateData = async function (jsonData) {
// Parse the JSON data
zData = JSON.parse(jsonData);
console.log(zData);

data2 = [{
    z: zData,
    x: [-9, -6, -5, -3, -1],
    y: [0, 1, 4, 5, 7],
    type: 'contour',
    autocontour: false,
    contours: {
        start: 0.25,
        end: 1.25,
        size: 0.25,
        showlabels: true,
    },

    colorscale: [[0, 'rgb(2, 171, 44)'], 
        [0.25, 'rgb(161,255,164)'], [0.5, 'rgb(255,255,65)'],
        [0.75, 'rgb(237, 167, 14)'], [1.0, 'rgb(171, 2, 2)']]
        
}];

}

And I get following result

image
image1086×514 135 KB

I don’t understand why I get 6 colors displayed even I only defined 5 in the code.

2

The colorscale does not determine the number of contour lines. The colors will be interpolated based in your colorscale and the number of contours requested.

There is an argument (probably ncontours) to determine how many of them you want.

3

Thank you for the feedback.
But I don’t want interpolation. I would like to set the colors between the contour lines myself.

Because I have defined the contour levels as below:

autocontour: false,
contours: {
start: 0.25,
end: 1.25,
size: 0.25,
},

I would like the following color settings

image
image318×176 946 Bytes

But if I add an additionnal color in color scale like:
colorscale: [[0, ‘rgb(2, 171, 44)’],
[0.25, ‘rgb(161,255,164)’], [0.5, ‘rgb(255,255,65)’],
[0.75, ‘rgb(237, 167, 14)’], [1.0, ‘rgb(255, 0, 0)’],
[1.2, ‘rgb(171, 2, 2)’]],

I get the following result

image
image941×586 92 KB

I don’t understand how the colorscale is working from the documentation.

Has any one a link to an in depth explanation on how this is working and how I can achieve my goal?