Pointers are used to indicate values on an axis. The value of the pointer can be modified using the Value
property.
@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugePointers>
<LinearGaugePointer Value="80">
</LinearGaugePointer>
</LinearGaugePointers>
</LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>
The Linear Gauge supports the following two types of pointers:
You can choose any pointer using the MarkerType
property.
A marker pointer is a shape that can be placed to mark the pointer value in the linear gauge.
Types of marker shapes
The following marker types are available in linear gauge. You can change the marker shape using the MarkerType
property in LinearGaugePointer
options.
You can also use an image instead of rendering a shape as pointer. It can be achieved by setting the MarkerType
property to Image
and setting image path to ImageUrl
in LinearGaugePointer
.
@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugePointers>
<LinearGaugePointer Value="60" MarkerType="MarkerType.Circle">
</LinearGaugePointer>
</LinearGaugePointers>
</LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>
Marker pointer customization
The marker pointer can be customized using following properties.
Height
- Specifies pointer heightPosition
] - Specifies the Position of the Pointers. Its Possible values are ‘Position.Inside’, ‘Position.Outside’ and ‘Position.Cross’Width
- Specifies pointer widthColor
- Specifies pointer colorPlacement
- Specifies pointer placement position, available placement options are ‘Near’, ‘Far’, ‘Center’ and ‘None’Offset
- Specifies offset value from it default position.Opacity
- Specifies pointer opacityAnimationDuration
- Specifies pointer animation durationLinearGaugePointerBorder
- Specifies pointer border color and width@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugePointers>
<LinearGaugePointer Value="60"
MarkerType="MarkerType.Circle"
Height="15"
Width="15"
Position="Position.Outside"
Color="#cd41f4">
</LinearGaugePointer>
</LinearGaugePointers>
</LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>
The bar pointer is used to track the axis value, and it is rendered depending upon the container type. The bar pointer starts from the beginning of the gauge and ends at the pointer value. To enable bar pointer set ‘Point.Bar’ value in Type
property.
@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugePointers>
<LinearGaugePointer Value="60" Type="Point.Bar">
</LinearGaugePointer>
</LinearGaugePointers>
</LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>
Bar pointer customization
The bar pointer can be customized using following properties.
Width
- Specifies bar pointer widthColor
- Specifies bar pointer colorOffset
- Helps to move the bar pointer from its default position.Opacity
- Specifies bar pointer opacityRoundedCornerRadius
- Specifies rounded corner for the bar pointerLinearGaugePointerBorder
- Specifies bar pointer border width and colorAnimationDuration
- Specifies animation duration for bar pointer@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugePointers>
<LinearGaugePointer Value="80"
Type="Point.Bar"
Width="20"
Color="#f44141">
</LinearGaugePointer>
</LinearGaugePointers>
</LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>
You can placement the marker pointer in any of the following locations using Placement
property.
@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugePointers>
<LinearGaugePointer Value="60"
MarkerType="MarkerType.Arrow"
Color="#cd41f4"
Placement="Placement.Near">
</LinearGaugePointer>
</LinearGaugePointers>
</LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>
In addition to the default pointer, you can add n number of pointers to an axis.
@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugePointers>
<LinearGaugePointer Value="30" MarkerType="MarkerType.Circle">
</LinearGaugePointer>
<LinearGaugePointer Value="60" MarkerType="MarkerType.Diamond">
</LinearGaugePointer>
<LinearGaugePointer Value="80" AnimationDuration="1000">
</LinearGaugePointer>
</LinearGaugePointers>
</LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>
Pointer is animated on loading the gauge. This can be handled using the AnimationDuration
property. You need to specify the duration of the animation in milliseconds.
@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugePointers>
<LinearGaugePointer Value="80" AnimationDuration="1000">
</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>
Gradient support allows to add multiple colors in the ranges and pointers of the linear gauge. The following gradient types are supported in the linear gauge.
Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the StartValue
property. The end value of the linear gradient will be set using the EndValue
property. The color stop values such as color, opacity and offset are set using ColorStop
property.
The linear gradient can be applied to all pointer types like marker and range bar. To do so, follow the below code sample.
@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge Orientation="Orientation.Horizontal">
<LinearGaugeContainer Width="30" Offset="30">
<LinearGaugeContainerBorder Width="0"/>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugeAxisLabelStyle Offset="55">
<LinearGaugeAxisLabelFont Color="#424242"/>
</LinearGaugeAxisLabelStyle>
<LinearGaugeLine Width="0.01"/>
<LinearGaugeMajorTicks Height="0.01" Interval="25"/>
<LinearGaugeMinorTicks Height="0.01"/>
<LinearGaugePointers>
<LinearGaugePointer Value="80" Height="25" Width="35" Offset="-40" MarkerType="MarkerType.Triangle"
Placement="Syncfusion.Blazor.LinearGauge.Placement.Near" LinearGradient="@PointerLinearModel">
</LinearGaugePointer>
</LinearGaugePointers>
<LinearGaugeRanges>
<LinearGaugeRange Color="#f54ea2" Start="0" End="80" StartWidth="30" EndWidth="30" Offset="30">
</LinearGaugeRange>
</LinearGaugeRanges>
</LinearGaugeAxis>
</LinearGaugeAxes>
</LinearGaugeContainer>
</SfLinearGauge>
@code {
public static LinearGradient PointerLinearModel = new LinearGradient() {
StartValue = "1%",
EndValue = "99%",
ColorStop = new List<ColorStop>() {
new ColorStop { Opacity=1, Color= "#fef3f9", Offset="1%" },
new ColorStop { Opacity=1, Color= "#f54ea2", Offset="100%" }
}
};
}
Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the InnerPosition
property. The outer circle position of the radial gradient can be set using the OuterPosition
property. The color stop values such as color, opacity and offset are set using ColorStop
property.
The radial gradient can be applied to all pointer types like marker and range bar. To do so, follow the below code sample.
@using Syncfusion.Blazor.LinearGauge
<SfLinearGauge Orientation="Orientation.Horizontal">
<LinearGaugeContainer Width="30" Offset="30">
<LinearGaugeContainerBorder Width="0"/>
<LinearGaugeAxes>
<LinearGaugeAxis>
<LinearGaugeAxisLabelStyle Offset="55">
<LinearGaugeAxisLabelFont Color="#424242"/>
</LinearGaugeAxisLabelStyle>
<LinearGaugeLine Width="0.01"/>
<LinearGaugeMajorTicks Height="0.01" Interval="25"/>
<LinearGaugeMinorTicks Height="0.01"/>
<LinearGaugePointers>
<LinearGaugePointer Value="80" Height="25" Width="35" Offset="-40" MarkerType="MarkerType.Triangle"
Placement="Syncfusion.Blazor.LinearGauge.Placement.Near" RadialGradient="@PointerRadialModel">
</LinearGaugePointer>
</LinearGaugePointers>
<LinearGaugeRanges>
<LinearGaugeRange Color="#f54ea2" Start="0" End="80" StartWidth="30" EndWidth="30" Offset="30">
</LinearGaugeRange>
</LinearGaugeRanges>
</LinearGaugeAxis>
</LinearGaugeAxes>
</LinearGaugeContainer>
</SfLinearGauge>
@code {
public static RadialGradient PointerRadialModel = new RadialGradient()
{
Radius = "60%",
OuterPosition = new OuterPosition() { X="50%", Y="50%" },
InnerPosition = new InnerPosition() { X="50%", Y="50%" },
ColorStop = new List<ColorStop>() {
new ColorStop { Opacity=0.9, Color= "#fff5f5", Offset="1%" },
new ColorStop { Opacity=0.8, Color= "#f54ea2", Offset="99%" }
}
};
}