You can also set size for the gauge directly through width
and height
properties.
In Pixel
You can set the size of the gauge in pixel as demonstrated below.
@using Syncfusion.EJ2;
@Html.EJS().CircularGauge("circular").Height("350px").Width("650px").Render()
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 value in percentage, gauge gets its dimension with respect to its container. For example, when the height is ‘50%’, gauge renders to half of the container height.
@using Syncfusion.EJ2;
@Html.EJS().CircularGauge("circular").Height("50%").Width("80%").Render()
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();
}
}
}
Note: When you do not specify the size, it takes 450px
as the height and window size as its width.