Why won't all series show up in chart with multiple axes

plotly.js
1

Here is my code pen:
https://codepen.io/ballsytanuki/pen/MMLQyO

I’m trying to create a chart where there are two series where each series has its own x and y axis. But the first trace won’t show up. What am I doing wrong?

2

add overlaying: ‘x’ to your xaxis2 object. Then you’ll be able to see the points if you pan on the first xaxis (the lines overlap each other).

3

@niksoc-hi yes, you are right. I’ve updated the code to more reflect my actual problem. Could you see what I am missing in the updated codepen?

https://codepen.io/ballsytanuki/pen/MMLQyO?editors=0010

4

both axes of a trace must overlay the axes of the other trace. either move overlay: ‘x2’ to xaxis object or overlay: ‘y2’ to yaxis object.

5

do you mean in the layout I have to do this:

var layout = {
  title: 'multiple y-axes example', 
  width: 800, 
  xaxis: {
    overlaying: 'x2',
    position: 0.1
  },    
  xaxis2: {         
    position: 0,
    overlaying: 'x'
  },
  yaxis: {
    
    title: 'yaxis title', 
    titlefont: {color: '#1f77b4'}, 
    tickfont: {color: '#1f77b4'},
    overlaying: 'y2'
  }, 
  yaxis2: {
    
    title: 'yaxis2 title', 
    titlefont: {color: '#ff7f0e'}, 
    tickfont: {color: '#ff7f0e'},     
    overlaying: 'y', 
    side: 'right'    
  }
};
6

you’ve moved both. Since in your data the axes are x1, y2 and y2, x1 either xaxis and yaxis2 should have overlay or yaxis and xaxis2 should have. so:
xaxis: {
position: 0.1
},
xaxis2: {
position: 0,
overlaying: ‘x’
},
yaxis: {
title: ‘yaxis title’,
titlefont: {color: ‘#1f77b4’},
tickfont: {color: ‘#1f77b4’},
overlaying: ‘y2’
},
yaxis2: {
title: ‘yaxis2 title’,
titlefont: {color: ‘#ff7f0e’},
tickfont: {color: ‘#ff7f0e’},
side: ‘right’
}

1 Like
7

You are absolutely right. I don’t fully understand how the overlay property works but that tweek did the job!