How do I move Plotly.js legend off second y axis

Question

Plotly.js defaults to have the legend covering the second y axis. Here is their own code pen example of it happening: https://codepen.io/plotly/pen/36d6c70e8fa17e471fa68788abbed90f

var trace1 = {
  x: [1, 2, 3], 
  y: [40, 50, 60], 
  name: 'yaxis data', 
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4], 
  y: [4, 5, 6], 
  name: 'yaxis2 data', 
  yaxis: 'y2', 
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  title: 'Double Y Axis Example', 
  yaxis: {title: 'yaxis title'}, 
  yaxis2: {
    title: 'yaxis2 title', 
    titlefont: {color: 'rgb(148, 103, 189)'}, 
    tickfont: {color: 'rgb(148, 103, 189)'}, 
    overlaying: 'y', 
    side: 'right'
  }
};

Plotly.newPlot('myDiv', data, layout);

I cannot get the legend to move more to the right. I have tried adjusting the margin/padding on the plot, the x position of the legend, the margin/padding on the legend, the overall size of the div, and the orientation of the legend.

On the topic of legend orientation, I could potentially put the legend below the plot to solve this problem. However, I am also having trouble implementing that. Here is my legend layout code:

legend: {orientation: 'h',
        y: -0.17,
        x: 0,
        font: {
            family:'Roboto',
            size: 10,
            color: 'rgb(54, 54, 54)'}
        },

and here is what my graph looks like:

Clearly there is a lot of code missing here and this isn't a working example of the problem, but the orientation is not changing to horizontal.

That's quite a lot of traces. I think that the best option would be still moving it under the plot, but if you can't do that, check out my edited answer. — kind user
The issue I was having with not changing to horizontal was fixed by using the most recent plotly library. — Murenrb

kind user kind user · Accepted Answer · 2017-07-25T23:24:32

What about placing it under the plot? Also you can adjust it's position with changing the x and y values inside the legend property.

var trace1 = {
  x: [1, 2, 3],
  y: [40, 50, 60],
  name: 'yaxis data',
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4],
  y: [4, 5, 6],
  name: 'yaxis2 data',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  title: 'Double Y Axis Example',
  yaxis: {
    title: 'yaxis title'
  },
  yaxis2: {
    title: 'yaxis2 title',
    titlefont: {
      color: 'rgb(148, 103, 189)'
    },
    tickfont: {
      color: 'rgb(148, 103, 189)'
    },
    overlaying: 'y',
    side: 'right'
  },
  legend: {
    y: 1,
    x: 1.1,
    bgcolor: 'transparent',
  }
};

Plotly.newPlot('myDiv', data, layout);

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>

  <div id="myDiv" style="width: 480px; height: 400px;">
    <!-- Plotly chart will be drawn inside this DIV -->
  </div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

How do I move Plotly.js legend off second y axis

2 Answers