Tool tip is showing wrong X axis data in High stock

[gevendra]

Hi There,

I am using high stock to show multiple series in a single chart, and came to a wired situation where tooltip is showing wrong datetime. Below is the code for pointFormatter;

pointFormatter: function () {
const data = props.graphData; // this is series data
const unitData = data.filter(obj => obj.color === this.color);
return `<br/><span style="color:${this.color}">● </span>

<b>${this.y)</b>
<br/>
<div style="padding-left:15px;">
${moment(this.x).format("DD. MMM YYYY, HH:mm:ss")} hrs
</div>`
}

Actually it is taking some other epoch date

actual data to graph:


0: [1605594600000, 29.4]
1: [1605595740000, 33.5]
2: [1605596880000, 33.8]
3: [1605598020000, 66.45]
4: [1605599160000, 32.25]

and when hovered on points then
1605595500000 33.5

In above data for 33.5 actual datetime is 1605595740000 which is coming as 1605595500000 on tool tip. Is there anything wrong I am doing? CAn anyone see and suggest what could be the issue?
-Thanks

[dominik.c]

Hello gevendra!

Thanks for contacting us with your question!

I appreciate that you shared a piece of your code with us, but I'm afraid that's not enough to solve this problem. Could you reproduce the issue in an online editor that I could work on? In the link below you can find a basic template.

Demo: https://jsfiddle.net/BlackLabel/ewq7ropt/

Best regards!

[gevendra]

Hello Dominic,

Thanks for reply, sure I will try if I can provide you the data points in your JSfiddle. Meanwhile I can tell you my further findings :

in my chart if there is less than 400 data points then everything is working fine and I am getting exact x axis value on tool tip. but when my data points are more say 450 or 500 or more, then in tool tip this.x is giving me some other value and further more if I try to use this.key then i can see that it is giving me a range (like value 33.5 is for Wednesday Nov 25, 10:05 - 10:20 ) and actual time value for points 33.5 is 10:15 means it can be any value in between 10:05 to 10:20. In this case this.x is returning me the lower value of this.key which is 10:05. Hence I am getting 10:05 instead of 10:15.

Is it an expected behavior for stockchart? As when same data points were plotted on highchart then I am getting exact x-axis value.

Thanks

[dominik.c]

Hi again!

Thanks for your explanation!

In short, it is. In HighStock we've got boost module enabled automatically and when there are a lot of data they get simplified to fit as many points as possible as quickly as possible. That's the reason why it looks different than in an ordinary Highcharts chart.

You can disable the boost module and then it should work exactly as in Highchart. In the link below is an example of how to disable the module.

Demo: https://jsfiddle.net/BlackLabel/e0ufo38s/

Best regards!

[gevendra]

Hi Dominik,

Thanks for your reply.

I tried your option in provided js fiddle (https://jsfiddle.net/BlackLabel/e0ufo38s/) also but getting same issue. If you see the tooltip when plotting around 1000000 points showing values in decimal but we are making data array of all integer. And similarly the time is providing in range instead of exact date time.

If I use 500 points also then issue can be reproduced:

let data = []
for(let i = 0; i < 500; i++){
data.push(i)
}

Highcharts.stockChart('container', {
boost: {
enabled: false
},
series: [{
data: data

}]

});


Can you please have a look and let me know whats the issue there.

Thanks in advance for support

[dominik.c]

Hi again!

All right, now I understand what the issue is. You can use tooltip.formatter for that and set what should be displayed inside the tooltip. You should also know that when split property is set to true formatter must return array with at least two strings: first one is formatting for the "x value tooltip" (the one on the x axis), the second one is formatting for the first series.

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

Demo:
https://jsfiddle.net/BlackLabel/bcvft9a0/

Best regards!