Search results

Appearance

Gauge Title

Circular gauge can be given a title by using title property, to show the information about the gauge. Title can be customized by using titleStyle property in gauge.

tagHelper
title.cs
@{ 
    var titlestyle = new
    {
        color = "#27d5ff"
    };
}
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" title="Speedometer" titleStyle="titlestyle"></ejs-circulargauge>
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();
        }
    }
}

Gauge Position

Gauge can be positioned anywhere in the container with the help of centerX and centerY property and it accepts values either in percentage or in pixels. The default value of the centerX and centerY property is 50%, which means gauge will get rendered to the centre of the container.

In Pixel

You can set the mid point of the gauge in pixel as demonstrated below,

tagHelper
position.cs
@{ 
    var linestyle = new
    {
        width = 2,
        color = "#F8F8F8"
    };
}
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" centerX="10%" centerY="50%">
    <e-circulargauge-axes>
        <e-circulargauge-axis lineStyle="linestyle" startAngle="0" endAngle="180"></e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>
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();
        }
    }
}

In Percentage

By setting the value in percentage, gauge gets its mid point with respect to its plot area. For example, when the centerX value as ‘0%’ and centerY value is ‘50%’, gauge will get positioned at the top left corner of the plot area.

tagHelper
position-percentage.cs
@{ 
    var linestyle = new
    {
        width = 2,
        color = "#F8F8F8"
    };
}
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" centerX="20" centerY="20">
    <e-circulargauge-axes>
        <e-circulargauge-axis lineStyle="linestyle" startAngle="90" endAngle="180"></e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>
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();
        }
    }
}

Area Customization

Customize the gauge background

Using background and border properties, you can change the background color and border of the circular gauge.

tagHelper
area-customization.cs
@{ 
    var border = new
    {
        width = 2,
        color = "#FF0000"
    };
    var majorticks = new
    {
        width = 1,
        color = "#8c8c8c"
    };
    var minorticks = new
    {
        width = 1,
        color = "#8c8c8c"
    };
}
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" background="skyblue" border="border" load="gaugeload">
    <e-circulargauge-axes>
        <e-circulargauge-axis radius="90%" maximum="120" startAngle="230" endAngle="130" majorTicks="majorticks" minorTicks="minorticks"></e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 0,
            end: 70,
            radius: '110%',
            strokeWidth: 10
        },
        {
            start: 70,
            end: 110,
            radius: '110%',
            strokeWidth: 10
        },
        {
            start: 110,
            end: 120,
            radius: '110%',
            strokeWidth: 10
        }]
        axis.pointers = [{
            value: 60,
            radius: '60%'
        }]
        axis.lineStyle= { width: 2 }
    }
</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.CircularGauge;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            List<CircularGaugePointer> pointers = new List<CircularGaugePointer>();
            CircularGaugePointer pointer1 = new CircularGaugePointer();
            pointer1.Value = 60;
            pointer1.Radius = "60%";
            pointers.Add(pointer1);
            ViewBag.pointers = pointers;
            List<CircularGaugeRange> ranges = new List<CircularGaugeRange>();
            CircularGaugeRange range1 = new CircularGaugeRange();
            range1.Start = 0;
            range1.End = 70;
            range1.Radius = "110%";
            range1.StartWidth = "10";
            ranges.Add(range1);
            CircularGaugeRange range2 = new CircularGaugeRange();
            range2.Start = 70;
            range2.End = 110;
            range2.Radius = "110%";
            range2.StartWidth = "10";
            ranges.Add(range2);
            CircularGaugeRange range3 = new CircularGaugeRange();
            range3.Start = 110;
            range3.End = 120;
            range3.Radius = "110%";
            range3.StartWidth = "10";
            ranges.Add(range3);
            ViewBag.ranges = ranges;
            return View();
        }
    }
}

Gauge Margin

You can set margin for gauge from its container through margin property.

tagHelper
margin.cs
@{ 
    var border = new
    {
        width = 2,
        color = "#FF0000"
    };
    var majorticks = new
    {
        width = 1,
        color = "#8c8c8c"
    };
    var minorticks = new
    {
        width = 1,
        color = "#8c8c8c"
    };
    var margin = new {
         left= 40,
         right= 40,
         top= 40,
         bottom= 40
    };
}
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular" background="skyblue" border="border" margin="margin" load="gaugeload">
    <e-circulargauge-axes>
        <e-circulargauge-axis radius="90%" maximum="120" startAngle="230" endAngle="130" majorTicks="majorticks" minorTicks="minorticks"></e-circulargauge-axis>
    </e-circulargauge-axes>
</ejs-circulargauge>
<script>
    window.gaugeload = function (args) {
        var axis = args.gauge.axes[0];
        axis.ranges = [{
            start: 0,
            end: 70,
            radius: '110%',
            strokeWidth: 10
        },
        {
            start: 70,
            end: 110,
            radius: '110%',
            strokeWidth: 10
        },
        {
            start: 110,
            end: 120,
            radius: '110%',
            strokeWidth: 10
        }]
        axis.pointers = [{
            value: 60,
            radius: '60%'
        }]
        axis.lineStyle= { width: 2 }
    }
</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.CircularGauge;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            List<CircularGaugePointer> pointers = new List<CircularGaugePointer>();
            CircularGaugePointer pointer1 = new CircularGaugePointer();
            pointer1.Value = 60;
            pointer1.Radius = "60%";
            pointers.Add(pointer1);
            ViewBag.pointers = pointers;
            List<CircularGaugeRange> ranges = new List<CircularGaugeRange>();
            CircularGaugeRange range1 = new CircularGaugeRange();
            range1.Start = 0;
            range1.End = 70;
            range1.Radius = "110%";
            range1.StartWidth = "10";
            ranges.Add(range1);
            CircularGaugeRange range2 = new CircularGaugeRange();
            range2.Start = 70;
            range2.End = 110;
            range2.Radius = "110%";
            range2.StartWidth = "10";
            ranges.Add(range2);
            CircularGaugeRange range3 = new CircularGaugeRange();
            range3.Start = 110;
            range3.End = 120;
            range3.Radius = "110%";
            range3.StartWidth = "10";
            ranges.Add(range3);
            ViewBag.ranges = ranges;
            return View();
        }
    }
}