How to design a bullet chart using the .NET MAUI Linear Gauge (SfLinearGauge)?

2 mins read

This article describes how to design a Bullet Chart using the Syncfusion .NET MAUI Linear Gauge control.

Step 1: Create the SfLinearGauge control by referring to this getting started link.

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 2: 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 3: 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 4: To display the different qualitative range, add the multiple LinearRange as shown in the below code sample.

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 5: 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 6: We can 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 7: 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

BulletGraph using the syncfusion .NET MAUI Linear Gauge control (SfLinearGauge).

View sample in the GitHub.

How to design a bullet chart using the .NET MAUI Linear Gauge (SfLinearGauge)?

See also

Access denied