Blazor
Demos
Support
Forum
Download
Search results

Ranges in Blazor Bullet Chart component

’ Ranges ’ represent the quality of a specific range as ‘Good’, ‘Bad’, and ‘Satisfactory’ in the ‘Bullet-chart scale.’ The ‘Ending’ point of the qualitative range is specified by the property End. The ’ Minimum value ’ of a quantitative scale is considered as the starting point for the ‘First range’ and the ‘Previous range’ end points are considered as the starting point for other ranges.

@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@BulletChartData" ValueField="value" TargetField="target" Minimum="0" Maximum="300" Interval="50" Title="Revenue">
    <BulletChartRangeCollection>
        <BulletChartRange End=150> </BulletChartRange>
        <BulletChartRange End=250></BulletChartRange>
        <BulletChartRange End=300></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

@code{
    public class ChartData
    {
        public double value { get; set; }
        public double target { get; set; }
    }
    public List<ChartData> BulletChartData = new List<ChartData>
{
        new ChartData { value = 270, target = 250 }
    };
}

Color Customization

Color is customized with the Color property based on the ‘End’ values for each qualitative range. You can also customize the Opacity of the Color of each range.

@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@BulletChartData" CategoryField="category" ValueField="value" TargetField="target" Minimum="0" Maximum="100"
                Interval="10" Title="Sales Rate" Height="400">
    <BulletChartRangeCollection>
        <BulletChartRange End=35 Color="darkred" Opacity="0.5"></BulletChartRange>
        <BulletChartRange End=50 Color="red" Opacity="1"></BulletChartRange>
        <BulletChartRange End=75 Color="blue" Opacity="0.7"></BulletChartRange>
        <BulletChartRange End=90 Color="lightgreen" Opacity="1"></BulletChartRange>
        <BulletChartRange End=100 Color="green" Opacity="1"></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

@code{
    public class ChartData
    {
        public double value { get; set; }
        public double target { get; set; }
        public string category { get; set; }
    }
    public List<ChartData> BulletChartData = new List<ChartData>
{
        new ChartData { value = 55, target = 75, category = "Year 1" },
        new ChartData { value = 70, target = 70, category = "Year 2" },
        new ChartData { value = 85, target = 75, category = "Year 3" }
    };
}

Ranges

Previous
Next