JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

(function(H) {
  H.wrap(H.Axis.prototype, 'drawCrosshair', function(proceed, e, point) {
    proceed.apply(this, e, point);

    if (this.isXAxis) {
      const points = this.series[0].points,
        length = points[1].plotX - points[0].plotX;

      if (this.dateTime) {
        this.cross.attr({
          stroke: H.Color.parse("#ccd3ff").setOpacity(0.25).get(),
          'stroke-width': length
        });
      }		
    }
  });
}(Highcharts));

Highcharts.chart('container', {
  chart: {
    type: "column",
  },
  legend: {
    enabled: false
  },
  xAxis: {
    labels: {
      format: "{value:%b %e}"
    },
    tickInterval: 604800000,
    type: "datetime",
    min: 1569888000000, // 2019-10-01T00.00.00.000Z
    tickPositioner: function() {
      this.tickPositions[0] = 1569888000000; // 2019-10-01T00.00.00.000Z
      return this.tickPositions;
    },
    crosshair: true
  },
  series: [{
    data: [{
      x: 1569888000000, // 2019-10-01T00.00.00.000Z
      y: 952,
    }, {
      x: 1570492800000,
      y: 1082,
    }, {
      x: 1571097600000,
      y: 856,
    }, {
      x: 1571702400000,
      y: 1264,
    }, {
      x: 1572307200000,
      y: 1004,
    }, {
      x: 1572912000000,
      y: 1121,
    }],
  }]
});