A linear pie chart?

I'm looking for a chart that binds like a pie or doughnut series but looks like a StackingBar100Series. 

1 Reply

HM Hemalatha Marikumar Syncfusion Team January 7, 2020 07:09 AM UTC

Hi Kyle, 
  
Greetings from Syncfusion 
  
We have analyzed your requirement and it can be achieved by creating a custom class for SfChart with Itemsource, XBindingPath and YBindingPath properties. Please refer the below code.   
  
Code snippet[C#] [PieChartExt.cs] 
public class PieChartExt : SfChart 
    { 
  
        public static readonly BindableProperty ItemsSourceProperty = 
            BindableProperty.Create("ItemsSource"typeof(object), typeof(PieChartExt), null, BindingMode.Default, null, OnItemsSourceChanged); 
  
        public static readonly BindableProperty XBindingPathProperty = 
            BindableProperty.Create("XBindingPath"typeof(string), typeof(PieChartExt), "XValue", BindingMode.Default, null); 
  
        public static readonly BindableProperty YBindingPathProperty = 
                BindableProperty.Create(nameof(YBindingPath), typeof(string), typeof(PieChartExt), "YValue", BindingMode.Default, null); 
  
        public object ItemsSource 
        { 
            get { return (object)GetValue(ItemsSourceProperty); } 
            set { SetValue(ItemsSourceProperty, value); } 
        } 
  
        public string XBindingPath 
        { 
            get { return (string)GetValue(XBindingPathProperty); } 
            set { SetValue(XBindingPathProperty, value); } 
        } 
  
        public string YBindingPath 
        { 
            get { return (string)GetValue(YBindingPathProperty); } 
            set { SetValue(YBindingPathProperty, value); } 
        } 
  
        private static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue) 
        { 
            (bindable as PieChartExt).GenerateSeries(newValue); 
        } 
  
        private void GenerateSeries(object newValue) 
        { 
            if (ItemsSource != null) 
            { 
                var commonItemsSource = (ItemsSource as IEnumerable).GetEnumerator(); 
  
                if (newValue is INotifyCollectionChanged) 
                    (newValue as INotifyCollectionChanged).CollectionChanged += DataPoint_CollectionChanged; 
  
                while (commonItemsSource.MoveNext()) 
                { 
                    CreateSeries(commonItemsSource.Current); 
                } 
            } 
        }  
 
    } 
  
Code Snippet [XAML] (MainPage.xaml) 
<local:PieChartExt x:Name="Chart" ItemsSource="{Binding Data}" XBindingPath="Component" YBindingPath="Price" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
  
            <chart:SfChart.Title> 
                <chart:ChartTitle Text="A Linear PieChart"  /> 
            </chart:SfChart.Title> 
            <chart:SfChart.BindingContext> 
                <local:ViewModel x:Name="viewModel" /> 
            </chart:SfChart.BindingContext> 
            <chart:SfChart.PrimaryAxis> 
                <chart:CategoryAxis IsVisible="False" ShowMajorGridLines="False" > 
                </chart:CategoryAxis> 
            </chart:SfChart.PrimaryAxis> 
                <chart:SfChart.SecondaryAxis> 
                    <chart:NumericalAxis IsVisible="False" ShowMajorGridLines="False"> 
                    </chart:NumericalAxis> 
                </chart:SfChart.SecondaryAxis> 
            <chart:SfChart.ColorModel> 
                <chart:ChartColorModel Palette="Natural"/> 
            </chart:SfChart.ColorModel> 
        </local:PieChartExt> 
 
You can also customize the dynamically added and removed series and Width property used to customize the size of StackingBar100Series.  we have prepared a sample based your requirement and you can download the sample from the below link.  
 
 
 
Screenshot: 
 
 
 
Please let us know if you have any other concern. 
 
Regards, 
Hemalatha M. 


Loader.
Up arrow icon