I’ve made a simple plot in Pluto.jl with the plotly() backend, but as you can see from the picture, it has a lot of white space on its left. The cells in Pluto are already pretty small, and this makes the plot even smaller. Is there a way to change this? With the gr() backend this doesn’t happen, but I’d like to keep using plotly() due to its interactivity.
You can always pass the option size = (700, 400) or something to adjust the size of the plot. You can also pass this option in the first cell of the notebook so that it becomes the default:
plotlyjs(size = (700, 400))
This makes it possible to have the plot fit inside the cell, but doesn’t remove the white space. When making it wider, it extends it to the right, forcing me to have to scroll to the right to see other parts of the plot. I can make it smaller, but now I have a tiny plot. If I could somehow tell Pluto or plotly to start drawing the plot all the way to the left, removing the white space, I could have a bigger plot that fits inside the cell nicely.
I do not seem to have your white border behavior with a simple example I just tried:
Can you try if with this simple plot you also have no whitespace on the left of the plot (so it depends on your specific plot data) or if you still have it and then it may be due to a difference in Pluto or Plots version?
For reference I am using latest Plots (1.25.0) and latest Pluto (0.17.3)
Can you confirm this behavior happens with Plotly.jl and PlotlyJS.jl backends? I don’t know if there is a real difference, but I am only familiar with PlotlyJS.jl which is the offline version.
I’ve updated just now Pluto from 0.17.2 to 0.17.3, but it didn’t change the behaviour. With that said, I’ve tried the same example as you did, and no white space is present. I’ve discovered that if the number of points is small enough, the white space is not there. If I increase the number of points, the white space appear. Here is a gif showing this:
I’ve disabled everything from plot() except the array of points, which is a simple Int64 array, as you can see from the end of the gifs. Not sure why this is the case.
The issue seems related to the ylabels in scientific notation. Whenever they change to scientific notation you get extra white space. Can you try fixing the format of the labels to avoid scientific notation and see if the issue is still present? Worth reporting on GitHub.
This does not seem to be a problem inherent to the ploltyjs library (Which is called by both Plotly.jl and PlotlyJS.jl by relying on PlotlyBase.jl).
I tried to reproduce the same scientific notation using PlotlyBase.jl and looking at the metadata of the plot object in the cell HTML (using the browser developer console):
So it does indeed seem to come out of some processing that happens between the call to plot and the translation to the plotly HTML code.
I’m using yticks = :native, which removes the scientific notation, but keeps the shorthand notation for long numbers (e.g. 35000 becomes 35k) and the problem is the same. Something is going on when the y axis labels get converted into other notations.
EDIT: in plot(), using yformatter = :scientific or yformatter = :auto makes the white space appear, while using yformatter = :plain the white space doesn’t appear.
This should be looked into properly of course, but as a workaround does yformatter = x -> x/1e6 (or whatever scale you need) help?
2 Likes
It does, using a custom yformatter solves the problem. Apparently, :scientific and :auto values add additional white space to the left.
To help some troubleshooting if you file an issue on Plots, it seems the problem lies in the computation and definition of the domain variable of the xaxis plot property, which defines the start and end position (relative to the plot figure) of the x-axis:
For some reason when the scientific notation triggers this domains get pushed all the way to 0.27 as starting point (for the example of plotting rand(10) .* 1e8).
2 Likes