Creating chart overlays with Plotly.js

The candleStick plots are a good option indeed, but they are somewhat limited in Plotly (see below). Another one is to use fill between two curves, something that'd look like this:

Here is the code to produce this:

<html>

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div class="item-graph" id="plotly_graph">
  </div>
</body>
<script>
  // Some random data
  const date = ["2022/01/01", "2022/01/07", "2022/01/13", "2022/01/18", "2022/01/25", "2022/02/01", "2022/02/07", "2022/02/13", "2022/02/18", "2022/02/25"]
  const new_date = date.map(function (d) { return new Date(d) })
  const bluecurve = [450, 550, 460, 450, 530, 440, 340, 345, 290, 270]
  const graycurve = [390, 410, 320, 490, 470, 380, 480, 410, 190, 310]
  const min = [350, 430, 420, 410, 480, 350, 320, 310, 230, 190]
  const max = [500, 600, 520, 490, 540, 500, 450, 390, 350, 360]

  // Setting range of Forecast for hoverinfo
  var hovertemplate = []
  for (let i = 0; i < min.length; i++) {
    hovertemplate.push(min[i] + ' - ' + max[i])
  }

  // Setting up the traces:
  traces = [
    {
      x: new_date,
      y: max,
      // name: 'Forecast',
      yaxis: 'y',
      showlegend: false,
      line: { width: 1, shape: 'hvh', color: "lightblue" },
      hoverinfo: 'skip',
      mode: 'lines',
    },
    {
      x: new_date,
      y: min,
      name: 'Forecast',
      yaxis: 'y',
      showlegend: false,
      line: { width: 1, shape: 'hvh', color: "lightblue" },
      // hoverinfo: 'skip',
      hovertemplate: hovertemplate,

      mode: 'lines',
      fillcolor: "lightblue",
      fill: 'tonexty',
    },
    {
      x: new_date,
      y: bluecurve,
      name: "This Year",
      yaxis: 'y',
      type: 'scatter',
      showlegend: false,
      mode: 'markers',
      marker: {
        size: 20,
        color: "blue",
        line: {
          width: 2,
          color: 'DarkSlateGrey'
        },
      },
    },
    {
      x: new_date,
      y: graycurve,
      name: "Last Year",
      yaxis: 'y',
      type: 'scatter',
      showlegend: false,
      mode: 'markers',
      marker: {
        size: 20,
        color: "lightgray",
        line: {
          width: 2,
          color: 'DarkSlateGrey'
        },
      },
    },
  ]

  // Setting up layout
  const layout = {
    yaxis: {
      rangemode: 'nonnegative',
      range: [0, 700]
    },
    hovermode: "x unified",
  };

  // Creating the plots
  Plotly.react("plotly_graph", traces, layout);

</script>

</html>

If you want to use candlesticks, you can change the layout and the first two elements on the traces to, respectively:

    const layout= {
        xaxis: {
          type: 'date',
          rangeslider: {
            visible: false,
          },
        },
        yaxis: {
          rangemode: 'nonnegative',
          range: [0,700]
        },
        hovermode: "x unified",
      };

and

        {
          x: new_date,
          low: min,
          open: min,
          high: max,
          close: max,
          decreasing: {line: {color: "lightblue" }},
          increasing: {line: {color: "lightblue" }},
          yaxis: 'y',
          type: 'candlestick',
          showlegend: false,
          // text: hovertemplate,
          hoverinfo: 'skip',
        },

The hoverinfo of the candlesticks seem to always include high, low, open and close (I couldn't find a way to edit it, as text just adds to those, so I deactivated it). Here is how it looks like:

There's also no control over the width, apart from the number of sticks in the figure.