Plot multiple y-axes in Plotly

Question

I have the following code for my layout:

    var layout = {
        title:"Energy usage of green electrical appliances",
        plot_bgcolor:"#000",
        paper_bgcolor:"#000",
        showlegend:false,
        margin:"{l: 40, b: 40, r: 80, t: 40,}",
        xaxis:{
          title:"Date/Time",
          autoscale:"true",
          rangeselector: {
            bgcolor:"#555",
        },
        yaxis:{
          title:"Price",
          autoscale:"true",
          overlaying:"y2",
          side:"left",
        },
        yaxis2: {
          title:"Electricity Used",
          autoscale:"true",
          side:"right"
        },
        yaxis3:{
          title:"AiJ/day",
          autoscale:"true",
          side:right
        }
     }

and the following code for my data:

        var tracePrice=                {name:"Price",type:"scatter",x:output[0]["datetime"],y:output[0]["price"],line:{color:"orange",width:2},};
        var traceElecUsed=                {name:"Elec",type:"bar",x:output[0]["datetime"],y:output[0]["Elec"],line:{color:"cyan",width:2},};
        var traceAiJ=           {name:"aij",type:"scatter",x:output[0]["datetime"],y:output[1]["aijpercent"],yaxis:"y2",marker:{color:"#fff"},line:{color:"#555",width:1}};
        return resolve([tracePrice,traceElecUsed,traceAiJ]);

The thing is, everything works fine until I plot traceElecUsed. The units it usesare in the thousands, whereas price is often under £5 and AiJ is a percentage of 0-100%. I don't know if this is the root of the issue. If I remove it everything works fine.

score 0 · Answer 1 · answered Sep 19 '17 at 21:18

The stackoverflow curse has got me again; I struggle for hours with something then once I've posted it the answer appears.

For those of you in the future that need this info, it relies on 'overlaying'

    yaxis3: {
      title:"Aij",
      autoscale:"true",
      overlaying:"y2",
      side:"right"
    }

Plot multiple y-axes in Plotly

1 Answers1