Can't access custom point variable inside Highcharts tooltip.headerFormat

Question

I have a highcharts graph with some value in the y-axis and datetime in the x-axis, however because the data I'm presenting is quarterly, I would like to display the name of the quarter and not the actual date on the tooltip. To accomplish this I've returned a key named quarter alongside the y and x values to override what will be displayed in the header.

My problem is that I can't access this variable in the headerFormat on the tooltip, but I can access it both using the formatter and the pointFormat which are also in the tooltip. Because I'm only interested in changing the date in the header, keeping the rest the content as the default (since we have other graphs that use the default layout when we display monthly data), these options are not desirable.

What is the reason I can't access this key on the point object in headerFormat using {point.quarter}, given the fact that I can access it in pointFormat using {point.quarter}, or in a formatter function using this.point.quarter?

Here's a snippet of what my series looks like:

[
    {
        "x": 1448928000000,
        "y": 4.1,
        "quarter": "Kvartal 4, 2015"
    },
    {
        "x": 1456790400000,
        "y": 3.8,
        "quarter": "Kvartal 1, 2016"
    },
    {
        "x": 1464739200000,
        "y": 3.3,
        "quarter": "Kvartal 2, 2016"
    },
    {
        "x": 1472688000000,
        "y": 2.9,
        "quarter": "Kvartal 3, 2016"
    },
    {
        "x": 1480550400000,
        "y": 2.6,
        "quarter": "Kvartal 4, 2016"
    },
]

And this is what my tooltip looks like:

    tooltip: {
      headerFormat: '{point.quarter} <br/>',
    },

Keeping in mind it works if I put {point.x}, {point.y} or {point.key} there, as well is it works if I use {point.quarter} in the tooltips pointFormat, instead.

Additionally, here is the contents of this.point in the formatter-function:

category: 1590969600000
clientX: 220.81681020947
color: "#b8297c"
colorIndex: undefined
dist: 46.932525263477075
distX: 26.183189790530008
formatPrefix: "point"
graphic: f {element: path.highcharts-point, height: 8, opacity: 1, renderer: d, SVG_NS: 'http://www.w3.org/2000/svg', …}
hasImage: undefined
id: "highcharts-vexo8f6-838"
index: 18
isInside: true
isNull: false
name: undefined
negative: false
options: {x: 1590969600000, y: 15.3, quarter: 'Kvartal 2, 2020'}
percentage: undefined
plotX: 220.81681020947
plotY: 39.94999999999999
quarter: "Kvartal 2, 2020"
selected: false
series: t {group: f, markerGroup: f, dataLabelsGroup: undefined, transformGroup: undefined, eventOptions: {…}, …}
state: ""
total: undefined
touched: false
visible: true
x: 1590969600000
y: 15.3
yBottom: null
zone: 0

If it's not possible to access custom variables like this in the headerFormat-function, how can this be achieved, or how do I inject this variable into the tooltip without overriding the default styling?

Answer 1

This is because headerFormat doesn't see the newly added property when first reading variables. It is only when you start building the whole point that it finds this property, so you have to dig deeper into {point.point.name}. In fact, it could be better described in the documentation that access to extended point options requires digging deeper into the object.

Highcharts.chart('container', {
  tooltip: {
    backgroundColor: '#ffffff',
    borderWidth: 0,
    useHTML: true,
    headerFormat: '{point.y}</br>{point.name}</br>{point.quarter}</br></br>{point.point.y}</br>{point.point.name}</br>{point.point.quarter}</br>',
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
      data: [{
          x: 1448928000000,
          y: 4.1,
          quarter: "Kvartal 4, 2015",
          name: 'Custom name1'
        },
        {
          x: 1456790400000,
          y: 3.8,
          quarter: "Kvartal 1, 2016",
          name: 'Custom name2'
        },
        {
          x: 1464739200000,
          y: 3.3,
          quarter: "Kvartal 2, 2016",
          name: 'Custom name3'
        },
        {
          x: 1472688000000,
          y: 2.9,
          quarter: "Kvartal 3, 2016",
          name: 'Custom name3'
        },
        {
          x: 1480550400000,
          y: 2.6,
          quarter: "Kvartal 4, 2016",
          name: 'Custom name4'
        },
      ]
    }
  ]
});

Live demo: https://jsfiddle.net/BlackLabel/qd2t6zj3/

Answer 2

After some digging, the correct usage in the headerFormat would be {point.point.options.quarter}, and this works as expected. I'd attempted some combination of point.point and point.options, but not both. Alternatively you can override an actual key in the point object, such as name, and then it's accessable with {point.point.name}. If you change the name-value, it will automatically take precedent in the header over the xAxis dateTime, so I ended up just using this key and removing the headerFormat altogether.

The fact that headerFormat and pointFormat uses different syntaxes seems undocumented to me, but this is a working solution. If anyone else stumbles upon this rabbit hole, I hope this helps!