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

[Solved] Donut chart tooltip visibility issue when inside a RadDock

7 Answers 220 Views

General Discussions

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

Anthony asked on 23 Apr 2013, 09:18 PM

donut_tooltip_overflow.png

Is there a way to change the relative position of a donut chart's tooltip?

If my chart is close to the edge of my RadDock, the tooltip is chopped off or I get an unsightly scrollbar. I am attaching a screenshot and pasting an example of the undesired behavior:

Thank you,
Anthony

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html >

<html>

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style>

.appboundary {

padding: 10px;

width: 100%-40px;

height: 100%;

background-color: #fff;

margin: 20px;

-moz-box-shadow: 0 0 0 4px #FFF, inset 1px 0px 10px #C3C4C7, 0px 1px 6px 6px rgba(10,0,0,.5);

-webkit-box-shadow: 0 0 0 4px #FFF, inset 1px 0px 10px #C3C4C7, 0px 1px 6px 6px rgba(10,0,0,.5);

box-shadow: 0 0 0 4px #FFF, inset 1px 0px 10px #C3C4C7, 0px 1px 6px 6px rgba(10,0,0,.5);

-webkit-border-radius: 1px;

-moz-border-radius: 1px;

border-radius: 1px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

<script>

function createChart() {

$("#donutholder").kendoChart({

title: {

visible: false

},

legend: {

visible: false

},

chartArea: {

background: "",

height: 180,

width: 180

},

seriesDefaults: {

type: "donut",

startAngle: 90,

holeSize: 60,

size: 20,

overlay: {

gradient: "sharpBevel"

}

},

series: [

{

data: [

{

category: "Promoted",

value: 2,

color: "#931d2f"

},

{

category: "Failed Attempts",

value: 1,

color: "#e4a612"

}

],

labels: {

visible: false,

background: "transparent",

position: "outsideEnd",

template: "#= category #: #= value#%"

}

],

tooltip: {

visible: true,

template: "#= category #: #= value#"

}

});

}

$(document).ready(function () {

setTimeout(function () {

createChart();

}, 400);

});

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

<telerik:RadDockLayout runat="server" ID="RadDockLayout1">

<telerik:RadDockZone ID="RadDockZone1" runat="server" CssClass="appboundary" FitDocks="True" BorderStyle="None"

Style="max-width: 1200px">

<telerik:RadDock runat="server" ID="RadDock1" DefaultCommands="ExpandCollapse"

DockMode="Docked" EnableDrag="False" EnableAnimation="True">

<ContentTemplate>

<div style="float: right" id="donutholder">

</div>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

7 Answers, 1 is accepted

answered on 25 Apr 2013, 08:47 PM

donuttooltipoverflow.png

Hello Iliana,
Thank you for your response.

However, I am using the latest release and it is still doing this behavior. I've attached a screenshot of the tooltip doing this in my live app to go along with the dummy example posted above.

Thanks!
Anthony

Accepted