Add spacing between subplots in Plotly.js

How would one add additional spacing between subplots in Plotly.js. I cannot find any examples of this on the website or in the documentation. Thanks.

plotly.js doesn’t have the notion of subplot spacing, so you’ll have to manually space the axis domains.

Here’s one way to do so: http://codepen.io/etpinard/pen/KawKQY

2 Likes

I have a lot of doubts do understand Etienne’s approach. Also, he used some magical numbers that may not make sense for some people. So I decided to explain and adapt his codepen to help people that like me took some time on it for dynamical quantity of graphs (https://codepen.io/guidiego/pen/mdmJWVX), explaining:

We have a total of plots that will be rendered (N), we have a domain that goes to 0 from 1, we have a dynamic spacing (S). So your available plot space will be the 1 - S, so the expected graph size will be (1 - S) / N, in codepen named expectedDomain on line 20.

The next step is to understand that a graph has two faces, the top one and the bottom one, those faces are where you will added spaces. So for each N you have 2 faces. So the total faces are N * 2. The problem is: You will not add spaces on the first top face neighter in the last bottom face, so you have -2 faces from the total. Other way to define it is (N-1) * 2. Once that we calculated it, we can divide our total space by the result. You could found this in codepen on line 19.

After understanding this the rest is only a simple mathematic aspect. You should always know how much space was locked to calculate the start of your next domain. So we will use index (the i parameter in codepen) fo it. To discover the total domain locked you will only need get the expected domain size and multiply by the index (the variable for it in codepen on line 22). For the spaces, if each graph has 2 faces, i * 2, and the first top face will not count to add space, you have here i * 2 - 1, now it’s only get the result and multiply by spacingPerFace. You find it in codepen on line 23.

Now you only need to check if you are on the first or last interaction to pass a 0 or 1 to the correspondent value (line 30 - 32), and in case of middle graphs you will always use previous values and expected domain size to calculate distances.

That’s it!

2 Likes