title: How to align shapes with the beginning/ end of a bar as it appears on a date axis?
body: <p>I have a bar chart that is displayed on a date range axis.</p>
  
  <p>I want to wrap the weekend using a rectangle shape.</p>
  
  <p>However, the the beginning of the shape appears at the middle of a bar instead of at the beginning of the bar.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const traces = [
    {
      "hoverinfo": "text",
      "name": "Utilisation",
      "orientation": "v",
      "type": "bar",
      "x": [
        "2018-06-01",
        "2018-06-02",
        "2018-06-03",
        "2018-06-04",
        "2018-06-05",
        "2018-06-06",
        "2018-06-07",
        "2018-06-08",
        "2018-06-09",
        "2018-06-10",
        "2018-06-11",
        "2018-06-12",
        "2018-06-13",
        "2018-06-14",
        "2018-06-15"
      ],
      "y": [
        0,
        0,
        0,
        0,
        0,
        2494249.18,
        1560878.67,
        2095468.45,
        1483625.08,
        786367.28,
        426026.17,
        380614.07,
        381928.52,
        95275.78,
        11173.3
      ]
    }
  ];
  
  const layout = {
    "height": 320,
    "margin": {
      "b": 100,
      "l": 100,
      "pad": 10,
      "r": 50,
      "t": 0
    },
    "shapes": [
      {
        "fillcolor": "#d3d3d3",
        "line": {
          "width": 0
        },
        "opacity": 0.5,
        "type": "rect",
        "x0": "2018-06-02",
        "x1": "2018-06-04",
        "xref": "x",
        "y0": 0,
        "y1": 1,
        "yref": "paper"
      },
      {
        "fillcolor": "#d3d3d3",
        "line": {
          "width": 0
        },
        "opacity": 0.5,
        "type": "rect",
        "x0": "2018-06-09",
        "x1": "2018-06-11",
        "xref": "x",
        "y0": 0,
        "y1": 1,
        "yref": "paper"
      }
    ],
    "showlegend": false,
    "width": 640,
    "xaxis": {
      "dtick": "date",
      "fixedrange": true,
      "title": "Date"
    },
    "yaxis": {
      "fixedrange": true,
      "title": "Estimate ticket revenue"
    }
  };
  
  Plotly.plot('myDiv', traces, layout);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
  &lt;div id='myDiv'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to align shapes with the beginning/ end of a bar as it appears on a date axis?</p>
  
  <p>The red area in the following image illustrates the area that needs to be highlighted:</p>
  
  <p><a href="https://i.stack.imgur.com/gPrBn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gPrBn.png" alt="enter image description here"></a></p>