Angular 7 High Charts Stock Chart Datetime X Axis 工具提示格式独立于其他工具提示

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