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

2 Answers 2

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