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
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
0
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:
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
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:
- Increase the chart's Width and Height
- 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>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.