This is a migrated thread and some comments may be shown as answers.

Tooltip Position

15 Answers 596 Views

Chart

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

15 Answers, 1 is accepted

answered on 23 Oct 2012, 02:52 PM

piechart-tooltipextraspace.png

Has this been fixed in the Kendo Dataviz pie chart?

The solution you presented will move all of the tooltips to the right. I am looking for a solution to move all of the tooltips inward towards the middle of the pie.

A potential solution for me would be to attach to the hover event and then reset the tooltip's position. Is there any way to attach to the hover event of a pie slice?

Any other solutions to this problem? Thanks for your time.
See the attached image.

answered on 23 Oct 2012, 08:27 PM

Here's my temporary solution, if anyone is interested:

// Reset Labels on Hover!
$(chartId + " path").bind("mouseover", function (e) {

setTimeout(function () { // Need a Delay
$(".k-chart > div").each(function (i, id) {

var topMax = 150, topMin = 30;
var leftMax = 150, leftMin = -30;

var useId = $(id);
var top = useId.position().top;
var left = useId.position().left;

//console.log("top:" + top + " left:" + left);
var goTop = "";
var goLeft = "";
if (top > topMax)
goTop = topMax + "px";
else if (top < topMin)
goTop = topMin +"px";

if (left > leftMax)
goLeft = leftMax + "px";
else if (left < leftMin)
goLeft = leftMin +"px";

if (goTop != "") {
useId.animate({
top: goTop
}, 200, function () {
useId.css({ top: goTop });
});
}

if (goLeft != "") {
useId.animate({
left: goLeft
}, 200, function () {
useId.css({ left: goLeft });
});
}

});

}, 350);
});

answered on 08 Nov 2012, 06:20 PM

stacked-bar.png

unstacked-bar.png

unstacked-column.png

Hi Iliana,

I've just updated my kendo UI version to 2012.2.913 and, I notice that the issue it seems to be fixed for stacked bar charts, but not for column charts or unstacked bar charts.

Attached you can find some screenshots. As you can see all these files are the ones you can get from the examples folder. The only update that I did is set the template for the tooltip (template: "This is a looooooooooong tooltip").

Also I'd like to mention that I tried this in IE8, IE9 and Chrome, with the same luck.

Please let me know if I'm doing something wrong, or if is just not fixed for these scenarios.

Thanks,

answered on 09 Nov 2012, 05:44 PM

Hi Ane,

Thank you for the provided screenshots. Actually the issue I and Paul were discussing is different and is related to the pie chart. The behavior you have observed with the bar chart is expected. I am afraid at this point there is no built-in option in Kendo UI Chart for modifying the tooltip position. As a possible workaround I can suggest to set margin to the tooltip:

.k-tooltip {

margin-left: -200px;

}

Another option is to set the tooltip visibility to false. Then in the seriesHover event call a function and make the tooltip visible with a custom position:

<script>

$("#chart").kendoChart({

//....

tooltip: {

visible: false

},

seriesHover: showTheTooltip

});

function showTheTooltip(e) {

$("#chart .k-tooltip").html(kendo.format(e.series.tooltip.format, e.value) + " - " + e.category).show();

}

</script>

<style>

.k-tooltip{

//custom position

}

</style>

Regards,
Iliana Nikolova
the Telerik team

Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.

answered on 16 Nov 2012, 12:23 AM

tooltip-fixed-column.png

tooltip-fixed-line.png

Hello Iliana,

thanks for you reply. I tried your solutions but didn't like it, because in the first case the problem is now moved to the left (and is even worse because you don't have a scrollbar there) :)

So I created a generic solution :)

The issue is fixed adding these lines to the kendo.dataviz.js file (line 15448):

anchor = point.tooltipAnchor(element.outerWidth(), element.outerHeight());

top = round(anchor.y + chartPadding.top) + "px";

// ---------------------------------------------------------

// Added by ANE to fix the tooltip issue out of screen X

var leftValue = round(anchor.x + chartPadding.left);

var chartElement = element[0].parentElement;

// maxX: max value for X point to be inside the chart

var maxX = chartElement.offsetLeft + chartElement.offsetWidth;

// maxXTooltip: max value for X point for the tooltip element

var maxXTooltip = leftValue + tooltip.element[0].clientWidth;

// if is out of the chart

if (maxXTooltip > maxX) {

// move it to the left to keep it inside (10 is for padding, margin...)

leftValue = maxX - 10 - tooltip.element[0].clientWidth;

}

left = leftValue + "px";

// ---------------------------------------------------------

if (!tooltip.visible) {

tooltip.element.css({ top: top, left: left });

}

I tested in columns and lines charts and it is working great. See attachments.

I hope you like it, and looking forward to be added in next relesease :)

Thanks!

NOTE: The value 10 I put it fixed because I know how many pixels I need in my case, but it can be calculated.