How to add percentage around numbers in plotly.js

I just started using plotly.js and I ran into this example. I want to display all cells values in percentage. according to Plotly doc https://plotly.com/javascript/reference/scatter/, if the graph = scatter then I can simply add tickformat: ',.0%' and it does the job. But this trick doesn't work if the type is table.

Anyone can help?

var values = [
      ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
      [1200000, 20000, 80000, 2000, 12120000],
      [1300000, 20000, 70000, 2000, 130902000],
      [1300000, 20000, 120000, 2000, 131222000],
      [1400000, 20000, 90000, 2000, 14102000]]

var data = [{
  type: 'table',
  header: {
    values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
                 ["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
    align: "center",
    line: {width: 1, color: 'black'},
    fill: {color: "grey"},
    font: {family: "Arial", size: 12, color: "white"}
  },
  cells: {
    values: values,
    align: "center",
    line: {color: "black", width: 1},
    font: {family: "Arial", size: 11, color: ["black"]}
  }
}]

Plotly.newPlot('myDiv', data);

Solution

There is an option suffix that you can specify with a compatible array of values for the table. See this for more details.

const suffix1 = [['', '', '', '', ''],
  ["%", "%", "%", "%", "%"],
  ["%", "%", "%", "%", "%"],
  ["%", "%", "%", "%", "%"],
  ["%", "%", "%", "%", "%"]]; 
//use blank string in the places that don't need suffix.

var values = [
      ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
      [1200000, 20000, 80000, 2000, 12120000],
      [1300000, 20000, 70000, 2000, 130902000],
      [1300000, 20000, 120000, 2000, 131222000],
      [1400000, 20000, 90000, 2000, 14102000]];

var data = [{
  type: 'table',
  header: {
    values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
                 ["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
    align: "center",
    line: {width: 1, color: 'black'},
    fill: {color: "grey"},
    font: {family: "Arial", size: 12, color: "white"}
  },
  cells: {
    values: values,
    align: "center",
    line: {color: "black", width: 1},
    font: {family: "Arial", size: 11, color: ["black"]},
    suffix: suffix1 
  }
}]


Plotly.newPlot('myDiv', data);

<div id='myDiv' style="width:640px;height:320px">
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>