Search results

User Interaction

Tooltip

The Circular Gauge displays the pointer details through CircularGaugeTooltipSettings, when the mouse is hovered over a pointer.

Formatting the tooltip

By default, the tooltip is not visible. You can enable the tooltip by setting the Enable property to true.

You can use following properties to customize the tooltip.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="50">
                </CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeTooltipSettings Enable="true"
                                          Fill="lightgray"
                                          EnableAnimation="true"
                                          Format="Speed: {value}">
                <CircularGaugeTooltipBorder Color="blue"
                                            Width="1">
                </CircularGaugeTooltipBorder>
                <CircularGaugeTooltipTextStyle Color="blue"
                                               FontStyle="italic"
                                               FontWeight="bold"
                                               Size="15px">
                </CircularGaugeTooltipTextStyle>
            </CircularGaugeTooltipSettings>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with tooltip

Showing tooltip at mouse position

By default tooltip will be shown on the axis, you can show the tooltip at the cursor position using ShowAtMousePosition property.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="50">
                </CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeTooltipSettings Enable="true" ShowAtMousePosition="true">
            </CircularGaugeTooltipSettings>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular gauge tooltip at cursor position

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" >
    <CircularGaugeAxes >
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="50">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with pointer drag