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

Issue

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.

Solution

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

Answered By - magdalena