Donut chart clipping labels

2 posts, 0 answers
  1. Rahul
    Rahul avatar
    7 posts
    Member since:
    Nov 2012

    Posted 23 Oct 2013 Link to this post

    Hi Guys,

    I am developing some reports using RadHTMLChart and have few issues with layout.  While using a Donut series the chart renders and clips some labels. I have attached screenshot of the chart , In that the top and the right side labels are clipped.

    I tried increasing the chart height to fix top label but that changed the whole div height and the Donut series height as well which screwed up the total layout. Is there any way we can make the chart to render without clipping the labels.

    I have also attached a screenshot of what happens when chart height is increased.

    Following are the codes I am using to do this.

    <telerik:RadHtmlChart ID="chartDonut" runat="server" Width="450" Height="220" Transitions="true" OnClientSeriesClicked="OnSeriesClicked" Legend-Appearance-Visible ="false"   >
    <PlotArea> 
    <Series>
    <telerik:DonutSeries  DataFieldY="ValueField" ColorField="ColorField" ExplodeField ="Exploded"
    StartAngle="10" HoleSize ="50" NameField="Name" >
    <LabelsAppearance Visible="true" Position="Column" ClientTemplate="#=dataItem.Name# #=dataItem.ValueField#%">
    </LabelsAppearance>
    <TooltipsAppearance DataFormatString="{0}%" BackgroundColor="White" Visible="false"></TooltipsAppearance>
    </telerik:DonutSeries>
    </Series>
    </PlotArea>
    </telerik:RadHtmlChart>

    It will be great if someone can help me to solve this.

    Thanks,
    Rahul
  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 28 Oct 2013 Link to this post

    Hi Rahul,

    There are some appearance specifics when a DonutSeries is used in RadHtmlChart regarding the labels. In general, when the labels are displayed outside of the donut, the Height of the chart should be big enough so that all chart's elements are displayed without clipping.

    What I could suggest you is to try one of the following suggestions:
    1. Increase the chart's Width and Height
    2. Use the TextStyle's Margin property in LabelsAppearance to control the labels positioning. This could be done like this:
    <LabelsAppearance Visible="true">
        <TextStyle Margin="-10" />
    </LabelsAppearance>
    For more information, you can have a look at the help article about labels' appearance configuration.

    I can also inform you that we plan to introduce improvements in Donut and Pieseries' positioning in our next official release. Meanwhile, you should apply custom appearance configurations to achieve a better look.

    I also attach a sample page where you can test my suggestions.

    Regards,
    Stamo Gochev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top