Multiple axis smooshing

plotly.js
1

Hello,

I have posted this on Stackoverflow as well, but didn’t get any hits.

I have a complex graph that has multiple y-axis on each side. I have spread the axis out using the position property on the yaxis objects in the layout and it is working nice for larger screens. Unfortunately, I need to be able to handle smaller screens as well. When the screen gets too small, the y-axis start to smoosh into each other. For example:

https://jsfiddle.net/bytesnz/172twam7/1/

Is there another way to layout the y-axis so this doesn’t happen? From reading the reference, I can’t find a better way to do it. I think it would be great if you could specify what axis an axis should be next to using the anchor property, then leave the positioning up to plotly, eg:

  yaxis: {
    title: 'yaxis title', 
    titlefont: {color: '#1f77b4'}, 
    tickfont: {color: '#1f77b4'}
  }, 
  yaxis2: {
    title: 'yaxis2 title', 
    titlefont: {color: '#ff7f0e'}, 
    tickfont: {color: '#ff7f0e'}, 
    anchor: 'y1', 
    overlaying: 'y', 
    side: 'left'
  }, 
  yaxis3: {
    title: 'yaxis4 title', 
    titlefont: {color: '#d62728'}, 
    tickfont: {color: '#d62728'}, 
    anchor: 'x', 
    overlaying: 'y', 
    side: 'right'
  }, 
  yaxis4: {
    title: 'yaxis5 title', 
    titlefont: {color: '#9467bd'}, 
    tickfont: {color: '#9467bd'}, 
    anchor: 'y3', 
    overlaying: 'y', 
    side: 'right'
  }
2

We don’t expose an easy way to do unfortunately.

You can try using custom breakpoints to get the behavior you’re hoping on both large and small screens. see for example: Breakpoints in plotly.js?

3

Hmm. Ok. Thanks. Guess I would have to recalculate the positions based on the width of the div (and assume the width of the axis is fixed).