We Keep Coding

Highcharts: Position tooltip above the bar on a bar chart

Working with highcharts and I'm attempting to get the tooltip on a bar chart to hover directly above the right hand side of the bar. For example:
Currently I'm using the positioner function but I can't seem to figure out the math to get this to work. Currently when I attempt to use the point.plotX and point.plotY options the tooltip hovers in what appears to be a random spot, and I'm unable to find where you would get the right hand position of the bar. Here's the code I'm currently using
positioner: function(width, height, point) {
return {
x: point.plotX,
y: point.plotY,
};
},
and here's the output for how that looks:

It seems that you have a typo in your positioner function. You should use plotY insted of ploty property:
tooltip: {
positioner: function(width, height, point) {
return {
x: point.plotX,
y: point.plotY,
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/poxv4wq1/
API Reference: https://api.highcharts.com/highcharts/tooltip.positioner
EDIT:
The positioner function return a tooltip coordinates relative to the entire chart. The values point.plotX and point.plotY are relative to the plot area, so you need to add chart.plotTop and chart.plotLeft values:
positioner: function(width, height, point) {
var columnWidth = this.chart.series[0].options.pointWidth;
return {
x: point.plotX + this.chart.plotLeft,
y: point.plotY - columnWidth / 2 + this.chart.plotTop - height
};
}
Live demo: http://jsfiddle.net/BlackLabel/0cjftrsy/

ok, becouse of the label styles. The position of the toolTip is of.
This how i fixed it.
This example worked with http://jsfiddle.net/fqbkozpr/1/
return {
x: Math.max(point.plotX, width), // To the right.
y: point.plotY + height, // Make sure to be under the line
};

Mouse wheel event in highchart reduce xaxis height

I added a mouse wheel event in highcharts with the following reference:
http://jsfiddle.net/d3r8pb7c/
But i Found one problem with wheel event when i keep moving the mouse wheel xaxis bar height reducing. Please find the image below.
I tried to fix this by adding height to the chart but nothing is worked out. Please help if anyone knows. The following code i tried to improve the height of the chart when nothing works out.
chart: {
height: 500}

Your wrap function incorrectly calculates the axis extremes, when you scroll to the edge. You should use the following calculation:
if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
extr = axis.getExtremes();
step = (extr.max - extr.min) / 5 * delta;
if ((extr.min + step) <= dataMin) {
newExtrMin = dataMin;
newExtrMax = dataMin + (extr.max - extr.min);
} else if ((extr.max + step) >= dataMax) {
newExtrMin = dataMax - (extr.max - extr.min);
newExtrMax = dataMax;
} else {
newExtrMin = extr.min + step;
newExtrMax = extr.max + step;
}
axis.setExtremes(newExtrMin, newExtrMax, true, false);
}
Live demo: http://jsfiddle.net/BlackLabel/9mbycpqu/

HighCarts Tooltip position relative to mouse

I am using highcharts to create graphics in my website, however this tooltip covers my bars, Is there a way to tell the tooltip todisplay on top of the bar instead that ‘ON’ it?
here is what I am seeing:

There are many s question around tool-tip positioning on StackOverflow ,The way I used in my chart was to show tooltip left or right on hover of column using positioner.
tooltip: {
positioner: function(labelWidth, labelHeight, point) {
var tooltipX, tooltipY;
if (point.plotX + labelWidth > this.chart.plotWidth) {
tooltipX = point.plotX + this.chart.plotLeft - labelWidth - 40;
} else {
tooltipX = point.plotX + this.chart.plotLeft + 40;
}
tooltipY = point.plotY + this.chart.plotTop - 20;
return {
x: tooltipX,
y: tooltipY
};
} }

Highcharts. Pie chart. DataLabels formatter

I have a pie chart. And I need to format DataLabels in someway. So I use:
dataLabels: {
useHTML : true,
formatter: function () {
if(this.point.id == 'razr') {
return '<div><b>' + this.point.y + '</b></div><div style="left: -140px; text-align: center; position: absolute"><b>sum is:<br/>' + this.point.summ + ' </b></div>';
} else return '<b>' + this.point.y + '<b>';
}
}
And what I got:
My problem is here style="left: -140px;. The position is static. I can't find any way to position my sum label at the center of a green point of a chart. I've been searching the properties of a point (like plotX, graphic attr), nothing helps. If I remove style="left: -140px; datalabel will moves to the right. How can I get coordinates of my green point?

To be honest, it's not easy. I see two possible solutions:
1) Easy (but dirty workaround): create second pie chart under the first one with the same values, but render just one label. Then the second pie chart can have dataLabel inside the slice.
2) Hard (more generic solution): calculate required top/left offsets. It's hard because you don't know bounding box of the label. I suggest to set fixed width+height for that part of the label - so you can find center of that label's part. Then calculate position using series.center and point.labelPos arrays. These are inner options and can change between versions, so keep an eye on these options before upgrading. Example: http://jsfiddle.net/zwb5toe9/2/
dataLabels: {
useHTML: true,
formatter: function () {
var point = this.point,
width = 50,
height = 50,
series = point.series,
center = series.center, //center of the pie
startX = point.labelPos[4], //connector X starts here
endX = point.labelPos[0] + 5, //connector X ends here
left = -(endX - startX + width / 2), //center label over right edge
startY = point.labelPos[5], //connector Y starts here
endY = point.labelPos[1] - 5, //connector Y ends here
top = -(endY - startY + height / 2); //center label over right edge
// now move inside the slice:
left += (center[0] - startX)/2;
top += (center[1] - startY)/2;
if (point.id == 'razr') {
console.log(this);
return '<div><b>' + point.y + '</b></div><div style="width: ' + width + 'px; left:' + left + 'px;top:' + top + 'px; text-align: center; position: absolute"><b>sum is:<br/>' + point.summ + ' </b></div>';
} else return '<b>' + point.y + '<b>';
}
}

Custom tooltip for area stacked Highchart

I have used area stacked Highchart in my application.
This is my FIDDLE
I have converted the y axis values by place the below code in y axis - labels, but unable to format the tooltip to the same % values
formatter: function(){
return Math.round(100*this.value / $(this.axis.tickPositions).last()[0]) + '%';
}
But when I tried to apply the same for tool tip, the tooltip itself went invisible. How to apply the percentage to tool tip also. I have tried the below code.
tooltip: {
shared: false,
formatter: function() {
var text = '';
var pcnt = (this.y / dataSum) * 100;
text = this.x + ' : <b>'+ Highcharts.numberFormat(pcnt) +' M</b>';
return text;
}
},
Thanks in advance