How to add percentages to colorscale values in plotly.js heatmap

plotly.js
1

I would like to add a % tag to the z value that is show on hover. Also, right now, my colorscale is only displaying -10 to 10, but I would like it to show % so -10% to 10%. Here is the code I have. I have tried to add the ticksuffix : “%”, but I’m not sure where I should put it since it seems like the colorscale is not an axis like the x and y axis.

var xValues = ['A', 'B', 'C',];

var yValues = ['W', 'X', 'Y', 'Z'];

var zValues = [[-2.45,-0.4,1.3],
      [2.9,3.9,-5.66],
      [0.5,-2.6,-3.2],
      [-8.3,-0.5,-0.1]];


var a_text = [["Comodities + producers","Consumer Discretionary","Utilities Equities"],
    ["Health and Biotech","Global Real Estate","Financial Equities"],
    ["Emerging Market Bonds","Technology Equities","Industrials Equities"],
    ["Oil and Gas","China Equities","Diversified Portfolio"]];

var data = [{

  x: xValues,
  y: yValues,
  z: zValues,
  hoverinfo: "z",
  reversescale: true,
  type: 'heatmap',
  // zsmooth: "best",
  colorscale: "Spectral",
  zauto: false,
  zmin:-10,
  zmax:10,
  showscale: true,
}];

var layout = {
  title: 'Annotated Heatmap',
  annotations: [],
  xaxis:  {
    ticks: '',
    side: 'top',
    tickfont: {color: 'rgb(255,255,255)'}
  },
  yaxis: {
    ticks: '',
    ticksuffix: ' ',
    width: 700,
    height: 700,
    autosize: true,
    tickfont: {color: 'rgb(255,255,255)'},
   }
};

for ( var i = 0; i < yValues.length; i++ ) {
  for ( var j = 0; j < xValues.length; j++ ) {
    var currentValue = (zValues[i][j]);
    if (currentValue < -0.05) {
      var textColor = 'white';
    }else{
      var textColor = 'black';
    }
    var result = {
  xref: 'x1',
  yref: 'y1',
  x: xValues[j],
  y: yValues[i],
  text: a_text[i][j],
  font: {
    family: 'Arial',
    size: 12,
    color: 'rgb(50, 171, 96)'
  },
  showarrow: false,
  font: {
    color: textColor
  }
};
layout.annotations.push(result);
  }
}

Plotly.newPlot('myDiv', data, layout);
2

Unfortunately, there’s no way to format the z values at the moment.

I’d recommend setting fully custom hover text for this task. See example: http://codepen.io/etpinard/pen/WxLGoo

3

@etienne Is there still no way to format the z values right now?

4

You could colorbar.suffix and hovertemplate as illustrated in this demo.

1 Like