Blazor
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

User Interaction in Blazor Linear Gauge component

Tooltip

Linear Gauge displays the details about a pointer value through LinearGaugeTooltipSettings, when the mouse is hovered over the pointer. By default, tooltip will not be visible, and you can enable the tooltip by setting Enable property to true.

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugeTooltipSettings Enable="true">
            </LinearGaugeTooltipSettings>
            <LinearGaugePointers>
                <LinearGaugePointer Value="80">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Linear Gauge with Tooltip

Tooltip format

By default, tooltip shows the pointer value only. In addition to that, you can show more information in tooltip. For example, the format ${value} shows pointer value with currency symbol using the Format property.

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugeTooltipSettings Enable="true" Format="${value}">
            </LinearGaugeTooltipSettings>
            <LinearGaugePointers>
                <LinearGaugePointer Value="80">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Linear Gauge with Tooltip Format

Customize the appearance of tooltip

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugeTooltipSettings Enable="true"
                                        Format="Speed: {value}"
                                        Fill="lightgray"
                                        EnableAnimation="true">
                <LinearGaugeTooltipBorder Color="darkgray"
                                          Width="1">
                </LinearGaugeTooltipBorder>
                <LinearGaugeTooltipTextStyle Color="blue"
                                             FontStyle="italic"
                                             FontWeight="bold">
                </LinearGaugeTooltipTextStyle>
            </LinearGaugeTooltipSettings>
            <LinearGaugePointers>
                <LinearGaugePointer Value="40">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Linear Gauge with custom Tooltip

Pointer drag

You can drag either marker or bar pointer to the desired axis value using the EnableDrag property in the LinearGaugePointer.

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugePointers>
                <LinearGaugePointer Value="80" EnableDrag="true">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Linear Gauge with Pointer drag Sample

Previous
Next