score:7

Accepted answer

i'm not quite sure how this override happens, but as you mention the tooltip.formatter takes precedence. instead of using tooltip.formatter move the same function to plotoptions.series.tooltip.pointformatter. this should work as you expect, with the plotoptions pointformatter being used in general and your series pointformatter being used in the specific cases.

for example (jsfiddle):

plotoptions: {
    series: {
        tooltip: {
            pointformatter: function () { return 'default ' + this.x + '</b> is <b>' + this.y + '</b>';  }
        }
    }
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
        pointformatter: function () { return 'custom format...'; }
    }
}]

score:3

to avoid the overwrite you need to use option headerformat for the chart tooltip and define point format for the individual series

https://api.highcharts.com/highcharts/tooltip.headerformat

the syntax is a bit different but at least it provides basic formatting options

let's say you want custom date format and manipulate font size and color,

your code should look like this:

highcharts.chart('container', {
    tooltip: {
        valuesuffix: '',
        xdateformat: '%a, %b %e at %l:%m %p',
        headerformat: '<span style="font-size: 14px; font-weight: 500; color: #8995a0;">{point.key}</span>',
    },
    ...
}

... and for certain series, specify a modified formatter:

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
      pointformatter: function () { return 'custom format...'; }
    }
  }, 
  ...
]

Related Query

More Query from same tag