Highcharts With Shared And Split Tooptip, Is There Any Possible To Style The Hover XAxis Labels?

Expect: set my custom style on the xAxis labels, and cancel the 'default' style(see below fiddle) once hover out. fiddle Tried: tooltip: { useHTML: true } .test { background-

Solution 1:

You can wrap Highcharts.Tooltip.prototype.renderSplit(labels, points) method and at the end overwrite the tooltip attributes.

Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function(p, labels, points) {
  p.call(this, labels, points);

  var tt = this.tt;

  if (tt) {
    // overwriting tooltip box attrs
    tt.attr({
      padding: 20,
      fill: 'red',
      stroke: 'blue',
      'stroke-width': 3,
      r: 4
    });

    // changing the position of the text inside the box
    tt.text.attr({
      y: 50
    })
  }
});

For changing text style, you can use tooltip.headerFormat property.

tooltip: {
  split: true,
  headerFormat: '<span style="font-size: 30px; color: white">{point.key}</span>'
},

example: http://jsfiddle.net/n903143x/