0

I have a highStock chart in my app. this chart has 3 y-axis and 2 x-axis. I show one x-axis at bottom and the other one at the top. and splited three Y-Axis by 'height' property. And I linked yAxis[0] to xAxis[0] and the other two y-axis to second x-axis.

this is y-axis:

this.stockChartOptions.yAxis = [
  {
    opposite:false,
    height : '32%',
    title : { text :'pe' },
  },
  {
    opposite: false,
    height : '32%',
    top: '34%',
    title : { text : 'pe forwards' },
    offset :0
  },
  {
    opposite:false,
    height : '32%',
    top : '68%',
    title : { text : 'pe analytical' },
    offset :0
  }
]

And this is x-axis:

this.stockChartOptions.xAxis = [
  { 
    categories : [],
    type : 'datetime',
    opposite:true,
    labels : {
      rotation : -45,
      formatter: function() {
        return  new Date(this.value).toLocaleDateString('en-US');
      }
    },
  },
  { 
    categories : [],
    type : 'datetime',
    labels : {
      rotation : -45,
      formatter: function() {
        return  new Date(this.value).toLocaleDateString('en-US');
      }
    },
  }
]

The question is: when I write a formatter method for the tooltip, the tooltip label for the second x-axis is not attached at it's corresponding x-axis. What is the problem? and how to solve it? here is the formatter method:

this.stockChartOptions.tooltip = {
  formatter: function () {
    const xAxisBox = new Date(this.x).toLocaleDateString('en-US');
          return ['<b>' + xAxisBox + '</b>'].concat(
            this.points ?
              this.points.map(item => {
                return ` ${item.series.name} : ${item.y}`;
              }): ['']
          );
  },
}

And here is an image of the problem: enter image description here

EDIT: Here is a JSFiddle link which show exactly the problem: https://jsfiddle.net/avq6yd2n/28/

Mo Asghari
  • 251
  • 2
  • 11
  • Could you reproduce this issue on some online editor with the sample data? – Sebastian Wędzel Apr 26 '21 at 14:02
  • thanks for your response, here is a JSFiddle link which exactly show the problem. consider that I created two xAxis, but both xAxis' tooltip labels, show at the top. https://jsfiddle.net/avq6yd2n/28/ – Mo Asghari Apr 27 '21 at 10:35
  • Maybe you should consider setting the second xAxis as the opposite? For this configuration, the tooltip header will be attached to the bottom axis: https://jsfiddle.net/BlackLabel/kyfsn4er/ – Sebastian Wędzel Apr 27 '21 at 15:37
  • Thank you, I tested that configuration but it is not what it want. I want the tooltip attached to it's corresponding x Axis. You're case still attach both tooltip to bottom. Why can't we do it? is it a bug or am i missing something? of course it's not a normal behavior. – Mo Asghari Apr 27 '21 at 15:44
  • It doesn't work like this - there is no corresponding xAxis - the tooltip header is attached to the first xAxis by default. – Sebastian Wędzel Apr 28 '21 at 09:48

0 Answers0