Donut chart tooltip visibility issue when inside a RadDock

8 posts, 1 answers
  1. Anthony
    Anthony avatar
    6 posts
    Member since:
    Feb 2011

    Posted 23 Apr 2013 Link to this post

    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>


  2. Anthony
    Anthony avatar
    6 posts
    Member since:
    Feb 2011

    Posted 23 Apr 2013 Link to this post

    I may have answered my own question.

    Ran across this:
    http://stackoverflow.com/questions/8648234/how-to-prevent-kendo-ui-pie-chart-tooltip-from-drawing-outside-parent-div
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 25 Apr 2013 Link to this post

    Hello Anthony,

    I am glad to inform you that with Kendo UI Q1 2013 official release (v2013.1.319) there is a screen boundary detection for Kendo UI DataViz Tooltip which should help to avoid the illustrated outcome.

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Anthony
    Anthony avatar
    6 posts
    Member since:
    Feb 2011

    Posted 25 Apr 2013 Link to this post

    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
  5. Answer
    Anthony
    Anthony avatar
    6 posts
    Member since:
    Feb 2011

    Posted 25 Apr 2013 Link to this post

    My solution was to modify the margins for the .k-tooltip class in the seriesHover event in my chart.

  6. Suresh
    Suresh avatar
    1 posts
    Member since:
    Aug 2011

    Posted 06 Aug 2013 Link to this post

    Hi Anthony,

    I can see from your screenshot that you are able to put text inside the donut chart, within the hole.

    I am trying to find chart setting that allows to put the text within the donut hole (totally inside the donut)

    Do you mind sharing the part of the code that sets the text/label properties of the donut chart?

    Thanks very much,
    Suresh
  7. Jo
    Jo avatar
    4 posts
    Member since:
    May 2014

    Posted 15 Sep 2014 in reply to Anthony Link to this post

    Hello Anthony,

    Can you share how to set the text inside the donut's hole?

    Thanks!
  8. Jo
    Jo avatar
    4 posts
    Member since:
    May 2014

    Posted 15 Sep 2014 Link to this post

    For anyone coming across looking for text inside donut hole:
    http://stackoverflow.com/questions/25561471/kendoui-set-northwind-demo-like
    http://dojo.telerik.com/ufeRU
Back to Top