CODEWITHSUNDEEP
javascripthighcharts
arjary
arjary

Reputation: 169

Set crosshairs color for a specific series - highcharts

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

Upvotes: 1

Views: 479

Answers (1)

morganfree
morganfree

Reputation: 12472

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/

Upvotes: 2

Related Questions