Highstock chart showing double line on hovering data points to show the tooltip, which supose to be single and should be in sync.
AS one can check in foddle (link shared below and in snashot) the line on hovering are double and somewhat not in sync. In series second object(2end series), if we set xaxis as 0 or remove it then this issue disappears but xaxis labels also gets removed. I need both the xaxis labels and single line on hover.
I am sharing the link to the fiddle:
https://jsfiddle.net/akt6284m/2/
code:
Highcharts.stockChart('container', {
series: [
{
"type":"areaspline",
"color":"rgba(87,169,222,0.8)",
"data":[
{
"y":0,
"x":1608737040000,
},
{
"y":0,
"x":1608737100000,
},
{
"y":2,
"x":1608737160000,
},
{
"y":0,
"x":1608737220000,
},
{
"y":0,
"x":1608737280000,
},
{
"y":0,
"x":1608737340000,
},
{
"y":0,
"x":1608737400000,
},
....
]
},
{
"type":"column",
"groupPadding":0,
"showInLegend":false,
"yAxis":1,
"xAxis":1,
"data":[
{
"y":1,
"x":1608737040000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737100000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737160000,
"color":"#FF3635",
},
{
"y":1,
"x":1608737220000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737280000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737340000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737400000,
"color":"#02DE27",
},
{
"y":1,
"x":1608737460000,
"color":"#02DE27",
},
....
],
"label":{
"format":""
}
},
{
"type":"scatter",
"data":[
[
1608737160000,
0
],
[
1608738060000,
0
]
],
"color":"#FF3635"
}
],
yAxis: [{
height: '50%'
}, {
height: '50%',
top: '50%'
}],
xAxis: [{
tickLength: 0,
lineWidth: 1,
labels: {
enabled: false
},
height: '50%'
}, {
top: '50%',
height: '50%',
}]
});
Please if anyone can help me with this issue.
