Angular 7 High Charts Stock Chart Datetime X Axis tooltip formatting independently of other tooltips

Question

I'm working with high charts in angular 7, and am wanting to format the date in just the x-axis tooltip, and I want to leave the others alone entirely.

I was able to get the formatting I wanted in the x-axis tooltip, but it also broke the other two. I have two series in the y-axis, and those we've formatted when inserting the series, but I've seen little to no documentation. The solution that formatted the one and broke the others was from this question:

SO Quesrtion with Datetime Tooltip formatting.

so I did my formatter like this:

tooltip:{
  enabled: true,
  split: true,
  formatter: function() {return [moment(this.x).format('MMDDYY HH:00-HH:59')].concat(...other tooltips)
}

what I want to do, which doesn't seem possible, is somehow just format the x-axis tooltip like this, but haven't seen results with this method:

xAxis: {
  type: 'datetime',
  tooltip: {
    enabled: true,
    formatter: function() {
      return moment(this.value).format('MMDDYY HH:00-HH:59');
    }
  }
}

The real trick is how do I get formatting for just the x-axis? and only the x-axis, as we already have the formatting we want for the y-axis tooltips in the series?

Answer 1

It is not working because there is no such thing as xAxis.tooltip. There is just one tooltip, and you can modify it using the tooltip.formatter. The string that will be returned by the tooltip.formatter will become the tooltip content, so that's the place where you can affect the x value.

chartOptions: Highcharts.Options = {
...

   tooltip: {
      formatter() {
         return `xAxis value: ${moment(this.x).format('MM.DD.YY HH:00-HH:59')}, 
         yAxis value: ${this.y}`
      },
   },
}

API references:
https://api.highcharts.com/highcharts/tooltip.formatter

Live demo:
https://stackblitz.com/edit/highcharts-angular-basic-line-frbdhg