CODEWITHSUNDEEP
javascriptplotly
mg1075
mg1075

Reputation: 18155

plotly js: location and length of color scale in heatmap

Using plotly.js, you can make a heatmap, and the heatmap comes with a color scale on the right side, as do some of the 3d charts.

Here is an example in codepen.

enter image description here

Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Jet',
    type: 'heatmap'
  }
];
var layout = {title: 'Jet'};
Plotly.newPlot('myDiv', data, layout);
});

I am struggling to see if the api allows the color scale location and length to be modified. Does plotly.js allow manipulation of these attributes, and do you have an example of this for a heatmap and/or 3d graph?

Upvotes: 1

Views: 7517

Answers (2)

Hitesh Sahu
Hitesh Sahu

Reputation: 45072

Adding this answer to show more tweaks you can do on Plotly colorbar 

 var plotData8kW = [{
           z: data8kW,
            hoverinfo:"z",
            colorbar:{
                //  len: 0.35, //Change size of bar
                title: 'Speed(RPM)<br\><br\>', //set title
                titleside:'top', //set postion
               //tickvals:[0,50,100],
                titlefont: {color: 'blue'} //title font color
              },
             type: 'heatmap',
             colorscale: enhancedScale,
             },
     ];

Upvotes: 2

Maximilian Peters
Maximilian Peters

Reputation: 31679

You can set the position and length of the colorbar by adding the following line to your data:

colorbar: {x: -.5, len: 0.5}

Below is a snippet with a colorbar pushed to the left and half the regular size.

Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Jet',
    type: 'heatmap',
    colorbar: {x: -.5, len: 0.5}
  }
];
var layout = {title: 'Jet'};
Plotly.newPlot('myDiv', data, layout);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <div id="myDiv" style="width: 480px; height: 400px;"></div>

Upvotes: 10

Related Questions