DefaultFunctionalities.razor

@page "/bullet-chart/default-functionalities"
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor
@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates a default bullet chart to compare the feature (value) bar with comparative (target) bar. It includes variety of configurations to change the look and feel of the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>Tooltip is enabled in this example, to see the tooltip in action, hover a feature bar or comparative bar on the bullet chart.</p>
</ActionDescription>

<div class="control-section" style="text-align: center">
    <SfBulletChart DataSource="@BulletChartData0" Theme="@theme" ValueField="value" TargetField="target" Minimum="0" Maximum="300" Interval="50"
                   Title="Revenue" Subtitle="U.S. $" LabelFormat="${value}k" TitlePosition="TextPosition.Left" Width="80%">
        <BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
        <BulletChartMargin Left="60" Right="15"></BulletChartMargin>
        <BulletChartRangeCollection>
            <BulletChartRange End="150"> </BulletChartRange>
            <BulletChartRange End="250"></BulletChartRange>
            <BulletChartRange End="300"></BulletChartRange>
        </BulletChartRangeCollection>
    </SfBulletChart>

    <SfBulletChart DataSource="@BulletChartData1" ValueField="value" Theme="@theme" TargetField="target" Minimum="0" Maximum="30" Interval="5"
                   Title="Profit" Subtitle="%" LabelFormat="{value}%" TitlePosition="TextPosition.Left" Width="80%">
        <BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
        <BulletChartMargin Left="80" Right="15"></BulletChartMargin>
        <BulletChartRangeCollection>
            <BulletChartRange End="20"> </BulletChartRange>
            <BulletChartRange End="25"></BulletChartRange>
            <BulletChartRange End="30"></BulletChartRange>
        </BulletChartRangeCollection>
    </SfBulletChart>

    <SfBulletChart DataSource="@BulletChartData2" ValueField="value" Theme="@theme" TargetField="target" Minimum="0" Maximum="600" Interval="100"
                   Title="Avg Order Size" Subtitle="U.S. $" LabelFormat="${value}" TitlePosition="TextPosition.Left" Width="80%">
        <BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
        <BulletChartMargin Left="21.5" Right="15"></BulletChartMargin>
        <BulletChartRangeCollection>
            <BulletChartRange End="350"> </BulletChartRange>
            <BulletChartRange End="500"></BulletChartRange>
            <BulletChartRange End="600"></BulletChartRange>
        </BulletChartRangeCollection>
    </SfBulletChart>

    <SfBulletChart DataSource="@BulletChartData3" EnableGroupSeparator="false" Theme="@theme" ValueField="value" TargetField="target" Width="80%"
                   Minimum="0" Maximum="2500" Interval="500" Title="New Customers" Subtitle="Count" TitlePosition="TextPosition.Left">
        <BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
        <BulletChartMargin Left="18" Right="15"></BulletChartMargin>
        <BulletChartRangeCollection>
            <BulletChartRange End="1700"> </BulletChartRange>
            <BulletChartRange End="2000"></BulletChartRange>
            <BulletChartRange End="2500"></BulletChartRange>
        </BulletChartRangeCollection>
    </SfBulletChart>

    <SfBulletChart DataSource="@BulletChartData4" ValueField="value" Theme="@theme" TargetField="target" Minimum="0" Maximum="5" Interval="1"
                   Title="Cust Satisfication" Subtitle="Top rating of 5" TitlePosition="TextPosition.Left" Width="80%">
        <BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
        <BulletChartMargin Left="7" Right="15"></BulletChartMargin>
        <BulletChartRangeCollection>
            <BulletChartRange End="3.7"> </BulletChartRange>
            <BulletChartRange End="4.2"></BulletChartRange>
            <BulletChartRange End="5"></BulletChartRange>
        </BulletChartRangeCollection>
    </SfBulletChart>
</div>

@code{
    public class ChartData
    {
        public double value { get; set; }
        public double target { get; set; }
    }
    public List<ChartData> BulletChartData0 = new List<ChartData>
{
        new ChartData { value = 270, target = 250 }
    };
    public List<ChartData> BulletChartData1 = new List<ChartData>
{
        new ChartData { value = 23, target = 27 }
    };
    public List<ChartData> BulletChartData2 = new List<ChartData>
{
        new ChartData { value = 350, target = 550 }
    };
    public List<ChartData> BulletChartData3 = new List<ChartData>
{
        new ChartData { value = 1600, target = 2100 }
    };
    public List<ChartData> BulletChartData4 = new List<ChartData>
{
        new ChartData { value = 4.9, target = 4 }
    };

    private string CurrentUri;
    private Theme theme { get; set; }
    protected override void OnInitialized()
    {
        CurrentUri = NavigationManager.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            theme = Theme.Material;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            theme = Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            theme = Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            theme = Theme.HighContrast;
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            theme = Theme.Tailwind;
        }
        else
        {
            theme = Theme.Bootstrap4;
        }
    }
}