Black Lives Matter. Please consider donating to Black Girls Code today.

Change order of traces - not working

I have the following code and I’m trying to change the ‘volume’ trace to go to the back. I’ve looked through the documentation thoroughly, but nothing seems to be working, including Plotly.moveTraces(‘clientPlot’, 1);.

Can anybody help? I’ve made a rough copy of what I’m working with here:

          <!DOCTYPE html>
      <html charset="utf-8">
      <head><title>My Plot</title></head>
      <body>
      <div id="clientPlot" style="width:800px;height:400px;">
      </div>
      <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
      <script>
      var open = [155.64,157.9,159.51,160.11,158.47,158.99,159.87,162.61,160.5,
        160.86,162.09,162.71,163.75,164.8,163.64,163.8,160.1,160.14,159.65,
        160.43,159.07,158.23,157.5,157.86,160.52,161.94,160.66,159.32,156.6,
        159.9,159.26,158.6,157.06,156.07,157.05,159.28,149.1,149.9,149.89,153.75,
        153.35,151.8,150.58,149.99,151.5,150.48,149.2,148.82,147.97,145.5,145.87,
        144.73,144.11,142.9,143.02,143.69,144.88,144.45,144.71,144.49,145.01,147.17,
        145.13,145.77,145.52,146.87,143.66,143.78,143.32,147.5,147.16,145.74,155.19,
        155.25,155.02,153.9,154.34,153.58,153.17,153.97,153.42,154,153.73,153.84,154.9,
        154,153.38,151.27,153.6,155.94,156.01,154.7,152.45,153.63,153.87,149.03,146.76,
        146.52,145.59,147.54];

      var high = [155.65,158.26,159.77,160.5,160.97,159.4,159.96,163.96,162.05,161.15,162.24,162.99,
        164.25,164.94,164.52,163.89,163.12,162,160.56,160.74,160.47,160,157.89,159.5,
        160.71,162.51,162.2,160.21,158.57,160,161.27,161.83,158.92,157.4,157.21,159.75,
        150.22,150.33,150.23,153.99,153.93,153.84,152.44,150.44,151.74,151.42,150.13,150.9,
        149.33,148.49,146.18,145.85,145.95,144.75,143.5,144.79,145.3,144.96,145.13,146.11,146.16,
        148.28,147.16,146.7,146.07,146.87,146.74,144.5,144.48,147.5,147.45,146.09,155.19,155.54,
        155.98,155.81,154.45,155.45,153.33,154.17,154.43,154.24,154.35,154.17,154.9,154.58,153.98,
        153.34,154.57,156.06,156.65,156.42,154.07,153.94,154.88,153.7,148.98,147.14,147.49,148.09];

      var low =[152.75,153.83,158.44,158,158,158.09,157.91,158.77,159.89,158.53,160.36,160.52,
        160.56,163.63,163.48,162.61,160,159.93,159.27,158.55,158.88,158.02,155.11,156.72,
        157.84,160.15,160.14,158.75,156.07,154.63,159.11,158.27,156.67,155.69,155.02,
        156.16,148.41,148.13,149.19,147.3,153.06,151.8,149.9,148.88,150.19,149.95,148.67,
        148.57,147.33,145.44,144.82,144.38,143.37,142.9,142.41,142.72,143.1,143.78,142.28,
        143.16,143.62,145.38,145.11,145.12,144.61,144.94,143.66,142.2,142.21,143.84,145.15,
        142.51,146.02,154.4,154.48,153.78,153.46,152.89,152.22,152.38,153.33,153.31,153.03,
        152.67,153.31,152.91,152.63,151.13,149.71,154.72,155.05,154.67,152.31,152.11,153.45,
        149.03,146.76,145.81,144.27,146.84];

      var close =[153.91,156.07,158.73,158.67,159.88,158.28,159.65,160.86,161.5,158.63,161.26,161.91,
        162.08,164.05,164,163.35,162.91,161.47,159.86,159.27,159.98,159.78,157.21,157.5,
        157.86,160.95,161.6,159.85,157.48,155.32,161.06,160.08,158.81,156.39,155.57,
        157.14,150.05,148.73,149.5,150.56,153.46,152.74,152.09,150.27,150.34,151.02,
        150.08,149.56,149.04,147.77,145.74,145.53,145.06,144.18,142.73,144.09,143.5,
        144.02,143.68,145.83,143.73,145.82,146.28,145.63,145.87,145.01,146.34,142.27,
        144.29,145.16,146.59,145.42,148.98,154.99,155.37,154.45,153.93,155.45,153.18,
        152.76,153.67,153.61,153.87,153.34,153.8,153.99,153.06,152.54,150.25,155.47,
        155.7,156.1,153.95,153.26,153.99,153.01,148.96,146.53,147.06,147.51];

      var volume =[1544906,51693239,20347352,27939718,48203642,23073646,44393752,71139119,31085929,
        28183159,21722995,21179047,29317054,16591051,26785096,26973946,29307862,25279674,
        25015218,19029621,19198189,21297812,26145653,27012525,26925694,27321761,27936774,
        21754810,25943187,39081017,25640394,35775675,21870321,20349532,26000738,69222793,
        24725526,19422655,16832947,32175875,15172136,18612649,21122730,24671002,17053326,
        20615419,17713795,23243713,19961788,24922788,23617964,18311156,21030466,18505351,
        23374374,20758795,14258300,22328979,31116980,21915939,24423643,25524661,25997976,
        18673365,21064679,24572170,31449132,49180748,31348832,31224203,33749154,71563614,
        64176149,20771367,20678772,26249630,24803858,27285861,16180143,23162873,20034934,
        21632202,19044463,19118319,19430358,22340069,26733798,33159664,49482818,19904679,
        25700983,32221756,25596687,25670456,35942435,48339210,26787359,23275690,45142806,39752670];

      var datetime=['2017-09-21','2017-09-20','2017-09-19','2017-09-18','2017-09-15',"2017-09-14",
        "2017-09-13","2017-09-12","2017-09-11","2017-09-08","2017-09-07","2017-09-06","2017-09-05",
        "2017-09-01","2017-08-31","2017-08-30","2017-08-29","2017-08-28","2017-08-25","2017-08-24",
        "2017-08-23","2017-08-22","2017-08-21","2017-08-18","2017-08-17","2017-08-16","2017-08-15",
        "2017-08-14","2017-08-11","2017-08-10","2017-08-09","2017-08-08","2017-08-07","2017-08-04",
        "2017-08-03","2017-08-02","2017-08-01","2017-07-31","2017-07-28","2017-07-27","2017-07-26",
        "2017-07-25","2017-07-24","2017-07-21","2017-07-20","2017-07-19","2017-07-18","2017-07-17",
        "2017-07-14","2017-07-13","2017-07-12","2017-07-11","2017-07-10","2017-07-07","2017-07-06",
        "2017-07-05","2017-07-03","2017-06-30","2017-06-29","2017-06-28","2017-06-27","2017-06-26",
        "2017-06-23","2017-06-22","2017-06-21","2017-06-20","2017-06-19","2017-06-16","2017-06-15",
        "2017-06-14","2017-06-13","2017-06-12","2017-06-09","2017-06-08","2017-06-07","2017-06-06",
        "2017-06-05","2017-06-02","2017-06-01","2017-05-31","2017-05-30","2017-05-26","2017-05-25",
        "2017-05-24","2017-05-23","2017-05-22","2017-05-19","2017-05-18","2017-05-17","2017-05-16",
        "2017-05-15","2017-05-12","2017-05-11","2017-05-10","2017-05-09","2017-05-08","2017-05-05",
        "2017-05-04","2017-05-03","2017-05-02"];

      var indicator=[52.266,53.7644,55.6981,55.6628,56.5582,55.6301,56.6491,57.565,58.0531,
        56.4237,58.4703,58.9903,59.1255,60.7115,60.6852,60.3456,60.1163,59.36,58.4947,
        58.1737,58.7109,58.605,57.2188,57.4322,57.6949,60.0115,60.5141,59.6187,58.3614,
        57.1661,61.802,61.2748,60.5814,59.2131,58.7358,60.059,55.6194,54.6975,55.3571,
        56.2757,58.9055,58.4313,58.001,56.769,56.832,57.4415,56.8119,56.4616,56.1115,
        55.2473,53.818,53.6675,53.3327,52.7035,51.6473,52.7334,52.3055,52.7192,52.4775,
        54.1998,52.7091,54.4433,54.8337,54.3791,54.5786,53.9838,55.0806,52.1557,53.8675,
        54.6268,55.9005,55.0574,58.3976,64.9374,65.3928,64.8053,64.47,66.2848,64.831,
        64.5529,65.6591,65.6209,65.9334,65.605,66.1491,66.3727,65.8166,65.503,64.0756,
        70.6259,70.9401,71.4839,70.2796,69.8782,70.8742,70.3156,67.8069,66.1174,66.8701,
        67.5117,66.8656,64.6901,64.8903,64.8061,66.0082,65.3464,64.2941,64.5332,63.1376,
        63.8678,64.76,64.1503,65.2172,65.0877,67.3189,67.5704,68.0407,68.5688,69.6766];

        var traceCandle=  {
          x: datetime,
          high:   high, increasing: {line: {color: 'green'}},line: {color: 'green'},
          open:   open,
          close:  close, decreasing: {line: {color: 'red'}},line: {color: 'red'},
          low:    low,
          type: 'candlestick',
          xaxis: 'x',
          yaxis: 'y'
        };
        var traceIndicator= {
          type:"scatter",
          x:datetime,
          y:indicator,
          yaxis:"y2",
          line:{width:2}
        };
        var traceVolume= {
          type:"bar",
          x:datetime,
          y:volume,
          yaxis:"y3",
          line:{width:2}
        };
        var data=[traceCandle,traceIndicator,traceVolume];

        var layout = {
            title:"my graph",
            margin:"{l: 40, b: 40, r: 80, t: 40,}",
            xaxis:{
              title:"Date/Time ",
              autoscale:"true",
              rangeselector: {
                bgcolor:"#555",
                buttons: [
                  {count: 1,label: '<sup>1</sup>/<sub>12</sub>',step: 'month',stepmode: 'backward',},
                  {count: 6,label: '<sup>6</sup>/<sub>12</sub>',step: 'month',stepmode: 'backward',},
                  {step: 'all'},
                ]},
            },
            yaxis:{
              title:"Price",
              autoscale:"true",
              overlaying:"y2",
              side:"left",
            },
            /*yaxis2: {
              title:"Volume",
              autoscale:"true",
              overlaying:"",
              side:"right"
            },*/
            yaxis3: {
              title:"Indicator",
              autoscale:"true",
              overlaying:"y2",
              side:"right"
            },
        };

      Plotly.newPlot('clientPlot',data,layout, {displayModeBar:false,});
      Plotly.moveTraces('clientPlot', 1);
      </script>
      </body>
      </html>

here’s a working version: https://codepen.io/etpinard/pen/rGLgoN?editors=0010

I’d love to say this worked, but it’s still the same. I’m not sure what’s going on.

Can you clarify your expected behavior then?

Can I first clarify we’re seeing the same thing?

Click here for what I’m seeing on my end.