We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Data Label for StackingColumnSeries

I would like to check if it is possible to set the data marker label at the very top of the StackingColumnSeries and the content of the label to the sum of YBindingPath of all the StackingColumnSeries?

For example, based on the image above, for the columnseries for Parts Only, instead of showing 120 and 600, i want the label to be at the top showing 720

5 Replies

HM Hemalatha Marikumar Syncfusion Team October 14, 2019 11:10 AM UTC

Hi Benjamin,

Greetings from Syncfusion.

We would like to let you know that your requirement “Content of the label to the sum of YBindingPath of all the StackingColumnSeries” by using XPosition and YPosition properties in DataMarkerLabelCreated event. 
 You can show the DataMarkerLabel at outside of series by setting LabelPosition as Outer in DataMarkerLabelStyle 
 Please refer below code snippet. 
Code Snippet [Xaml]: 
                <chart:StackingColumnSeries ItemsSource="{Binding Data1}" XBindingPath="XValue" YBindingPath="YValue"/> 
                <chart:StackingColumnSeries ItemsSource="{Binding Data2}" DataMarkerLabelCreated="StackingColumnSeries_DataMarkerLabelCreated" XBindingPath="XValue" YBindingPath="YValue"> 
                        <chart:ChartDataMarker ShowLabel="True"> 
                                <chart:DataMarkerLabelStyle LabelPosition="Outer"/> 
Code Snippet [C#]: 
private void StackingColumnSeries_DataMarkerLabelCreated(object sender, ChartDataMarkerLabelCreatedEventArgs e) 
            if (Device.RuntimePlatform == Device.UWP) 
                e.DataMarkerLabel.Label = e.DataMarkerLabel.YPosition.ToString(); 
                Point point = new Point(e.DataMarkerLabel.XPosition, e.DataMarkerLabel.YPosition); 
                e.DataMarkerLabel.Label = Math.Round(chart.SecondaryAxis.PointToValue(point)).ToString(); 
And we have prepared a sample based on your requirement and you can download the sample from below link. 

Please refer the below link to know more about DataMarker LabelPosition.
UG link : https://help.syncfusion.com/xamarin/sfchart/datamarker#label-position

Please let us know if need any further assistance.   

Hemalatha M. 

BE Benjamin October 15, 2019 02:27 AM UTC

Hi, I tried the above code snippets and am able to achieve my requirements.

Thanks for all the assistance rendered.

HM Hemalatha Marikumar Syncfusion Team October 15, 2019 06:56 AM UTC

Hi Benjamin,

Thanks for your update.

We glad to hear that given solution works.

Please let us know if you have any other query.

Hemalatha M. 

BE Benjamin March 10, 2020 06:29 AM UTC


I have posted an issue with the data label on android here

Mainly the label is showing NaN only on Android. I have checked on the all the stacking columns series in the chart, all the value in the YBindingPath is initialised with 0.

DD Devakumar Dhanapoosanam Syncfusion Team March 11, 2020 06:17 PM UTC

Hi Benjamin, 
We have tried to reproduce the reported issue “DataMarker label value showing NaN Android” at our end and we were unable to reproduce the reported issue. The provided solution works proper in android too.  
Please find the sample output below which works fine at our end, when setting the chart datapoints YValue as “0”. 
Please follow up further regarding this in the following forum # 152173.  
Devakumar D 

Live Chat Icon For mobile
Up arrow icon