Hi,
I’m trying to reverse the colorscale orientation.
Plotly draw vertical colorbar with max-value on top and min value on bottom.
Is possible to invert this feature? (min-value on top and max-value on botton)
I’ve tried the “reversescale” feature, but it inverts the colorscale too.
Please help.
Hi,
this type of solution can work well for single graphs.
In my application, multiple series with different colorbars are displayed. Every time you resize, it would be useful if the ticks were recalculated dynamically.
By doing as you suggest, instead, the ticks are fixed.
In the meantime, I modified the plotly.js library code, intercepting the “reversescale” attribute which (in my opinion) is more useful this way.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Surface Plot with Custom Colorbar</title>
<script src="./my_modified_plotly.js"></script>
</head>
<body>
<h1>3D Surface Plot with Custom Colorbar</h1>
<div id="surfacePlot" style="width: 100%; height: 600px;"></div>
<script>
// Define X, Y, Z values as 2D arrays
var x = [
[0, 1, 2, 3, 4],
[0, 1, 2, 3, 4],
[0, 1, 2, 3, 4],
[0, 1, 2, 3, 4],
[0, 1, 2, 3, 4]
]; // X as 2D array
var y = [
[0, 0, 0, 0, 0],
[1, 1, 1, 1, 1],
[2, 2, 2, 2, 2],
[3, 3, 3, 3, 3],
[4, 4, 4, 4, 4]
]; // Y as 2D array
var z = [
[10, 10, 10, 10, 10],
[10, 10, 10, 10, 10],
[10, 10, 10, 10, 10],
[10, 10, 10, 10, 10],
[10, 10, 10, 10, 10],
]; // Z values as 2D array
var z2 = [
[15, 15, 15, 15, 15],
[15, 15, 15, 15, 15],
[15, 15, 15, 15, 15],
[15, 15, 15, 15, 15],
[15, 15, 15, 15, 15],
]; // Z values as 2D array
// Define Surface Color values
var surfaceColor = [
[1, 2, 3, 4, 5],
[2, 3, 4, 5, 6],
[3, 4, 5, 6, 7],
[4, 5, 6, 7, 8],
[5, 6, 7, 8, 9]
]; // Surface colors as 2D array
// Custom colorscale
var customColorscale = [
[0, 'blue'], // 1 -> blue
[0.25, 'orange'], // 3 -> orange
[0.5, 'yellow'], // 5 -> yellow
[0.75, 'red'], // 8 -> red
[1, 'violet'] // 10 -> violet
];
// Data for the 3D surface plot
var data = [
{
x: x, // 2D X values
y: y, // 2D Y values
z: z2, // 2D Z values
surfacecolor: surfaceColor, // Surface colors
type: 'surface',
colorscale: customColorscale, // Use custom colorscale
cmin: 1, // Minimum value for the colorscale
cmax: 10, // Maximum value for the colorscale
colorbar: {len: 0.5, y: 0},
reversescale: true,
},
{
x: x, // 2D X values
y: y, // 2D Y values
z: z, // 2D Z values
surfacecolor: surfaceColor, // Surface colors
type: 'surface',
colorscale: customColorscale, // Use custom colorscale
cmin: 1, // Minimum value for the colorscale
cmax: 10, // Maximum value for the colorscale
colorbar: {len: 0.5, y: 0.5},
}
];
// Render the 3D surface plot
Plotly.newPlot('surfacePlot', data, layout);
</script>
</body>
</html>
