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
};
} }
Related
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
};
This question is a possible duplicate of
Show N/A in datalabels, when value is null - Highcharts
and
dataLabels for bar chart in Highcharts not displaying for null values in 3.0.8
but workarounds suggested have stopped working in version 5.0.7 of highcharts.
formatter: function () {
if (this.y == null) {
var chart = this.series.chart,
categoryWidth = chart.plotWidth / chart.xAxis[0].categories.length,
offset = (this.point.x) * categoryWidth + categoryWidth / 2,
text = chart.renderer.text('N/A', -999, -999).add();
text.attr({
x: chart.plotLeft + offset - text.getBBox().width / 2, //center label
y: chart.plotTop + chart.plotHeight - 8 // padding
});
} else {
return this.y;
}
}
The issue seems to be still open on github:
https://github.com/highcharts/highcharts/issues/2899
http://jsfiddle.net/90amxpc1/4/
Is there a possible workaround to show something like "N/A" using formatter function or chart.renderer method for null values in column charts?
In new version of Highcharts formatter is not called for null points anymore.
A hacky way to make your code works as it worked before is to wrap drawDataLabels() method and temporary assign some value to null points, e.g. 0, and in formatter check if point.isNull is true.
var H = Highcharts;
H.wrap(H.Series.prototype, 'drawDataLabels', function (p) {
this.points.forEach(point => {
if (point.y === null) {
point.y = 0;
}
});
p.call(this);
this.points.forEach(point => {
if (point.isNull) {
point.y = null;
}
});
});
In data labels config:
dataLabels: {
formatter: function () {
if (this.point.isNull) {
var chart = this.series.chart,
categoryWidth = chart.plotWidth / chart.xAxis[0].categories.length,
offset = (this.point.x) * categoryWidth + categoryWidth / 2,
text = chart.renderer.text('N/A', -999, -999).add();
text.attr({
x: chart.plotLeft + offset - text.getBBox().width / 2, //center label
y: chart.plotTop + chart.plotHeight - 8 // padding
});
return false;
} else {
return this.y;
}
},
example: http://jsfiddle.net/xnxpwt67/
It works, but it is not an elegant and efficient solution. Much better would be drawing labels for nulls, e.g. on load event.
chart: {
type: 'column',
events: {
load: function() {
const categoryWidth = this.plotWidth / this.xAxis[0].categories.length;
this.series[0].points.forEach(point => {
if (point.y === null) {
const offset = point.x * categoryWidth + categoryWidth / 2;
const text = this.renderer.text('N/A', -999, -999).add();
text.attr({
x: this.plotLeft + offset - text.getBBox().width / 2,
y: this.plotTop + this.plotHeight - 8
});
}
})
}
}
},
example: http://jsfiddle.net/xnxpwt67/1/
I am working with highcharts at the moment, I have a tooltip on by bar chart that is being cut off by a overflow:hidden setting, this is fine and understand I need that setting however the positioning of the tooltip is not overly intelligant, is there a way to position the tooltip relative to the width of the column, i.e if the tooltip is going cause a scrollbar can I decrease the offset? I don't have a code example, but I have attached an image of my problem,
Use tooltip positioner function in your tooltip. Adjust tooltipX and tooltipY accroding to your display requiremets :
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
};
}
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>';
}
}
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