Data Label for StackingColumnSeries

[Benjamin]

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

[Hemalatha Marikumar]

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:SfChart.Series> 

                <chart:StackingColumnSeries ItemsSource="{Binding Data1}" XBindingPath="XValue" YBindingPath="YValue"/> 

                <chart:StackingColumnSeries ItemsSource="{Binding Data2}" DataMarkerLabelCreated="StackingColumnSeries_DataMarkerLabelCreated" XBindingPath="XValue" YBindingPath="YValue"> 

                    <chart:StackingColumnSeries.DataMarker> 

                        <chart:ChartDataMarker ShowLabel="True"> 

                            <chart:ChartDataMarker.LabelStyle> 

                                <chart:DataMarkerLabelStyle LabelPosition="Outer"/> 

                            </chart:ChartDataMarker.LabelStyle> 

                        </chart:ChartDataMarker> 

                    </chart:StackingColumnSeries.DataMarker> 

                </chart:StackingColumnSeries> 

</chart:SfChart.Series> 

  

Code Snippet [C#]: 

private void StackingColumnSeries_DataMarkerLabelCreated(object sender, ChartDataMarkerLabelCreatedEventArgs e) 

{ 

            if (Device.RuntimePlatform == Device.UWP) 

            { 

                e.DataMarkerLabel.Label = e.DataMarkerLabel.YPosition.ToString(); 

            } 

            else 

            { 

                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. 

  

Sample:  https://www.syncfusion.com/downloads/support/directtrac/148249/ze/148249_DataMarker-6131156.zip  

  

Screenshot: 

 

 

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.   

Regards,
Hemalatha M. 

[Benjamin]

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

Thanks for all the assistance rendered.

[Hemalatha Marikumar]

Hi Benjamin,

Thanks for your update.

We glad to hear that given solution works.

Please let us know if you have any other query.

Regards,
Hemalatha M. 

[Benjamin]

Hi,

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.

[Devakumar Dhanapoosanam]

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”. 

 

Screenshot: 

 

 

 

Please follow up further regarding this in the following forum # 152173.  

 

Regards, 

Devakumar D