title: plotly.js how to change z data on hover to display % as well as % on colorscale
body: <p>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.</p>
  
  <pre><code>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 &lt; yValues.length; i++ ) {
    for ( var j = 0; j &lt; xValues.length; j++ ) {
      var currentValue = (zValues[i][j]);
      if (currentValue &lt; -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);
  </code></pre>