MuthuRaghu3366
Posts: 1
Joined: Thu May 12, 2022 2:38 pm

Plotline with Tooltip

Hi I'm new to the Highcharts and I successfully able to plot the chart. but while I hover on the chart the tooltip and plotline are separating and the plotline going to the first data. Please see the below image and code. sorry I'm not able to add a working chart(jsfiddle). thanks in advance.

i have two questions:-
1. Is there a way can I get the plotline X axis and Y axis value inside the tooltip positioner so that i can align my tooltip next to it.
2. any solution to prevent the plotline and tooltip separation.

Below code is for Tooltip positioner:-
tooltip: {
positioner: function (labelWidth, labelHeight, point) {
if (this.chart.chartwidth > 500) {
//position tooltip
var pos = { x: (point.plotx + 84), y: 80 };
//adjust tooltip on last point to face other direction
if (this.chart.plotWidth < (point.plotx + labelwidth)){
pos.x = (point.plotx - 191) ;
} else {
var pos = { x: ((this.chart.chartwidth - labelwidth) / 2), y: 80 };
}
return pos
}
}

The Below code is used to plot the PlotLine while mouse over and mouse out. while mouse out the plotline will go to the first bar of the chart.
plotOptions:{
series: {
animation: false,
marker: {
enabled: false
}.
//stickyTracking: true,
events: {
mouseOut: function ()
{
that.chartStyles.PLOTLINE.value = (balanceDataSeries[0].DataSeries[0][0] + 0.25);
this.chart.xAxis[0].removePlotBandorLine(that.chartStyles.PLOTLINE.id);
this.chart.xAxis[0].addPlotBandOrLine(that.chartStyles.PLOTLINE);
this.chart.tooltip.refresh([this.chart.series[0].points[0], this.chart.series[1].points[0],
},
},
point: {
events: {
mouseOver: function () {
var current = this.x;
this.series.chart.xAxis[0].removePlotBandOrLine(that.chartStyles.PLOTLINE.id);
that. currentTooltip = current;
that.chartStyles.PLOTLINE.value = (that. currentTooltip + 0.25) ;
this.series.chart.xAxis[0].addPlotBandOrLine(that.chartStyles.PLOTLINE);
}
}
}
},
column: {
endonTick: false,
stacking:'normal',
maxPointwidth: 20,
borderwidth: 1,
stickyTracking: true,
enabledMouseTracking:false,
},
spline: {
},
},
Attachments
C8295BE9-5109-4901-8DB6-F6671347A977-compressed.jpg
C8295BE9-5109-4901-8DB6-F6671347A977-compressed.jpg (70.72 KiB) Viewed 525 times
2D4374D8-4875-41DD-BC70-D00FF23601EB-compressed.jpg
2D4374D8-4875-41DD-BC70-D00FF23601EB-compressed.jpg (77.14 KiB) Viewed 525 times
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Plotline with Tooltip

Hello,

Welcome to our forum and thanks for contacting us with your question!

It's hard to recreate this issue based only on this part of the code. Could you reproduce tooltip and plotLines functionality in JSFiddle starting with this demo: https://jsfiddle.net/BlackLabel/avdu3o74/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Stock”