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