Display Both 'Number' and '%' in Stacked Bar

3 posts, 0 answers
  1. Irving
    Irving avatar
    12 posts
    Member since:
    Jan 2014

    Posted 03 Jul 2015 Link to this post

    Hi guys,


    I am having a RadHTMLChart which it shown in my attached file. I was wondering how do go about displaying number and the percentage base on each stacked column. Currently I am using the code snippet which is shown below:

    DataTable source = getData(); // getting my data soruce
    ColumnSeries colOnTime = new ColumnSeries();
    colOnTime.Name = "WO on Time";
    colOnTime.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
    colOnTime.Stacked = true;
    colOnTime.Appearance.FillStyle.BackgroundColor = System.Drawing.ColorTranslator.FromHtml("#33CC33");
    colOnTime.LabelsAppearance.ClientTemplate = "#if (value > 0) {# #=value# #} else {# #} #";
    ColumnSeries colLate = new ColumnSeries();
    colLate.Name = "WO less than " + ConfigurationManager.AppSettings["KPIThreshold"] + " days overdued";
    colLate.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
    colLate.Stacked = true;
    colLate.LabelsAppearance.ClientTemplate = "#if (value > 0) {# #=value# #} else {# #} #";
    ColumnSeries colVeryLate = new ColumnSeries();
    colVeryLate.Name = "WO more than " + ConfigurationManager.AppSettings["KPIThreshold"] + " days overdued";
    colVeryLate.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
    colVeryLate.Appearance.FillStyle.BackgroundColor = System.Drawing.ColorTranslator.FromHtml("#B80000");
    colVeryLate.Stacked = true;
    colVeryLate.LabelsAppearance.ClientTemplate = "#if (value > 0) {# #=value# #} else {# #} #";
    ColumnSeries grandTotal = new ColumnSeries();
    grandTotal.Stacked = true;
    grandTotal.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.OutsideEnd;
    grandTotal.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.Transparent;
    grandTotal.LabelsAppearance.ClientTemplate = "#if (value > 0) {# #=value# #} else {# #} #";
    foreach (DataRow row in source.Rows)
        int? wo = Convert.ToInt32(row["onTime"]);
        wo = Convert.ToInt32(row["late"]);
        wo = Convert.ToInt32(row["verylate"]);
        chrtKPI.PlotArea.YAxis.LabelsAppearance.TextStyle.Padding = "5px";

  2. Ianko
    Ianko avatar
    1738 posts

    Posted 06 Jul 2015 Link to this post

    Hi Irving,

    Percent values are available only in donut and pie series. The same is explained here—http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview#main-properties-used-in-a-clienttemplate.

    Also, with column series, there is no built-in calculation for percent, even if the are stacked. What it should  represent this percent value, percent from the items of the group or from the items in the stack?

    However, you can also calculate some values programmatically and save them in the database, so to show them in the client-template as shown here—http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview#showing-database-values-using-a-clienttemplate.

    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. Irving
    Irving avatar
    12 posts
    Member since:
    Jan 2014

    Posted 06 Jul 2015 in reply to Ianko Link to this post

    Hi Ianko,

    Thanks for your reply, yes my intention is to calculate the values of each stacked column in terms of percentage base on the total sum and display it beside my values. I can work with your 2nd alternate solution, so I will keep you posted if I encounter any issues. Thanks again.


Back to Top