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

Hiding Labels on Pie Chart

11 Answers 454 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 2
Ron asked on 07 May 2013, 07:46 PM
Hello,

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?

Thanks,.
Ron

11 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 10 May 2013, 01:38 PM
Hi Ron,

You can achieve the desired functionality by using the ClientTemplates of the RadHtmlChart. For example:

<telerik:RadHtmlChart runat="server" ID="PieChart" Width="600" Height="400">
    <PlotArea>
        <Series>
            <telerik:PieSeries>
                <Items>
                    <telerik:SeriesItem YValue="130" />
                    <telerik:SeriesItem YValue="150" />
                    <telerik:SeriesItem YValue="5" />
                    <telerik:SeriesItem YValue="2" />
                </Items>
                <LabelsAppearance ClientTemplate="#if(percentage > 0.02){# #= value# #}#">
                </LabelsAppearance>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

where the highlighted text is the condition of the function that returns values for the labels which percentage is greater than 2%.



Kind regards,
Danail Vasilev
the Telerik team
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 their blog feed now.
0
Ron
Top achievements
Rank 2
answered on 15 May 2013, 12:34 PM
This worked perfectly, thank you.
0
MBEN
Top achievements
Rank 2
Veteran
answered on 31 Jul 2014, 06:43 PM
I am looking for something similar. Instead of based on a percentage, I want to display top 4 values and club all the rest together and display as one item and mark the legend as "All Others". How can I do that?

Below is my code:

ASPX:
<telerik:RadHtmlChart runat="server" ID="_pieChart" Transitions="false">
        <Appearance>
            <FillStyle BackgroundColor="Transparent"></FillStyle>
        </Appearance>
        <Legend>
            <Appearance BackgroundColor="Transparent" Position="Left" Visible="true">
                <TextStyle Margin="-7" FontSize="10"  />
            </Appearance>
        </Legend>
        <PlotArea>
            <Appearance>
                <FillStyle BackgroundColor="Transparent"></FillStyle>
            </Appearance>
            <Series>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
 
.CS
 
    public void DrawPie(DataView dv, string YValue, string XValue)
    {
        _pieChart.PlotArea.Series.Clear();
        PieSeries pieSeries = new PieSeries();
         
        //create the series items
        List<SeriesItem> items = new List<SeriesItem>();
        List<String> xValues = new List<String>();
        foreach (DataRowView row in dv)
        {
            SeriesItem si = new SeriesItem();
            string xVal = (string)row[XValue];
            decimal yVal = Decimal.Round(Convert.ToDecimal(row[YValue]), 2);
 
            si.Name = xVal;
            si.YValue = yVal; 
             
            items.Add(si);
            xValues.Add(xVal);
        }
 
        //calculate the sum
        decimal sum = 0.0M;
        for (int i = 0; i < items.Count; i++)
        {
            sum += (decimal)items[i].YValue;
        }
 
        //calculate percentages
        List<decimal> percentages = new List<decimal>();
        for (int i = 0; i < items.Count; i++)
        {
            decimal nextPercentage = Decimal.Round(100 * ((decimal)items[i].YValue / sum), 2);
            percentages.Add(nextPercentage);
        }
 
        //Add color palette
        List<Color> colors = new List<Color>();
        for (int i = 0; i < items.Count; i++)
        {
            colors.Add(Utility.MBPalette[i]);
        }
 
        //configure the series
        pieSeries.DataFieldY = "yValue";
        pieSeries.ColorField = "colorValue";
        pieSeries.NameField = "xValue";
        string template = "#= kendo.format(\"{0:N0}\", dataItem.percentageValue)#%";
        string tooltipTemplate = "#= dataItem.xValue# (#= dataItem.percentageValue#%)";
        pieSeries.LabelsAppearance.ClientTemplate = template;
        pieSeries.TooltipsAppearance.ClientTemplate = tooltipTemplate;
        pieSeries.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.PieAndDonutLabelsPosition.OutsideEnd;
        pieSeries.LabelsAppearance.TextStyle.Margin = "-5";
        pieSeries.LabelsAppearance.TextStyle.FontSize = Unit.Pixel(10);       
        pieSeries.StartAngle = 90;       
 
        _pieChart.PlotArea.Series.Add(pieSeries);
 
        //databind the chart
        _pieChart.DataSource = GetData(items, xValues, percentages, colors);
        _pieChart.DataBind();
 
        _pieChart.BorderColor = Color.Transparent;       
    }
 
    protected DataTable GetData(List<SeriesItem> items, List<String> xValues, List<decimal> percentages, List<Color>colors)
    {
        DataTable table = new DataTable();
        table.Columns.Add(new DataColumn("xValue"));
        table.Columns.Add(new DataColumn("yValue"));
        table.Columns.Add(new DataColumn("percentageValue"));
        table.Columns.Add(new DataColumn("colorValue"));
        table.Columns.Add(new DataColumn("legendValueValue"));
 
        for (int i = 0; i < items.Count; i++)
        {
            table.Rows.Add(new object[] { xValues[i], items[i].YValue, percentages[i], ColorTranslator.ToHtml(colors[i]) });
        }
        return table;
    }
0
MBEN
Top achievements
Rank 2
Veteran
answered on 04 Aug 2014, 03:19 PM
Hi Telerik Team,

Any update on this?
0
Danail Vasilev
Telerik team
answered on 05 Aug 2014, 01:52 PM
Hello,

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.

Regards,
Danail Vasilev
Telerik
 

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.

 
0
Bhavya
Top achievements
Rank 1
answered on 01 Apr 2016, 06:58 AM

hi

now i am facing with some problem.labels are not visible at the corners. if u see the attached pic u will come to know. can any one give solution to this?

thanks in advance.

 

0
Danail Vasilev
Telerik team
answered on 04 Apr 2016, 11:54 AM
Hi Manu,

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

Regards,
Danail Vasilev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Ron
Top achievements
Rank 2
answered on 29 Apr 2016, 07:45 PM

Hello,

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:

 

<telerik:PieSeries Name="Percent of Total Servers" DataFieldY="percent">
    <LabelsAppearance Position="OutsideEnd">
        <ClientTemplate>
            #if(percentage > 0.02){# #= value# %#}#
        </ClientTemplate>
    </LabelsAppearance>
    <TooltipsAppearance>
        <ClientTemplate>
            #=dataItem.key#<br />#=dataItem.value#
        </ClientTemplate>
    </TooltipsAppearance>
</telerik:PieSeries>

 

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?

Thanks,

Ron

0
Ianko
Telerik team
answered on 04 May 2016, 10:10 AM
Hello Ron,

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. 

<telerik:RadHtmlChart runat="server" ID="PieChart" Width="600" Height="400">
    <PlotArea>
        <Series>
            <telerik:PieSeries>
                <Items>
                    <telerik:SeriesItem YValue="130" />
                    <telerik:SeriesItem YValue="150" />
                    <telerik:SeriesItem YValue="5" />
                    <telerik:SeriesItem YValue="2" />
                </Items>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
    <ClientEvents OnLoad="OnLoad" />
</telerik:RadHtmlChart>
 
<script>
    function OnLoad(sender, args) {
        sender.get_kendoWidget().setOptions({ "seriesDefaults": { "labels": { "template": "#if(percentage > 0.02){# #= value# #}#" } } })
    }
</script>

Regards,
Ianko
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Julie
Top achievements
Rank 1
answered on 08 Mar 2019, 03:34 PM
I am having a similar problem.  If my value is zero it does not display the label.  But it still displays the connector to the label
0
Vessy
Telerik team
answered on 11 Mar 2019, 03:24 PM
Hi Julie,

I have already answered your support ticket on this matter, the solution can be seen in the following KB article:
https://www.telerik.com/support/kb/aspnet-ajax/chart-(html5)/details/hide-piechart-labels-for-specific-values

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart (HTML5)
Asked by
Ron
Top achievements
Rank 2
Answers by
Danail Vasilev
Telerik team
Ron
Top achievements
Rank 2
MBEN
Top achievements
Rank 2
Veteran
Bhavya
Top achievements
Rank 1
Ianko
Telerik team
Julie
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or