|
This article explains the steps required to design a circular gauge as a doughnut chart. Circular gauge control can be customized as doughnut chart as follows,
1. Add Scale with suitable angles for rendering doughnut shape by using StartAngle and SweepAngle. XAML : <xForms:Scale ShowTicks="False" ShowLabels="False" RimColor="Black" ScaleStartOffset="0.9" ScaleEndOffset="0.7" StartAngle="180" SweepAngle="180”>
2. Use RangePointer to set the Min and Max ranges. XAML : <xForms:RangePointer StartOffset="0.9" EndOffset="0.7" Value="60" Color="Brown"></xForms:RangePointer>
3. Add Header to display the Min and Max values. Header position can be altered as required. XAML : <xForms:Header Text="60" TextSize="27" Position="0.5,0.45" ForegroundColor="Brown"/> <xForms:Header Text="Min" TextSize="20" Position="0.1,0.54" ForegroundColor="Black"/> <xForms:Header Text="Max" TextSize="20" Position="0.9,0.54" ForegroundColor="Black"/>
The following screenshot illustrates the circular gauge as doughnut chart.
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
