Search results

Pointers

Pointers are used to indicate values on an axis. The value of a pointer can be modified using the Value property.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="90">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with pointer

The Circular Gauge supports three types of pointers such as Needle, RangeBar, and Marker. You can choose any pointer using the Type property.

Needle pointer

The circular gauge’s default pointer type will be needle. A needle point contains three parts, a needle, a cap / knob, and a tail.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="90">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with needle pointer

Customization

The needle, tail and cap of the pointer can be customized with the following properties.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge Height="250px" Width="250px">
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="90" Radius="40%" PointerWidth="30" Color="#007DD1">
                    <CircularGaugeCap Radius="15" Color="white">
                        <CircularGaugeCapBorder Width="4" Color="#007DD1"></CircularGaugeCapBorder>
                    </CircularGaugeCap>
                    <CircularGaugeNeedleTail Length="35%" Color="#007DD1"></CircularGaugeNeedleTail>
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with custom pointer

Range bar pointer

The range bar pointer is like a range in an axis that can be placed on gauge to mark the pointer value. The range bar starts from the beginning of the gauge and ends at the pointer value.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="50"
                                      Type="PointerType.RangeBar">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with range pointer

Customization

You can customize the range bar using the following properties.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="46"
                                      Type="PointerType.RangeBar"
                                      PointerWidth="8"
                                      Radius="95%"
                                      Color="lightgray">
                    <CircularGaugePointerBorder Color="darkgray"
                                                Width="2">
                    </CircularGaugePointerBorder>
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with custom range bar

Rounded corners

The start and end pointers of a range bar in the Circular Gauge are rounded to form arc gauges.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="46"
                                      RoundedCornerRadius="20"
                                      Type="PointerType.RangeBar">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge range bar with rounded corner

Marker pointer

The different types of marker shapes can be used to mark the pointer value in an axis. You can change the marker shape using the MarkerShape property in pointer. The Circular Gauge supports the following marker shapes:

  • Circle
  • Rectangle
  • Triangle
  • InvertedTriangle
  • Diamond
@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="90"
                                      Type="PointerType.Marker"
                                      MarkerShape="GaugeShape.Diamond"
                                      MarkerHeight="15"
                                      MarkerWidth="15">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with custom marker pointer

Customization

You can customize the marker pointer using the following properties.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="90"
                                      Type="PointerType.Marker"
                                      MarkerShape="GaugeShape.InvertedTriangle"
                                      MarkerHeight="15"
                                      MarkerWidth="15"
                                      Color="white"
                                      Radius="110%">
                    <CircularGaugePointerBorder Width="2" Color="#007DD1"></CircularGaugePointerBorder>
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with custom marker pointer

Image marker pointer

You can use image instead of rendering marker shape to denote the pointer value. It can be achieved by setting MarkerShape to ‘GaugeShape.Image’ and assigning image path to ImageUrl as shown in following example.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="90"
                                      Type="PointerType.Marker"
                                      MarkerShape="GaugeShape.Image"
                                      ImageUrl="football.png"
                                      MarkerHeight="20"
                                      MarkerWidth="20"
                                      Radius="100%">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular gauge with image pointer

Multiple pointers

In addition to the default pointer, you can add n number of pointers to an axis using the CircularGaugePointers tag.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="90"
                                      MarkerShape="GaugeShape.InvertedTriangle"
                                      Radius="100%"
                                      MarkerHeight="15"
                                      MarkerWidth="15">
                </CircularGaugePointer>
                <CircularGaugePointer Value="90"
                                      Type="PointerType.RangeBar"
                                      Radius="60%"
                                      MarkerWidth="10">
                </CircularGaugePointer>
                <CircularGaugePointer Value="90"
                                      Radius="50%"
                                      PointerWidth="25"
                                      Color="#007DD1">
                    <CircularGaugeCap Radius="15">
                        <CircularGaugeCapBorder Width="5">
                        </CircularGaugeCapBorder>
                    </CircularGaugeCap>
                    <CircularGaugeNeedleTail Length="25%">
                    </CircularGaugeNeedleTail>
                </CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeAxisLabelStyle UseRangeColor="true">
            </CircularGaugeAxisLabelStyle>
            <CircularGaugeAxisMinorTicks UseRangeColor="true"></CircularGaugeAxisMinorTicks>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with multiple pointers

Pointer animation

The pointers are animated on loading the gauge using the CircularGaugePointerAnimation tag in pointer. The Enable property in animation allows you to enable or disable the animation. The Duration property specifies the duration of the animation in milliseconds.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge Height="250" Width="250">
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="70">
                    <CircularGaugePointerAnimation Enable="true" Duration="1500">
                    </CircularGaugePointerAnimation>
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular gauge with pointer animation

Dragging pointer

The pointers can be dragged over the axis values by clicking and dragging the pointer. To enable or disable the pointer drag, use the EnablePointerDrag property.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge EnablePointerDrag="true" Height="250px" Width="250px">
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="50">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with pointer drag