Gauge annotations in EJ2 TypeScript Circular gauge control

29 Aug 202319 minutes to read

Annotations are used to mark a specific area of interest in the gauge with texts, shapes or images.

Content

You can place any custom element on the axis area by assigning the id of the element to content property of annotation object.

Note: To use annotation feature, we need to inject Annotations module using CircularGauge.Inject(Annotations) method.

import { CircularGauge, Annotations } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(Annotations);
let gauge: CircularGauge = new CircularGauge({
    axes: [{
        annotations: [{
            content: 'annotation-template', zIndex:'1'
        }],
        pointers:[{
            value: 50
        }]
    }]
}, '#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='annotation-template' type="text/x-template">
        <div id='templateWrap'>
            <div class='des'>
                <span>Pointer Value : 50</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>

Position

Annotation can be placed around the axis by using radius and angle property.
For example, if the angle is 90 degree and the radius is 110%, then the annotation, will be placed at the right side of the axis.

Radius of the annotation takes value either in pixel or percentage. By setting value in percentage, annotation gets its position with respect to its axis radius.

import { CircularGauge, Annotations } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(Annotations);
let gauge: CircularGauge = new CircularGauge({
    axes: [{
        annotations: [{
            content: '#annotation-template',
            angle: 90,
            radius: '150%',
            zIndex:'1'
        }],
        pointers:[{
            value: 50
        }]
    }]
}, '#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='annotation-template' type="text/x-template">
        <div id='templateWrap'>
            <div class='des'>
                <span>Pointer Value : 50</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>

Sub Gauge

As the annotation allows you to place any custom element, we can initialize a gauge to the element and can be used to place that in another gauge.

import { CircularGauge, Annotations } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(Annotations);
let gauge: CircularGauge = new CircularGauge({
    axes: [{
        minimum: 0,
        maximum: 12,
        startAngle: 0,
        endAngle: 360,
        lineStyle: { width: 0 },
        ranges: [
            {
                start: 0, end: 3,
                color: 'rgba(29,29,29,0.7)'
            }, {
                start: 3, end: 12,
                color: 'rgba(168,145,102,0.1)'
            }
        ],
        annotations: [{
            angle: 270,
            radius: '40%',
            content: '<div id="subGauge" style="width:90px;height:90px;"></div>'
        },{
            angle: 90,
            radius: '40%',
            content: '<div id="time"><span>6:30 PM</span></div>'
        }],
        labelStyle: {
            hiddenLabel: 'First'
        },
        pointers: [{
            pointerWidth: 5,
            radius: '40%',
            value: 6.5,
            color: 'rgb(29,29,29)',
            border: { width: 1, color: 'rgb(29,29,29)' },
            cap: {
                color: 'rgb(29,29,29)',
                radius: 0,
                border: {
                    width: 0.2,
                    color: 'red'
                }
            },
            needleTail: {
                length: '0%'
            }, animation: {
                enable: false
            }
        }, {
            radius: '60%',
            pointerWidth: 5,
            color: 'rgb(29,29,29)',
            border: {
                width: 1,
                color: 'rgb(29,29,29)'
            },
            value: 6,
            cap: {
                color: 'rgb(29,29,29)',
                radius: 0,
                border: {
                    width: 0.2,
                    color: 'red'
                }
            },
            needleTail: {
                length: '0%'
            }, animation: {
                enable: false
            }
        }, {
            radius: '70%',
            pointerWidth: 4,
            value: 9.8,
            color: 'rgba(168,145,102,1)',
            cap: {
                color: 'rgba(168,145,102,1)',
                radius: 4,
                border: {
                    width: 0.2,
                    color: 'rgba(168,145,102,1)'
                }
            },
            needleTail: {
                color: 'rgba(168,145,102,1)',
                length: '20%'
            }, animation: {
                enable: false,
                duration: 500
            }
        }]
    }]
}, '#element');

let gauge: CircularGauge = new CircularGauge({
    axes: [{
        minimum: 0,
        maximum: 12,
        startAngle: 0,
        endAngle: 360,
        majorTicks:{
            interval: 3
        },
        lineStyle: { width: 0 },
        ranges: [
            {
                start: 0, end: 3,
                startWidth: 5, endWidth: 5,
                color: 'rgba(29,29,29,0.7)'
            }, {
                start: 3, end: 12,
                startWidth: 5, endWidth: 5,
                color: 'rgba(168,145,102,0.1)'
            }
        ],
        labelStyle: {
            hiddenLabel: 'First',
            offset: -5
        },
        pointers: [{
            pointerWidth: 2,
            radius: '40%',
            color: 'rgb(29,29,29)',
            border: { width: 1, color: 'rgb(29,29,29)' },
            cap: {
                color: 'rgb(29,29,29)',
                radius: 2,
                border: {
                    width: 0.2,
                    color: 'red'
                }
            },
            needleTail: {
                length: '0%'
            }, animation: {
                enable: false
            }
        }]
    }]
}, '#subGauge');
<!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='annotation-template' type="text/x-template">
        <div id='templateWrap'>
            <div class='des'>
                <span>Pointer Value : 50</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>

See also