Black Lives Matter. Please consider donating to Black Girls Code today.

Dynamic number of yaxis; graph size

I just discovered plotly and I am using it in my Angular application (replacing Highcharts if all goes well). In my application, the user can select different measurements. The application should figure out what the unit of the measurement is (cm, degrees celcius, pressure, etc) and then create an yaxis automatically for that.

I followed the Multiple Axis example, which kind of works. Unfortunately it’s just an example without documentation. The thing is that my graph is now squeezed together to a pretty small size, while the y axis have pretty much room. I don’t really understand what the numbers of the domain property mean.

Also the position is a bit weird… how can I possibly calculate how many y axis I can have next to each other, without having much whitespace, and have the graph as large as possible?

I believe the domain property has something to do about ratio. Which doesn’t really make sense; because on different devices the ratio can be different, so why would I want to hard code this?

The first y axis that are located to the left and right are positioned next to the graph, exactly as I want it. But when the third y axis comes in, trouble begins.