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

Donut chart tooltip visibility issue when inside a RadDock

7 Answers 139 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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Donut chart tooltip visibility issue when inside a RadDock

7 Answers, 1 is accepted