Format y-axis as percent in plot.ly
38,857
Solution 1
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;">
Solution 2
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.
Related videos on Youtube
Comments
-
Wessi almost 2 years
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.
-
shrmn about 6 yearsIf you're looking to display as "99.8%, 99.9%" etc, then you should instead set
tickformat: '.1%'
, where1
determines the number of decimal places. -
Mark over 5 yearsIf I have a subplot that shares Y with another trace can I format the subplot to percent?
-
Maximilian Peters over 5 years@Mark Haven't tried it but I don't see any reason why not, the y-axes can be formatted independently.