A while back I was using the normal RadChart and not the HTML version. Once the HTML version came out I switched everything over to it and have been pretty happy. Recently I have come across the problem where I have too many labels on the pie chart (i.e. there are many items that are 2% or less making up the chart) which makes the chart look pretty messy.
In the normal RadChart there was a way to hide the labels on the databind event if the value of the dataitem was less than a certain percentage. However, I cannot seem to find a way to do this with the HTML chart.
Does anyone have an example how I can hide label that are less than a certain percentage on the HTML pie chart?
11 Answers, 1 is accepted
You can achieve the desired functionality by using the ClientTemplates of the RadHtmlChart. For example:
where the highlighted text is the condition of the function that returns values for the labels which percentage is greater than 2%.
the Telerik team
Below is my code:
Any update on this?
What I can suggest is that you create a new data source that will have five rows - the first four rows will contain the top four values while the last row will sums up the rest. After that you can manually change the value in the fifth row, the column responsible for the PieSeriesItems names to "All Others", so that it can appear in the legend.
Note that this is a custom data source manipulation that is not directly related to Telerik UI controls and must be manually handled by the developer in order to fit in with his own requirements.
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
You can increase the margin of the chart's plot area - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/troubleshooting/common-issues#there-is-a-redundant-space-between-pie-or-donut-chart-and-its-legend
Recently I have upgraded my Telerik control suite and had to adjust the HTML from the initial answer to the following for it to work:
I also had to adjust the Position from "Circle" to "OutsideEnd" as Circle was no longer a supported value. Everything works as expected with the exception of one little problem: even though a label does not appear because it is below the 2% threshold, the line for that label still appears where previously it did not.
How can I prevent the lines from still drawing when the labels are not there?
I have tested with old versions and the line still appears. Can you check which is the version that you have been using before the upgrade?
However, you can prevent this to happen by assigning the template through the client-side widget of Kendo Chart and its seriesDefaults option instead through the series one.
I have already answered your support ticket on this matter, the solution can be seen in the following KB article: