1. Home
  2. Forum
  3. Xamarin.Forms
  4. GroupMode label

GroupMode label

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

6 Replies
HM Hemalatha Marikumar Syncfusion Team 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. 


MA Mark October 8, 2019 12:42 PM UTC

Seems to have done the trick, thanks very much!

MA Mark 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.

HM Hemalatha Marikumar Syncfusion Team 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. 


MA Mark October 15, 2019 02:12 AM UTC

Awesome, got it to work, thanks again!

HM Hemalatha Marikumar Syncfusion Team 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. 


Loader.
Up arrow icon