javascript - plotly js: location and length of color scale in heatmap - Stack Overflow

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

Here is an example in codepen.

Plotly.d3.json('.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?

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

Here is an example in codepen.

Plotly.d3.json('https://raw.githubusercontent./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?

• javascript
• plotly

Share Improve this question Follow edited Dec 11, 2016 at 1:48 Maximilian Peters 31.8k1212 gold badges9494 silver badges102102 bronze badges asked Dec 10, 2016 at 23:38 mg1075mg1075 18.2k88 gold badges6262 silver badges102102 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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./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>

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,
             },
     ];