MultipleData.razor

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

<SampleDescription>
    <p>This sample illustrates a bullet chart with multiple data to compare different values.</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">
    <div align="center">
        <SfBulletChart DataSource="@LocalChartData" ValueField="CompletedStories" Theme="@theme" TargetField="RequiredStories" CategoryField="Name" ValueFill="#304560" Width="80%"
                       TargetColor="#304560" Height="400" Minimum="5" Maximum="45" Interval="5" Title="Sprint Planning" Subtitle="Estimated in story points" TitlePosition="TextPosition.Top">
            <BulletChartTooltip TValue="BulletChartData" Enable="true"></BulletChartTooltip>
            <BulletChartMinorTickLines Width="0"></BulletChartMinorTickLines>
            <BulletChartRangeCollection>
                <BulletChartRange End="25" Opacity="1" Color="#DBE7F3"> </BulletChartRange>
                <BulletChartRange End="37" Opacity="1" Color="#BBCEE7"></BulletChartRange>
                <BulletChartRange End="45" Opacity="1" Color="#96B2D7"></BulletChartRange>
            </BulletChartRangeCollection>
        </SfBulletChart>
    </div>
</div>

@code{
    public class BulletChartData
    {
        public double CompletedStories { get; set; }
        public double RequiredStories { get; set; }
        public string Name { get; set; }
    }
    public List<BulletChartData> LocalChartData = new List<BulletChartData>
{
        new BulletChartData { CompletedStories = 25, RequiredStories = 20, Name = "David" },
        new BulletChartData { CompletedStories = 20, RequiredStories = 25, Name = "Asif" },
        new BulletChartData { CompletedStories = 10, RequiredStories = 15, Name = "Thomas" },
        new BulletChartData { CompletedStories = 39, RequiredStories = 40, Name = "Rohit" },
        new BulletChartData { CompletedStories = 40, RequiredStories = 40, Name = "Virat" },
        new BulletChartData { CompletedStories = 25, RequiredStories = 28, Name = "Jude" },
        new BulletChartData { CompletedStories = 18, RequiredStories = 10, Name = "Warner" },
        new BulletChartData { CompletedStories = 28, RequiredStories = 30, Name = "Malik" },
    };

    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;
        }
    }
}