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

Donut chart clipping labels

1 Answer 57 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 23 Oct 2013, 06:03 PM
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

1 Answer, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 28 Oct 2013, 08:24 AM
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.
Tags
Chart (HTML5)
Asked by
Rahul
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Share this question
or