Set crosshairs color for a specific series - highcharts

Question

I am trying to set the crosshairs color on a multiple series highcharts, i am not sure what is the attribute i should try setting it. I am overiding the refresh method of Highcharts.Tooltip.prototype and trying to access crosshairs object to access its attr()to set the stroke on it. Unfortunately the crosshairs object is coming back null even though i have it set on the global tooltip object -

HC wrap

 HC.wrap(Highcharts.Tooltip.prototype, 'refresh', function(p, point, mouseEvent) {
        p.call(this, point, mouseEvent);

        if (point && point.length > 0) {

            var crosshairs = this.crosshairs;
            if (point[0].series.name === 'series1') {
                crosshairs.attr({
                    stroke: '#222222',
                    'stroke-width': 1
                });
            } else {
                label.attr({
                    stroke: COLORS.black,
                    'stroke-width': 0
                });
            }
        } 
    });

Tooltip object on the series -

  tooltip: {
             crosshairs: [{
             width: 1, 
             color: COLORS.gray_1, 
             zIndex: 3
                }, false], 
}

What am i missing? Can we style the crosshair in the above manner? Thanks in advance.

EDIT:

Tried morgan's suggestion below, the event doesn't seem to fire at all.

(function (HC) {

   HC.addEvent(Highcharts.Axis, 'afterDrawCrosshair', 
      function (point) {
           if(this.cross && point) {
               this.cross.attr({
                  stroke: COLORS.red
               })
           }
   });

 })(Highcharts);

morganfree morganfree · Accepted Answer · 2018-06-06T09:27:27

You can change the crosshair's stroke after the crosshair is drawn. You can do this in an axis' event afterDrawCrosshair:

Highcharts.addEvent(Highcharts.Axis, 'afterDrawCrosshair', function ({ point }) {
  if (this.cross && point) {
    this.cross.attr({
      stroke: point.series.color
    })
  }
})

live example: http://jsfiddle.net/w6erqkpb/

Set crosshairs color for a specific series - highcharts

1 Answers