# Plot background. How can i setup it?

**URL:** <https://community.plotly.com/t/plot-background-how-can-i-setup-it/6617>\
**Category:** plotly.js\
**Created:** [November 2, 2017, 7:58am UTC](https://community.plotly.com/t/plot-background-how-can-i-setup-it/6617 "2017-11-02T07:58:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![gdarko](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/gdarko/32/2036_2.png) [@gdarko](https://community.plotly.com/u/gdarko)\
**Post date:** [November 2, 2017, 7:58am UTC](https://community.plotly.com/t/plot-background-how-can-i-setup-it/6617/1 "2017-11-02T07:58:34Z")

</div>

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

My plot needs to look similar to this one. So it has swimming lines look between specific values on the y-axis. This can also be done with background image and fixed heights if easier? Any exampple how can i set repeating bg?

[![enter image description here](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/826b1336c32a1b2d259bdd4060c623f66c9a2cb5.jpg)](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/826b1336c32a1b2d259bdd4060c623f66c9a2cb5.jpg)

Also 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>

```

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [November 2, 2017, 1:19pm UTC](https://community.plotly.com/t/plot-background-how-can-i-setup-it/6617/2 "2017-11-02T13:19:28Z")

</div>

There’s [`layout.plot_bgcolor`](https://plot.ly/javascript/reference/#layout-plot_bgcolor), but that only support single colors.

For your needs, I’d recommend using `layout.shapes`, similar to in this example: [https://plot.ly/javascript/shapes/#highlighting-time-series-regions-with-rectangle-shapes](https://plot.ly/javascript/shapes/#highlighting-time-series-regions-with-rectangle-shapes)