Search results

Tooltip in Blazor Bullet Chart component

08 Apr 2021 / 1 minute to read

‘Bullet Chart’ will display the details of ‘Actual’ and ‘Target’ values through ‘Tooltip’ when the mouse is moved over the ‘Target’ and the ‘Feature’ bar.

Default Tooltip

By setting Enablethe property to ‘True’ in BulletChartTooltip tag. The ‘Tooltip’ is visible in the ‘Bullet chart’ by default.

Copied to clipboard
@using Syncfusion.Blazor.Charts

    <SfBulletChart DataSource="@LocalChartData" ValueField="value" TargetField="ComparativeMeasureValue" CategoryField="Category"
                    Height="400" Minimum="0" Maximum="20" Interval="5" LabelFormat="{value}%" Title="Profit in Percentage">
        <BulletChartTooltip Enable="true"></BulletChartTooltip>
        <BulletChartRangeCollection>
            <BulletChartRange End=5> </BulletChartRange>
            <BulletChartRange End=15></BulletChartRange>
            <BulletChartRange End=20></BulletChartRange>
        </BulletChartRangeCollection>
    </SfBulletChart>

@code{
    public class BulletChartData
    {
        public double value { get; set; }
        public double ComparativeMeasureValue { get; set; }
        public string Category { get; set; }
    }
    public List<BulletChartData> LocalChartData = new List<BulletChartData>
    {
        new BulletChartData { value = 5, ComparativeMeasureValue = 7.5, Category = "2001" },
        new BulletChartData { value = 7, ComparativeMeasureValue = 5, Category = "2002" },
        new BulletChartData { value = 10, ComparativeMeasureValue = 6, Category = "2003" },
        new BulletChartData { value = 5, ComparativeMeasureValue = 8, Category = "2004" },
        new BulletChartData { value = 12, ComparativeMeasureValue = 5, Category = "2005" },
        new BulletChartData { value = 8, ComparativeMeasureValue = 6, Category = "2006" }
    };
}

Tooltip