Search results

Actual Bar in the Blazor Bullet Chart (SfBulletChart)

22 Jul 2021 / 2 minutes to read

To display the primary data, or the current value of the data being measured known as the Feature Measure that should be encoded as a bar is called as Actual Bar or Feature Bar in the Bullet Chart. To display the actual bar, the ValueField should be mapped to the appropriate field from the data source.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@BulletChartData" ValueField="FieldValue" 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 FieldValue { get; set; }
    }
    public List<ChartData> BulletChartData = new List<ChartData>
    {
        new ChartData { FieldValue = 23}
    };
}

Actual Bar in Bullet Chart

Types of Actual Bar

The shape of the actual bar can be customized using the Type property of the Bullet Chart. The actual bar contains Rect and Dot shapes. By default, the actual bar shape is Rect.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@BulletChartData" Type="FeatureType.Dot" ValueField="FieldValue" Minimum="0" Maximum="30" Interval="5">
    <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 the BulletChartData.

Types of Actual Bar

Actual Bar Customization

The following properties will be used to customize the actual bar.

Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@BulletChartData" ValueFill="lightblue" ValueHeight="15" ValueField="FieldValue" Minimum="0" Maximum="30" Interval="5">
<BulletChartValueBorder Color="red" Width="1"></BulletChartValueBorder>
<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 the BulletChartData.

Actual Bar - Customization