Bar chart adding percentages to labels

3 posts, 1 answers
  1. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 06 Jul 2015 Link to this post

    I am trying to add percentages as labels to my Kendo bar chart - I have got this working for Pie Charts fine but the same code isn't working for bar charts.  For the pie charts I use the .Template property of the label, and the "percentage" property is inherently available (I've not defined it in my model I'm binding to anywhere). This is what I am using for the series for my pie chart (working) :-

     .Series(series => series
            .Pie(model => model.Share, model => model.SiteSurveyed.ToString(), model => model.Color)
            .Padding(0)
            .Labels(labels => labels
                .Visible(true)
                .Template("#= category # - #= value # (#= kendo.format('{0:P}', percentage)#)")
                .Align(ChartPieLabelsAlign.Column)
                .Position(ChartPieLabelsPosition.Center)
            )
        )

    And this is what I am using for my bar charts (not working - the UI just puts undefined in the label) :-

       .Series(series => series
            .Bar(d => d.Share, d => d.Color)
            .Labels(labels => labels
                .Visible(true)
                .Template("#= value # (#= kendo.format('{0:P}', percentage)#)")
                .Position(ChartBarLabelsPosition.Center)
            )
        )

    Please can you advise how I can make this work.

    Thanks, Mark

  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 08 Jul 2015 Link to this post

    Hi Mark,

    As pointed in the documentation, percentage field is available only for pie, donut and 100% stacked charts. What I would suggest for your scenario is to add an additional field in your data which contains the calculated point percentage - then you could reach it in the labels.template via the dataItem. As an example: 
    //....
    .Labels(labels => labels
        .Visible(true)
        .Template("#= value #, #= dataItem.PercentageField # )")
        .Position(ChartBarLabelsPosition.Center)
    )


    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 08 Jul 2015 in reply to Iliana Nikolova Link to this post

    That worked perfectly, thanks :)
Back to Top