Showing name instead of value on pie chart segments

7 posts, 1 answers
  1. Derek
    Derek avatar
    119 posts
    Member since:
    Oct 2008

    Posted 15 Aug 2013 Link to this post

    Is it possible to show the name value instead of the data value on the pie chart segments? Basically, what we'd like to do is to show the data that is on the legend on the pie segment, instead of the number value. For example if I have a segment that shows Widgets, with a value of 30, currently the pie will show 30; I'd like to show the word 'Widget' instead.

    Is this possible?
  2. Answer
    Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 19 Aug 2013 Link to this post

    Yes, use ClientTemplate for LabelsAppearance eg;

     <telerik:PieSeries DataFieldY="DataFieldName" NameField="NameField">
     <LabelsAppearance ClientTemplate="#=dataItem.NameField#">
  3. Derek
    Derek avatar
    119 posts
    Member since:
    Oct 2008

    Posted 20 Aug 2013 Link to this post

    Thanks, this worked perfectly!
  4. Bill
    Bill avatar
    3 posts
    Member since:
    Dec 2013

    Posted 15 May 2014 Link to this post


    I'm trying to do a similar kind of thing with my label. But my template uses two dataitems with a <br /> in between. This approach seems to work for the tooltip client template but not with the labels client template. Any suggestions or workarounds?
  5. Marin Bratanov
    Marin Bratanov avatar
    5349 posts

    Posted 16 May 2014 Link to this post

    Hi Bill,

    This case is explained here: Put shortly - SVG (what RadHtmlChart uses to render the image) does not support line breaks. The tooltips are actually HTML elements, so they can work with the <br /> tag.


    Marin Bratanov

    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.

  6. John
    John avatar
    1 posts
    Member since:
    Dec 2010

    Posted 03 Jun 2019 in reply to Marin Bratanov Link to this post

    I am attempting to do the same thing but instead of binding to the HTML chart I programmatically add the segments to the pie chart or donut chart. I have included the code I use


    Part 1 - Setting the segment points

            For Each dr As Data.DataRow In ds.Tables("Data").Rows
                ai = New Telerik.Web.UI.AxisItem
                ai.LabelText = dr.Item("XValue")

                ai = Nothing

    Part 2 - Adding the Y Values

                    If m_useDoughnut Then
                        series = New Telerik.Web.UI.DonutSeries
                        series = New Telerik.Web.UI.PieSeries
                    End If
           = seriesName
                    series.ToolTipsAppearance.color = Drawing.Color.Black
                    series.ToolTipsAppearance.BackgroundColor = Drawing.Color.White
                    series.VisibleInLegend = True
                    series.LabelsAppearance.Visible = True
                    series.LabelsAppearance.ClientTemplate = "#=name#"

            For Each dr As Data.DataRow In ds.Tables("Data").Rows
                si = New Telerik.Web.UI.SeriesItem
                si.YValue = CType(dr.Item("YValue"), Single)
                si.TooltipValue = dr.Item("XValue").ToString
                si.Name = dr.Item("XValue").ToString
                si = Nothing
            series = Nothing


    I am attempting to use the LabelsAppearace ClientTemplate attribute to ouput the segment name. The setting I have at the moment does not display anything; I have also tried but this shows 'undefined' on the chart.


    Can anyone help me with this; thanks.

  7. Marin Bratanov
    Marin Bratanov avatar
    5349 posts

    Posted 03 Jun 2019 Link to this post

    Hello John,

    The name of the segment is under the "category" field, even when not data binding, like in this case. You can find a list of the fields you can use in the template in the following article (scroll down to the "Main Properties Used in a ClientTemplate" section):

    Also, to use a pie or donut series, you must add PieSeriesItem instances to its SeriesItems collection.

    On a side note, you don't need x-axis items for a donut or pie chart, as there is no x-axis.

    Here's an example I made for you that shows how this works and how to set a custom tooltip since I see an attempt at that in the code - in this sample the labels, tooltips and legend will all show the same value - the name of the segment.

    Protected Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init
        Dim chart As RadHtmlChart = New RadHtmlChart()
        chart.ID = "myChart"
        Dim series As DonutSeries = New DonutSeries()
        series.LabelsAppearance.ClientTemplate = "#=category#"
        series.TooltipsAppearance.ClientTemplate = "#=category#"
        Dim si As PieSeriesItem
        For Each dr As Data.DataRow In GetTestData().Rows
            si = New PieSeriesItem()
            si.Y = CType(dr.Item("YValue"), Single)
            si.Name = dr.Item("XValue").ToString
    End Sub
    Protected Function GetTestData() As DataTable
        Dim tbl As New DataTable()
        tbl.Columns.Add(New DataColumn("XValue", GetType(String)))
        tbl.Columns.Add(New DataColumn("otherField", GetType(String)))
        tbl.Columns.Add(New DataColumn("YValue", GetType(Single)))
        tbl.Columns.Add(New DataColumn("fourthField", GetType(String)))
        tbl.Rows.Add(New Object() {"first", "firstRecord2", 1, "A"})
        tbl.Rows.Add(New Object() {"first", "secondRecord2", 2, "B"})
        tbl.Rows.Add(New Object() {"third", "thirdRecord2", 3, "C"})
        Return tbl
    End Function

    Marin Bratanov
    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.
Back to Top