javascript - 日付軸に表示されるバーの開始/終了に形状を揃える方法は?

Question

日付範囲軸に表示される棒グラフがあります。

長方形を使って週末を包みたいです。

ただし、形状の開始点は、バーの開始点ではなく、バーの中央に表示されます。

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);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

日付軸に表示されるバーの開始/終了に形状を揃える方法は?

次の画像の赤い領域は、強調表示する必要がある領域を示しています。