Highcharts chart.tooltip.formatter overriding series.tooltip.pointFormatter?

Question

My approach is configuring a chart with a certain tooltip-format:

Highcharts.chart('container', {
    tooltip: {
            formatter: function () { return 'Default Format ...';  }
    },
    ...
}

... and for certain series, i need to specify a modyfied 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...'; }
    }
  }, 
  ...
]

So this does not work, because, as i figured out, the chart-tooltip-formatter always overrides the pointFormatter of the series configuration. You can try this here, if you comment out the charts tooltip-configuration.

I would expect a way to set a "default" tooltip-configuration over the formatter-function for the whole chart and the possibility to override this for certain series. Is there a way to do so?

I found a few approaches like this, but i need a more general apporach than if-elseing series names within the formatter function. i also want to be able to modify values, so attributes like 'valueSuffix' dont get me very far.

Judsen

Answer 1

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...'; }
    }
}]

Acidify

Answer 2

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...'; }
    }
  }, 
  ...
]

Uird

Answer 3

You can chain a chart's formatter function to a point formatter function in certain cases, as per this JSFiddle. The fiddle has a formatter with a conditional clause that 'falls through' to the default formatter:

formatter: function (tooltip) {
    if (this.point.value === null) {
        return 'Null';
    }
    // If not null, use the default formatter
    return tooltip.defaultFormatter.call(this, tooltip);
} 

The Highcharts default formatter will then call any custom point formatter you have set.

Bypass