Search results

Target Bar in the Blazor Bullet Chart (SfBulletChart)

22 Jul 2021 / 2 minutes to read

The line marker that runs perpendicular to the orientation of the graph is known as the Comparative Measure and it is used as a target marker to compare with the feature measure value. This is also called as Target Bar in the Bullet Chart. To display the target bar, the TargetField should be mapped to the appropriate field from the datasource.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@BulletChartData" TargetField="Target" Minimum="0" Maximum="30" Interval="5">
    <BulletChartRangeCollection>
        <BulletChartRange End=20> </BulletChartRange>
        <BulletChartRange End=25></BulletChartRange>
        <BulletChartRange End=30></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

@code{
    public class ChartData
    {
        public double Target { get; set; }
    }
    public List<ChartData> BulletChartData = new List<ChartData>
    {
        new ChartData { Target = 25 }
    };
}

Target Bar in Bullet Chart

Types of Target Bar

The shape of the target bar can be customized using the TargetTypes property, and it supports Circle, Cross, and Rect shapes. The default type of the target bar is Rect.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@BulletChartData" TargetField="Target" Minimum="0" Maximum="30" Interval="5" TargetTypes="new List<TargetType>() { TargetType.Cross }">
    <BulletChartRangeCollection>
        <BulletChartRange End=20> </BulletChartRange>
        <BulletChartRange End=25></BulletChartRange>
        <BulletChartRange End=30></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

Refer to the code block to know about the property value of BulletChartData.

Target Bar with types

Target Bar Customization

The following properties can be used to customize the Target Bar.

  • TargetColor - Specifies the fill color of the Target Bar.
  • TargetWidth - Specifies the width of the Target Bar.
Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@BulletChartData" TargetField="Target" Minimum="0" Maximum="30" Interval="5" TargetColor="red" TargetWidth="10">
<BulletChartRangeCollection>
    <BulletChartRange End=20> </BulletChartRange>
    <BulletChartRange End=25></BulletChartRange>
    <BulletChartRange End=30></BulletChartRange>
</BulletChartRangeCollection>
</SfBulletChart>

Refer to the code block to know about the property value of BulletChartData.

Target Bar with customization