Hiding Labels on Pie Chart

10 posts, 1 answers
  1. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 07 May 2013 Link to this post

    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
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 10 May 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 15 May 2013 Link to this post

    This worked perfectly, thank you.
  5. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 31 Jul 2014 Link to this post

    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;
        }
  6. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 04 Aug 2014 in reply to MBEN Link to this post

    Hi Telerik Team,

    Any update on this?
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 05 Aug 2014 Link to this post

    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.

     
  8. Manu
    Manu avatar
    24 posts
    Member since:
    Aug 2015

    Posted 01 Apr Link to this post

    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.

     

  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 04 Apr Link to this post

    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.
  10. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 29 Apr in reply to Danail Vasilev Link to this post

    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

  11. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 04 May Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017