Blazor
Demos
Support
Forum
Download
Search results

Pointers in Blazor Linear Gauge component

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>

Linear Gauge with Pointer Sample

Types of pointer

The Linear Gauge supports the following two types of pointers:

  • Bar
  • Marker

You can choose any pointer using the MarkerType property.

Marker pointer

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.

  • Circle
  • Rectangle
  • Triangle
  • InvertedTriangle
  • Diamond
  • Image

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>

Linear Gauge with MarkerType as circle Sample

Marker pointer customization

The marker pointer can be customized using following properties.

  • Height - Specifies pointer height
  • [Position] - Specifies the Position of the Pointers. Its Possible values are ‘Position.Inside’, ‘Position.Outside’ and ‘Position.Cross’
  • Width - Specifies pointer width
  • Color - Specifies pointer color
  • Placement - Specifies pointer placement position, available placement options are ‘Near’, ‘Far’, ‘Center’ and ‘None’
  • Offset - Specifies offset value from it default position.
  • Opacity - Specifies pointer opacity
  • AnimationDuration - Specifies pointer animation duration
  • LinearGaugePointerBorder - 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>

Linear Gauge with Marker pointer customization Sample

Bar pointer

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>

Linear Gauge with Bar pointer Sample

Bar pointer customization

The bar pointer can be customized using following properties.

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugePointers>
                <LinearGaugePointer Value="80"
                                    Type="Point.Bar"
                                    Width="20"
                                    Color="#f44141">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Linear Gauge with Bar Pointer customization Sample

Pointer placement

You can placement the marker pointer in any of the following locations using Placement property.

  • Far
  • Near
  • Center
  • None
@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugePointers>
                <LinearGaugePointer Value="60"
                                    MarkerType="MarkerType.Arrow"
                                    Color="#cd41f4"
                                    Placement="Placement.Near">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Marker pointer placement

Multiple pointers

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>

Linear Gauge with Multiple Pointers Sample

Pointer animation

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>

Linear gauge with pointer animation

Pointer dragging

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>

Drag linear gauge pointer

Previous
Next