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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

GroupMode label

Thread ID:

Created:

Updated:

Platform:

Replies:

148117 Oct 7,2019 07:19 AM UTC Oct 15,2019 07:06 AM UTC Xamarin.Forms 6
loading
Tags: SfChart
Mark
Asked On October 7, 2019 07:19 AM UTC

Hi,

I've been playing with GroupMode in the Sf Chart in Xamarin Forms, great library thanks! I was wondering if it's possible to put a label on the actual chart for "Others" when using the GroupMode?

I'd like to achieve having an "Others" which, like my main data labels, shows a label on the actual chart with "Others" and the sum of the amounts that have been grouped. I'm not using the legend, so it looks a bit strange seeing a slice of the chart without a label.

Hope it's possible, thanks in advance!
Mark

Hemalatha Marikumar [Syncfusion]
Replied On October 8, 2019 07:32 AM UTC

Hi Mark, 
 
Greetings from Syncfusion. 
 
We would like to let you know that your requirement has been achieved by using the LabelTemplate property of DataMarker and modified the label value using Converter.  
 
Please refer the below code.

Code snippet [XAML]:
 
 
<chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" GroupMode="Value" GroupTo="60"> 
    <chart:PieSeries.DataMarker> 
        <chart:ChartDataMarker> 
            <chart:ChartDataMarker.LabelTemplate> 
                <DataTemplate> 
                    <StackLayout Orientation="Vertical"> 
                        <Label FontSize="12" TextColor="White" HorizontalOptions="CenterAndExpand" Text="{Binding Converter={StaticResource converter}, ConverterParameter='Label'}"/> 
                        <Label FontSize="12" TextColor="White" HorizontalOptions="CenterAndExpand" Text="{Binding Converter={StaticResource converter}}"/> 
                    </StackLayout> 
                </DataTemplate> 
            </chart:ChartDataMarker.LabelTemplate> 
        </chart:ChartDataMarker> 
    </chart:PieSeries.DataMarker> 
</chart:PieSeries> 
  
Code snippet [C#]:
 
 
public class DataMarkerConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        if (parameter != null && parameter.ToString() == "Label") 
        { 
            if (value is List<object>) 
            { 
                return "Others"; 
            } 
            else 
            { 
                if (value != null) 
                { 
                    return (value as Model).XValue; 
                } 
            } 
        } 
        else 
        { 
            if (value is List<object>) 
            { 
                return (value as List<object>).Sum(item => (item as Model).YValue).ToString(); 
            } 
            else 
            { 
                if (value != null) 
                { 
                    return (value as Model).YValue; 
                } 
            } 
        } 
        return null; 
    } 
} 
  
  
  
Screenshot:

 
 
  
Please get back to us for further assistance. 
 
Regards, 
Hemalatha M. 


Mark
Replied On October 8, 2019 12:42 PM UTC

Seems to have done the trick, thanks very much!

Mark
Replied On October 8, 2019 01:09 PM UTC

Sorry forgot to ask my other question, how do i track that it's the group that is selected? I've wired up OnSelectionChanged (with an event to command behaviour) but can't find anything in the ChartSelectionEventArgs that is passed which indicates that it's the group that is selected.

Hemalatha Marikumar [Syncfusion]
Replied On October 10, 2019 06:24 PM UTC

Hi Mark Tilley, 
 
Thanks for the update.

We have validated your query and currently we don’t have a direct support to indicate ChartSelectionEventArgs when the grouping segment is selected. However, you can achieve this requirement by getting the corresponding DataPoint using DependencyService in each platform. 
 
Please refer below code snippet. 
  
Code snippet [MainPage]: 
 
  
private void SfChart_SelectionChanged(object sender, ChartSelectionEventArgs e) 
{  
            if (e.SelectedDataPointIndex >= 0) 
            { 
               object data = DependencyService.Get<IChartDependencyService>().GetDataPoint(e.SelectedSeries as PieSeries, e.SelectedDataPointIndex); 
  
                if (data is List<object>) 
                { 
                    //Grouped segment is selected. 
                    this.DisplayAlert("Selected Grouped Data", "Yes", "Ok"); 
                } 
            } 
} 
  
  
public interface IChartDependencyService 
{ 
        object GetDataPoint(PieSeries series,int selectedIndex); 
} 
  
  
  
Code snippet [Android]:   
 
  
public class AndroidDependencyService : IChartDependencyService 
{ 
        public object GetDataPoint(PieSeries series, int selectedIndex) 
        { 
            var nativeSeries = (Native.PieSeries)SfChartRenderer.GetNativeObject(typeof(PieSeries), series); 
            PropertyInfo datapoint = typeof(Native.PieSegment).GetProperty("DataPoint", BindingFlags.NonPublic | BindingFlags.Instance); 
            return datapoint.GetValue(nativeSeries.Segments[selectedIndex], null); 
        } 
} 
  
  
Code snippet [iOS]:  
 
  
public class iOSDependencyService : IChartDependencyService 
{ 
        public object GetDataPoint(PieSeries series, int selectedIndex) 
        { 
            var nativeSeries = (Native.SFPieSeries)SfChartRenderer.GetNativeObject(typeof(PieSeries), series); 
            PropertyInfo datapoint = typeof(Native.SFPieSegment).GetProperty("DataPoint", BindingFlags.NonPublic | BindingFlags.Instance); 
            return datapoint.GetValue(nativeSeries.Segments[selectedIndex], null); 
        } 
} 
  
  
Code snippet [UWP]:  
 
public class UWPDependencyService : IChartDependencyService 
{ 
        public object GetDataPoint(PieSeries series, int selectedIndex) 
        { 
            var nativeSeries = (Native.ChartSeriesBase)SfChartRenderer.GetNativeObject(typeof(ChartSeries), series as ChartSeries); 
            var segments = typeof(Native.ChartSeriesBase).GetField("Segments", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(nativeSeries) as ObservableCollection<Native.ChartSegment>; 
            return segments[selectedIndex].Item;  
        } 
} 
  
And we have prepared a sample based on your requirement and you can download the sample from the below link. 
  
  
Screenshot:  
  
 
  
Regards, 
Hemalatha M. 


Mark
Replied On October 15, 2019 02:12 AM UTC

Awesome, got it to work, thanks again!

Hemalatha Marikumar [Syncfusion]
Replied On October 15, 2019 07:06 AM UTC

Hi Mark Tilley,

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon