Data Label for StackingColumnSeries

Benjamin

Asked On October 11, 2019 10:14 AM UTC

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

Reply | Reply with quote

Hemalatha Marikumar [Syncfusion]

Replied On 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: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.

Reply | Reply with quote

Benjamin

Replied On 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.

Reply | Reply with quote

Hemalatha Marikumar [Syncfusion]

Replied On 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.

Regards,
Hemalatha M.

Reply | Reply with quote

Benjamin

Replied On March 10, 2020 06:29 AM UTC

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.

Reply | Reply with quote

Devakumar Dhanapoosanam [Syncfusion]

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

Screenshot:

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

Regards,

Devakumar D

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148249	Oct 11,2019 10:14 AM UTC	Mar 11,2020 06:17 PM UTC	Xamarin.Forms	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US