Search results

User Interaction

Tooltip

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.

tagHelper
tooltip.cs
@{
    var tooltip = new
    {
        enable = true
    };
}
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" load="gaugeload" tooltip="tooltip"></ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers = [{
            value: 70
        }]
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Template

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

tagHelper
template.cs
@{
    var tooltip = new
    {
        enable = true,
        template = "#template-tooltip"
    };
}
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" load="gaugeload" tooltip="tooltip"></ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers = [{
            value: 70
        }]
    }
</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>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

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.

tagHelper
pointer-drag.cs
@{
    var tooltip = new
    {
        enable = true,
        template = "#template-tooltip"
    };
}
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" load="gaugeload" tooltip="tooltip"></ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
	 args.gauge.enablePointerDrag = "true";
        var axis = args.gauge.axes[0];
        axis.pointers = [{
            value: 70
        }]
    }
</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>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}