Setting variable ( yaxis ) background color on Plot.ly JS based chart

Question

I tried everything to set a background color in a plot.ly chart but so far no success.

My plot needs to look similar to this one. So it has swimming lines look between specific values on the y-axis.

I tried to do this with Canvas but i had lot of problems spawning a canvas object for the chart.

My code so far looks like this:

(function($){

  var layout = {
      yaxis: {
          fixedrange: true,
          range: [0, 250]
      },
      xaxis: {
          fixedrange: true
      },
  };
  var options = {
      scrollZoom: false,
      showLink: false,
      modeBarButtonsToRemove: [
          'sendDataToCloud',
          'zoom2d',
          'pan',
          'pan2d',
          'autoScale2d',
          'lasso2d',
          'autoScale2d',
          'resetScale2d',
          'toggleSpikelines',
          'dragmode'
      ]
  };

  var x = [
      "2017-06-01 03:41:49",
      "2017-06-02 13:07:46",
      "2017-06-03 23:45:51",
      "2017-06-04 11:29:26",
      "2017-06-05 18:39:31",
      "2017-06-06 23:53:27",
      "2017-06-07 11:40:05",
      "2017-06-08 21:44:24",
      "2017-06-09 09:37:45",
  ];
  var y = [
      "100",
      "120",
      "67",
      "160",
      "88",
      "95",
      "134",
      "55",
      "199",
  ];
  var data = [{
      x: x,
      y: y,
      type: 'scatter',
      name: 'Levels',
      mode: 'markers',
      marker: {
          size: 16
      }
  }];
  Plotly.newPlot('myDiv', data, layout, options);

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="myDiv"></div>

Answer 1

Probably the easiest way to get different backgrounds in Plotly is to use shapes which can be set in the layout.

You would need to pass a list of shape objects. Setting xref and yref to paper makes the locations independent of the axis' ranges.

(function($){

  var layout = {
      yaxis: {
          fixedrange: true,
          range: [0, 250]
      },
      xaxis: {
          fixedrange: true
      },
      shapes: [{layer: 'below',
                xref: 'paper',
                yref: 'paper',
                x0: 0,
                x1: 1,
                y0: 0,
                y1: 0.2,
                type: 'rect',
                fillcolor: 'red'},
               {layer: 'below',
                xref: 'paper',
                yref: 'paper',
                x0: 0,
                x1: 1,
                y0: 0.2,
                y1: 0.3,
                type: 'rect',
                fillcolor: 'yellow'},
               {layer: 'below',
                xref: 'paper',
                yref: 'paper',
                x0: 0,
                x1: 1,
                y0: 0.3,
                y1: 0.7,
                type: 'rect',
                fillcolor: 'green'},
               {layer: 'below',
                xref: 'paper',
                yref: 'paper',
                x0: 0,
                x1: 1,
                y0: 0.7,
                y1: 0.8,
                type: 'rect',
                fillcolor: 'yellow'},
               {layer: 'below',
                xref: 'paper',
                yref: 'paper',
                x0: 0,
                x1: 1,
                y0: 0.8,
                y1: 1,
                type: 'rect',
                fillcolor: 'red'}]
  };
  
  var options = {
      scrollZoom: false,
      showLink: false,
      modeBarButtonsToRemove: [
          'sendDataToCloud',
          'zoom2d',
          'pan',
          'pan2d',
          'autoScale2d',
          'lasso2d',
          'autoScale2d',
          'resetScale2d',
          'toggleSpikelines',
          'dragmode'
      ]
  };

  var x = [
      "2017-06-01 03:41:49",
      "2017-06-02 13:07:46",
      "2017-06-03 23:45:51",
      "2017-06-04 11:29:26",
      "2017-06-05 18:39:31",
      "2017-06-06 23:53:27",
      "2017-06-07 11:40:05",
      "2017-06-08 21:44:24",
      "2017-06-09 09:37:45",
  ];
  var y = [
      "100",
      "120",
      "67",
      "160",
      "88",
      "95",
      "134",
      "55",
      "199",
  ];
  var data = [{
      x: x,
      y: y,
      type: 'scatter',
      name: 'Levels',
      mode: 'markers',
      marker: {
          size: 16
      }
  }];
  Plotly.newPlot('myDiv', data, layout, options);

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="myDiv"></div>