Search results
User Interaction in Blazor Linear Gauge component
08 Apr 2021 / 2 minutes to read
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>
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>
Customize the appearance of tooltip
Fill- Specifies fill color for tooltipEnableAnimation- Enable or disable the tooltip animationLinearGaugeTooltipBorder- Specifies tooltip border width and colorLinearGaugeTooltipTextStyle- Specifies the tooltip text style, such as color, font family, font style and font weight
@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>
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>
Thank you for your feedback and comments.We will rectify this as soon as possible!