How to design a bullet chart using the .NET MAUI Linear Gauge (SfLinearGauge)?
This article describes the steps to design a bullet chart using the Syncfusion® .NET MAUI Linear Gauge control. A bullet chart provides a way to visualize performance data, comparing actual data against target thresholds, by using qualitative ranges and pointers for a comprehensive representation.
Step 1: Begin by creating the SfLinearGauge control. You can refer to the Syncfusion® documentation for getting started.
Step 2: To display the quantitative scale, set the Maximum, Interval, and MinorTicksPerInterval properties as shown in the following code sample.
XAML
<gauge:SfLinearGauge Maximum="10"
Interval="2"
VerticalOptions="Center"
HorizontalOptions="Center"
MinorTicksPerInterval="3">
</gauge:SfLinearGauge>
Step 3: Customize the quantitative scale height by setting the Thickness of the LineStyle as shown in the following code sample.
XAML
<gauge:SfLinearGauge.LineStyle>
<gauge:LinearLineStyle Thickness="30" />
</gauge:SfLinearGauge.LineStyle>
Step 4: To customize the major and minor ticks, use MajorTickStyle and MinorTickStyle as shown in the following code sample.
XAML
<gauge:SfLinearGauge.MajorTickStyle>
<gauge:LinearTickStyle Length="15" />
</gauge:SfLinearGauge.MajorTickStyle>
<gauge:SfLinearGauge.MinorTickStyle>
<gauge:LinearTickStyle Length="10" />
</gauge:SfLinearGauge.MinorTickStyle>
Step 5: To display the different qualitative range, add multiple LinearRange as shown in the code sample below.
XAML
<gauge:SfLinearGauge.Ranges>
<gauge:LinearRange EndValue="4"
Fill="Red"
Position="Cross"
StartWidth="30"
EndWidth="30" />
<gauge:LinearRange StartValue="4"
Fill="yellow"
EndValue="8"
Position="Cross"
StartWidth="30"
EndWidth="30" />
<gauge:LinearRange StartValue="8"
Fill="green"
EndValue="10"
Position="Cross"
StartWidth="30"
EndWidth="30" />
</gauge:SfLinearGauge.Ranges>
Step 6: To display the featured measure, use the BarPointer as shown in the following code sample.
XAML
<gauge:SfLinearGauge.BarPointers>
<gauge:BarPointer Value="5"
PointerSize="12"
Fill="black" />
</gauge:SfLinearGauge.BarPointers>
Step 7: Use the LinearShapePointer to display a comparative measure of the bullet chart.
XAML
<gauge:SfLinearGauge.MarkerPointers>
<gauge:LinearShapePointer Value="7"
ShapeType="Rectangle"
ShapeHeight="20"
ShapeWidth="5"
Fill="black"
Position="Cross" />
</gauge:SfLinearGauge.MarkerPointers>
Step 8: To show the header for the bullet chart, use the LinearContentPointer as shown in the following code sample.
XAML
<gauge:LinearContentPointer Value="0"
OffsetX="-10"
OffsetY="35"
Alignment="Start">
<gauge:LinearContentPointer.Content>
<VerticalStackLayout Margin="0,0,10,0">
<Label Text="Revenue YTD"
HorizontalOptions="Center" />
<Label Text="$ in Thousands" />
</VerticalStackLayout>
</gauge:LinearContentPointer.Content>
</gauge:LinearContentPointer>
Output
See also
How to customize the shape pointer?
How to customize the bar pointer?
How to customize the content pointer?
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to design a bullet chart using the .NET MAUI Linear Gauge.
You can refer to our .NET MAUI Linear Gauge feature tour page to learn about its other groundbreaking feature representations and documentation, and how to get started with configuration specifications quickly. Explore our .NET MAUI Linear Gauge example to understand how to create and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
