In HighCharts column time series chart, crosshair not working as expected

Question

Thanks in an advance.

I tried to apply crosshair on xAxis, but its display very thin gray background line on each column. I want to display crosshair on xAxis group wise. Need this behavior in Column and Bar time chart.

Prepared jsfiddle.

Working with normal column charts jsfiddle

    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,
    }],
  }]
});

So want to display gray background completely covered column.

In below images, you can see I got yellow highlighted gray shadow with thin line, but I need result like in next images. So there is only changes in structure I am using column time series chart in that case gray shadow not showing properly. For other column charts gray shadow display properly.

Answer 1

In the case of the datetime axis type, it is necessary to override the Highcharts function to achieve this:

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

Demo: https://jsfiddle.net/BlackLabel/Lj3kgen0/

Reference: https://www.highcharts.com/forum/viewtopic.php?f=9&t=50829