ASP.NET Core
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

User Interaction in ASP.NET Core Linear Gauge control

Tooltip

Linear gauge will display the details about the pointer value through tooltip, when the mouse is moved over the pointer. By default, tooltip will not be visible and you can enable the tooltip by setting enable property to true.

tagHelper
tooltip.cs
@{ 
    var tooltip = new LinearGaugeTooltipSettings
    {
        Enable = true
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" load="gaugeLoad" tooltip="tooltip"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers = [{
            value: 80
        }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Format the Tooltip

By default, tooltip will show the pointer value only. In addition to that, you can show more information in tooltip. For example, the format ${value} shows pointer value with currency symbol.

tagHelper
tooltip-format.cs
@{ 
    var tooltip = new LinearGaugeTooltipSettings
    {
        Enable = true,
        Format= "${value}"
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" load="gaugeLoad" tooltip="tooltip"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers = [{
            value: 80
        }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Tooltip Template

Any HTML elements can be displayed in the tooltip by using the template property of the tooltip. You can use the {value} as placeholders in the HTML element to display the pointer values of the corresponding axis.

tagHelper
tooltip-template.cs
@{ 
    var tooltip = new LinearGaugeTooltipSettings
    {
        Enable = true,
        Template = "<div>Pointer: 80 </div>"
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" load="gaugeLoad" tooltip="tooltip"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers = [{
            value: 80
        }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Customize the Appearance of Tooltip

  • fill - Specifies fill color for tooltip
  • border - Specifies tooltip border width and color
  • textStyle - Specifies the tooltip text style, such as color, font family, font style and font weight
tagHelper
tooltip-appearance.cs
@{ 
    var tooltip = new LinearGaugeTooltipSettings
    {
        Enable = true,
        Fill = "#e5bcbc",
        Border = new LinearGaugeBorder
        {
            Color= "#d80000",
            Width=2
        }
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" load="gaugeLoad" tooltip="tooltip"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers = [{
            value: 80
        }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}

Pointer Drag

You can drag and drop either marker or bar pointer over the desired axis value using enableDrag property in the pointer.

tagHelper
pointer-drag.cs
@using Syncfusion.EJ2;
<ejs-lineargauge id="linear" load="gaugeLoad"></ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers = [{
            value: 80,
            enableDrag : true
        }]
    }
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;


namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {

            return View();
        }
    }
}
Previous
Next