31

How do I format the y-axis as percent in plot.ly?. in var layout I have the following settings for the y-axis:

   yaxis: {
            hoverformat: ",.0%"
          },

which changes the hover to percentages but the values printed on the y-axis still go from 0-1 instead of 0-100.

Any help is much appreciated.

Wessi
  • 1,702
  • 4
  • 36
  • 69

2 Answers2

44

In order to change the format of the y-axis you need to set tickformat, not hoverformat.

var trace1 = {
  x: [1, 2, 3, 4],
  y: [0.10, 0.15, 0.43, 0.17],
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [0.16, 0.5, 0.11, 0.9],
  type: 'scatter'
};

var layout = {
  yaxis: {
    tickformat: ',.0%',
    range: [0,1]
  }
}

var data = [trace1, trace2];
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;">
Maximilian Peters
  • 30,348
  • 12
  • 86
  • 99
  • 9
    If you're looking to display as "99.8%, 99.9%" etc, then you should instead set `tickformat: '.1%'`, where `1` determines the number of decimal places. – shrmn Apr 12 '18 at 10:56
  • If I have a subplot that shares Y with another trace can I format the subplot to percent? – Mark Oct 03 '18 at 17:23
  • @Mark Haven't tried it but I don't see any reason why not, the y-axes can be formatted independently. – Maximilian Peters Oct 03 '18 at 17:49
15

For others: if you are using Plotly Express or Cufflinks with Plotly, you can return the figure object and adjust the yaxis.tickformat with the following:

my_fig.layout.yaxis.tickformat = ',.0%'

As pointed out by @shrmn in the comments, substitute a different number for zero and that number of decimal places will be displayed.

jason m
  • 6,519
  • 20
  • 69
  • 122
jeffhale
  • 3,759
  • 7
  • 40
  • 56