Gauge user interaction in EJ2 TypeScript Circular gauge control

29 Aug 202315 minutes to read

Circular gauge will displays the pointer details through tooltip,when the mouse is moved over the pointer.

Enable Tooltip

By default, tooltip is not visible. Enable the tooltip by setting enable property to true and injecting GaugeTooltip module using CircularGauge.Inject(GaugeTooltip) method.

index.ts
index.html
import { CircularGauge, GaugeTooltip } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(GaugeTooltip);
let gauge: CircularGauge = new CircularGauge({
    // Title for circular gauge.
    tooltip: {
        enable: true
    },
    axes:[{
        pointers:[{
            value: 70
        }],
    }]
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script id='template-tooltip' type="text/x-template">
        <div id='templateWrap'>
            <div class='des' style="float: right; padding-left:10px; line-height:30px;">
                <span>Pointer &nbsp;&nbsp;:&nbsp; ${Math.round(pointers[0].value)}</span>
            </div>
        </div>
    </script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Template

Any HTML elements can be displayed in the tooltip by using the template property of the tooltip.

index.ts
index.html
import { CircularGauge, GaugeTooltip } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(GaugeTooltip);
let gauge: CircularGauge = new CircularGauge({
    // Title for circular gauge.
    tooltip: {
        enable: true,
        template: '${value}'
    },
    axes:[{
        pointers:[{
            value: 70
        }]
    }]
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script id='template-tooltip' type="text/x-template">
        <div id='templateWrap'>
            <div class='des' style="float: right; padding-left:10px; line-height:30px;">
                <span>Pointer &nbsp;&nbsp;:&nbsp; ${Math.round(pointers[0].value)}</span>
            </div>
        </div>
    </script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Circular gauge displays the information about the ranges through tooltip when hovering the mouse over the ranges. You can enable this feature by setting the type property of tooltip to ‘Range’ in the array collection.

Range tooltip customization

To customize the range tooltip, use the rangeSettings property in tooltip. The following options are available to customize the range tooltip:

fill - Specifies the range tooltip fill color.
textStyle - Specifies the range tooltip text style.
format - Specifies the range content format.
template - Specifies the custom template for tooltip.
enableAnimation - Animates as it moves from one point to another.
border - Specifies the tooltip border.
showMouseAtPosition - Displays the position of the tooltip on the cursor position.

Circular gauge displays the information about the annotations through tooltip when hovering the mouse over the annotation. You can enable this feature by setting the type property of tooltip to ‘Annotation’ in the array collection.

Annotation tooltip customization

To customize the annotation tooltip, use the annotationSettings property in tooltip. The following options are available to customize the annotation tooltip:

fill - Specifies the annotation tooltip fill color.
textStyle - Specifies the annotation tooltip text style.
format - Specifies the annotation content format.
template - Specifies the tooltip content with custom template.
enableAnimation - Animates as it moves from one point to another.
border - Specifies the tooltip border.

The following code example shows the tooltip for the ranges and annotation.

index.ts
index.html
import { CircularGauge, GaugeTooltip, Annotations } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(GaugeTooltip, Annotations);
let gauge: CircularGauge = new CircularGauge({
    axes: [{
        radius: '90%',
        minimum: 0,
        maximum: 120,
        startAngle: 240,
        endAngle: 120,
        annotations: [{
           content: 'CircularGauge', zIndex:'1', angle: 180
        }],
        lineStyle: { width: 0 },
        majorTicks: { color: 'white', offset: -5, height: 12 },
        minorTicks: { width: 0 },
        labelStyle: { useRangeColor: true, font: { color: '#424242', size: '13px', fontFamily: 'Roboto' } },
        pointers: [{
            value: 70,
            radius: '60%',
            color: '#33BCBD',
            cap: { radius: 10, border: { color: '#33BCBD', width: 5 } },
            animation: { enable: false }
        }],
        ranges: [{
            start: 0,
            end: 50,
            startWidth: 10, endWidth: 10,
            radius: '102%',
            color: '#3A5DC8',
        }, {
            start: 50,
            end: 120,
            radius: '102%',
            startWidth: 10, endWidth: 10,
            color: '#33BCBD',
        }]
    }],
    tooltip: {
        type:['Pointer', 'Range', 'Annotation'],
        enable: true,
        enableAnimation: false,
        annotationSettings: { template:'<div>CircularGauge</div>' },
        rangeSettings: { fill:'red' }
    },
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script id='template-tooltip' type="text/x-template">
        <div id='templateWrap'>
            <div class='des' style="float: right; padding-left:10px; line-height:30px;">
                <span>Pointer &nbsp;&nbsp;:&nbsp; ${Math.round(pointers[0].value)}</span>
            </div>
        </div>
    </script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Pointer Drag

Pointers can be dragged over the axis value. This can be achieved by clicking and dragging the pointer. To enable or disable the pointer drag, you can use
enablePointerDrag property.

index.ts
index.html
import { CircularGauge, GaugeTooltip } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(GaugeTooltip);
let gauge: CircularGauge = new CircularGauge({
    enablePointerDrag: true,
    tooltip: {
        enable: true
    },
    axes:[{
        pointers:[{
            value: 70
        }]
    }]
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script id='template-tooltip' type="text/x-template">
        <div id='templateWrap'>
            <div class='des' style="float: right; padding-left:10px; line-height:30px;">
                <span>Pointer &nbsp;&nbsp;:&nbsp; ${Math.round(pointers[0].value)}</span>
            </div>
        </div>
    </script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Gauge user interaction in EJ2 TypeScript Circular gauge control

Tooltip for pointers

Tooltip for ranges

Tooltip for annotation

Pointer Drag