How to visualize the Xamarin.Forms Pie Chart in linear form?
This article explains the way to render the pie chart in linear form. By extending the Xamarin. Forms Chart with the StackingColumnSeries and hiding the primary and secondary axes, we can show the pie chart in linear form as follows.
[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>
[C#]
public class PieChartExt : SfChart
{
….
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)
{
..
while (commonItemsSource.MoveNext())
{
CreateSeries(commonItemsSource.Current);
}
..
}
private void CreateSeries(object newValue)
{
StackingBar100Series stackingBar100Series = new StackingBar100Series()
{
ItemsSource = new List<PriceData> { newValue as PriceData },
XBindingPath = XBindingPath,
YBindingPath = YBindingPath,
Width = 0.7,
};
stackingBar100Series.DataMarker = new ChartDataMarker();
stackingBar100Series.DataMarker.ShowLabel = true;
stackingBar100Series.DataMarker.LabelStyle.TextColor = Color.White;
stackingBar100Series.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Center;
stackingBar100Series.DataMarkerPosition = DataMarkerPosition.Center;
Series.Add(stackingBar100Series);
}
…
}
Output
Conclusion
I hope you enjoyed learning about how to visualize the Xamarin. Forms Pie Chart in linear form.
You can refer to our Xamarin Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our Xamarin components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Xamarin Chart and other Xamarin components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
