How to create a bullet chart with the WinUI linear gauge (SfLinearGauge)?

2 mins read

This article describes how to design a Bullet Chart using Syncfusion WinUI Linear Gauge control.

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

Step 2: To display the quantitative scale, set the Maximum, Interval, MinorTicksPerInterval and AxisLineStrokeThickness properties as shown in the following code sample.

XAML

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Maximum="10"
                  Interval="2"
                  MinorTicksPerInterval="3"
                  AxisLineStrokeThickness="30">
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

Step 3: To customize the major and the minor ticks, use the MajorTickLength and MinorTickLength as shown in the following code sample.

XAML

<gauge:LinearAxis MajorTickLength="15"
                  MinorTickLength="10">
</gauge:LinearAxis>

Step 4: To display the different quantitative range, add the multiple LinearGaugeRange as shown in the below code sample.

XAML

<gauge:LinearAxis.Ranges>
    <gauge:LinearGaugeRange EndValue="4"
                            Background="Red"
                            StartWidth="30"
                            EndWidth="30"
                            RangePosition="Cross" />
    <gauge:LinearGaugeRange StartValue="4"
                            EndValue="8"
                            Background="Yellow"
                            StartWidth="30"
                            EndWidth="30"
                            RangePosition="Cross" />
    <gauge:LinearGaugeRange StartValue="8"
                            EndValue="10"
                            Background="Green"
                            StartWidth="30"
                            EndWidth="30"
                            RangePosition="Cross" />
</gauge:LinearAxis.Ranges>

Step 5 : To display the featured measure, use the BarPointer as shown in the following code sample.

XAML

<gauge:LinearAxis.BarPointers>
    <gauge:BarPointer Value="5"
                      PointerSize="12"
                      Background="Black"/>
</gauge:LinearAxis.BarPointers>

Step 6: We can use the LinearShapePointer to display a comparative measure of the bullet chart.

XAML

<gauge:LinearAxis.MarkerPointers>
    <gauge:LinearShapePointer Value="7"
                              ShapeType="Rectangle"
                              ShapeHeight="20"
                              ShapeWidth="5"
                              Fill="black" />
</gauge:LinearAxis.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"
                      OffsetPoint="-8,0"
                      HorizontalAnchor="End">
    <gauge:LinearContentPointer.Content>
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Revenue YTD"
                       HorizontalAlignment="Center"/>
            <TextBlock Text="$ in Thousands" />
        </StackPanel>
    </gauge:LinearContentPointer.Content>
</gauge:LinearContentPointer>

Output

Bullet Chart using Syncfusion WinUI SfLinearGauge control

View sample in the GitHub.

How to create a bullet chart with the WinUI linear gauge (SfLinearGauge)?

See also

Access denied