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: {
},
},