How to set tooltip border color from series in Hig

问题:

By default, the border takes the color of the corresponding series or point. But I'd like to set a different color to the tooltip of a certain data point, without changing the color of the data point itself.

I needed something like this:

series: [ { x:1, value: 2.34, tooltip:{borderColor: '#112233'}  }, ... ];

Sadly this property can not be set from a series.

By setting a formatter callback function in the tooltip configuration one can only define the inner HTML of the tooltip, i.e. the border color can not be changed from within this function.

Can this only be achieved by some CSS trickery?

回答1:

It can be achieved by wrapping tooltip.refresh() method.

First, I check if the tooltip is shown, not shared, not split (a shared or split tooltip require a little different code). Then, I check if the options are set and change svg element's stroke attribute.

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

if (!this.isHidden && !this.shared && !this.split) {
  var pointTooltipBorderColor = point && 
                                point.options.tooltip &&
                                point.options.tooltip.borderColor,

    seriesTooltipBorderColor = point && 
                               point.series && 
                               point.series.options.tooltip && 
                               point.series.options.tooltip.borderColor,

    borderColor = pointTooltipBorderColor || seriesTooltipBorderColor,
    label = this.label;

  if (label && borderColor) {
    label.attr({
      stroke: borderColor
    });
  }
}
});

Example: http://jsfiddle.net/oLnfqhmn/2/