Bug with percent data label on stacked charts

[Wayne]

So, I was building an application using the stacked column 100 series and turned on the data label to display the percent for each column and noticed that the percent labels seemed off:

The first one seemed to be right but the others were off. After trying to figure out if there was something wrong in the data i was sending, i changed it to just a stacked column and saw this:

And that's when i noticed that i believe that the percent label is using the overall max (or max of the first column) and then the value of each column to calculate the percent instead of the max of each column and the value of that respective column. I'm not sure if it does that in any others, but it seems to be in the WinUI version. Thanks!

Wayne

[Nitheeshkumar Thangaraj]

Hi Wayne,

We want to inform you that the calculation of individual segment percentages is based on the total of Y values within each respective series. This calculation doesn't involve a comparison with other series. This behavior is primarily designed for circular and bar charts and may not be suitable for stacked columns. In your situation, where you are directly using percentage values for Y values in a stacked column chart, we recommend using a label format for better visualization. We would appreciate your feedback or concerns regarding this requirement.

Regards,

Nitheeshkumar.

[Wayne]

Is there an example you can point me towards? I currently have the label format for the Y axis set to show the percent:

And then set the data label for the column to show the Y value:

But even doing that, I still see the raw value of the column - not the percent on the axis:

Thanks!

[Nitheeshkumar Thangaraj]

Hi Wayne,

Currently, our development team is in the process of investigating your query. We are conducting a thorough examination and aim to provide an update within one business day (by August 28, 2023).

Regards,

Nitheeshkumar

[Nitheeshkumar Thangaraj]

Hi Wayne,

Upon further validation, we recommend utilizing the Context="Percentage" property to display the percentage of the value in the chart. Could you please confirm whether you are able to use this property?

Furthermore, could you kindly share the background chart of the image you provided along with the code snippet of the chart? This will greatly assist us in better understanding your needs and providing effective solutions.

The code snippet provided below,

<chart:StackedColumn100Series.DataLabelSettings>

<chart:CartesianDataLabelSettings Context="Percentage"/>

</chart:StackedColumn100Series.DataLabelSettings>

Regards,

Nitheeshkumar.

[Wayne]

I originally had the series set that way, all though programmatically, that's how I found this issue to begin with:

In that the % numbers on the labels didn't match their respective amounts as shown on the axis. If you want, you can see all the code in my GitHub repo here;  Summary - Overview (visualstudio.com). The file you're looking at in the screencap is "StackedColumn100SeriesMapper.cs". Thanks!

[Nitheeshkumar Thangaraj]

Hi Wayne,

Based on the input you provided, as previously mentioned, the percentage value is calculated based on the total values of Y within the same series, not by another series. To calculate the actual percentage as per your expectation, we have utilized a converter and bound it to the ContentTemplate in order to meet this requirement. Below, you will find the code snippet and image provided for your reference.

public class Country

        {

            public DateTime Date { get; set; }

            public double GDP { get; set; }

            public double CDP { get; set; }

        }     

public class PercentageConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, string language)

        {

            if (value is Country Item)

            {

                return (Item.GDP/(Item.CDP+Item.GDP) *100).ToString("F2")+"%";

            }

            return value;

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, string language)

        {

            throw new NotImplementedException();

        }

    }

<chart:SfCartesianChart.Resources>

            <local:PercentageConverter x:Key="PertangeConverter"></local:PercentageConverter>

            <DataTemplate x:Key="labelTemplate">

                <TextBlock Text="{Binding Item,Converter={StaticResource PertangeConverter}}"></TextBlock>

            </DataTemplate>

 </chart:SfCartesianChart.Resources>

<chart:CartesianDataLabelSettings ContentTemplate="{StaticResource labelTemplate}" Context="DataLabelItem" >

We have created a separate ticket for this issue. Please refer to that ticket for further updates.

Regards,

Nitheeshkumar

[Wayne]

Ah ha - got it!

TIL how the DataTemplate works with the object being set to it - correctly. I added a string property to my ChartData object

and then created a DataTemplate that binds to it

Then add that template when binding the data

Thanks for the help!

[Nitheeshkumar Thangaraj]

Hi Wayne,

Thank you for your update. We have bind the Context as "DataLabelItem". The data context of DataLabelItem is ChartDataLabel class, allowing us to access all the values of that class through binding. You can find the API link below:

https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabel.html#properties

Regards,

Nitheeshkumar.