CODEWITHSUNDEEP
plotlyplotly.js
Pereira
Pereira

Reputation: 739

Plotly.js - How do I make two y-axes associated with a single x-axis?

How do I make two y-axes associated with a single x-axis? In the image we see that each y-axis has its own x-axis. I already used anchor = 'x' in the yaxis2 layout, but nothing has changed.

Gráfico com problema

Below the layout used:

var layout = {
    title: 'Coeficientes',
    showlegend: true,
    legend: {
        "orientation": "h"
    },
    width: 800,
    height: 580,
    autosize: true,
    margin: {
        l: 50, r: 70, b: 50, t: 50, pad: 2
    },
    xaxis: {title: 'Ângulo [graus]'},
    yaxis: {title: '[kN/(m/s)²]'},
    yaxis2 = {
        title: '[kN.m/(m/s)²]',
        overlaying: 'y',
        side: 'right'
    }
}

Upvotes: 1

Views: 3201

Answers (1)

Md Nasir Fardoush
Md Nasir Fardoush

Reputation: 820

You can try with set xaxis and yaxis value of each trace. It's works

 var trace1 = {
      x:x,
      y:y1,
      type:'scatter',
      xaxis:'x',
      yaxis:'y'
    }
    var trace2 = {
      x:x,
      y:y2,
      type:'scatter',
      xaxis:'x',
      yaxis:'y2'
    }

Example

Sometimes grid line not adjusted. it's happens when different yaxis range is different. So we can overcome this issue with set of same range each y-axis

 var Yvalues = y1.concat(y2); // Merge y values
 var yMax = Math.max.apply(Math, Yvalues);
 var yMin = Math.min.apply(Math, Yvalues);
 var Yrange = [yMin,yMax];//Set range

 var layout  = {
     .......
     .......
    yaxis: {
       range:Yrange //Set range
   },
    yaxis2 : {
        range:Yrange, //Set range
        overlaying:'y' // Set overlaying value
    }
}

Upvotes: 4

Related Questions