Search results

Axes in ASP.NET Core Linear Gauge control

14 Apr 2021 / 3 minutes to read

Axes is a collection of linear axis which can be used to indicate the numeric values. Line, ticks, labels, ranges and pointers are the sub elements of an axis.

Line Customization

The line property of an axis provides options to customize the heightwidthcolor and offset of the axis line.

tagHelper
line-customization.cs
Copied to clipboard
@{ 
    var lineStyle = new LinearGaugeLine
    {
        Height = 150,
        Width = 2,
        Color = "#4286f4",
        Offset = 2
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear">
    <e-lineargauge-axes>
        <e-lineargauge-axis line="lineStyle"></e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>
Copied to clipboard
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();
        }
    }
}

Ticks Customization

You can customize the height, color and width of major and minor ticks, by using majorTicks and minorTicks) property. By default, interval for major ticks will be calculated automatically and also you can customize the interval for major and minor ticks using interval property.

tagHelper
ticks-customization.cs
Copied to clipboard
@{ 
    var majorticks = new LinearGaugeTick
    {
        Interval = 20
    };
    var minorticks = new LinearGaugeTick
    {
        Interval = 5,
        Color = "red"
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear">
    <e-lineargauge-axes>
        <e-lineargauge-axis minimum="20" maximum="140" majorTicks="majorticks" minorTicks="minorticks" ></e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>
Copied to clipboard
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();
        }
    }
}

Labels Customization

The labelStyle property of an axis provides options to customize the offsetformat, color and font of the axis labels.

tagHelper
labels-customization.cs
Copied to clipboard
@{ 
    var labelstyle = new LinearGaugeLabel
    {
        Format = "c"
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear">
    <e-lineargauge-axes>
        <e-lineargauge-axis labelStyle="labelstyle"></e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>
Copied to clipboard
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 display of the last label

If the last label is not in the visible range, it will be hidden by default. If you want to show the last label, set the ShowLastLabel property to true in the axes property of linear gauge.

tagHelper
showlastlabel.cs
Copied to clipboard
@{ 
    var line = new LinearGaugeLine
    {
        Color = "#9E9E9E"
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" load="gaugeLoad">
    <e-lineargauge-axes>
        <e-lineargauge-axis line="line" showLastLabel='true' maximum=115></e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>
<script>
    window.gaugeLoad = function (args) {
        var axis = args.gauge.axes[0];
        axis.pointers = [{
           value: 20,
            height: 15,
            width: 15,
            color: '#757575',
            offset: 30
        }]
    }
</script>
Copied to clipboard
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();
        }
    }
}

Label Format

Axis labels can be formatted by using the format property in labelStyle and it supports all the globalize formats.

tagHelper
label-format.cs
Copied to clipboard
@{ 
    var labelstyle = new LinearGaugeLabel
    {
        Format = "{value}°C"
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear">
    <e-lineargauge-axes>
        <e-lineargauge-axis labelStyle="labelstyle" minimum="20" maximum="140"></e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>
Copied to clipboard
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();
        }
    }
}

The following table describes the result of applying some commonly used label formats on numeric values.

Label Value Label Format property value Result Description
1000 n1 1000.0 The Number is rounded to 1 decimal place
1000 n2 1000.00 The Number is rounded to 2 decimal place
1000 n3 1000.000 The Number is rounded to 3 decimal place
0.01 p1 1.0% The Number is converted to percentage with 1 decimal place
0.01 p2 1.00% The Number is converted to percentage with 2 decimal place
0.01 p3 1.000% The Number is converted to percentage with 3 decimal place
1000 c1 $1,000.0 The Currency symbol is appended to number and number is rounded to 1 decimal place
1000 c2 $1,000.00 The Currency symbol is appended to number and number is rounded to 2 decimal place

Custom Label Format

Axis also supports custom label format using placeholder like {value}°C, in which the value represents the axis label e.g. 20°C.

tagHelper
custom-label.cs
Copied to clipboard
@using Syncfusion.EJ2;
<ejs-lineargauge id="linear" width="100%" height="50%"></ejs-lineargauge>
Copied to clipboard
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();
        }
    }
}

Orientation

By default, the Linear Gauge is rendered vertically. To change its orientation, the orientation property must be set to “Horizontal”

tagHelper
orientation.cs
Copied to clipboard
@using Syncfusion.EJ2;
<ejs-lineargauge id="linear" orientation="Horizontal">
     <e-lineargauge-axes>
        <e-lineargauge-axis minimum="20" maximum="140">
        </e-lineargauge-axis>
    </e-lineargauge-axes>    
</ejs-lineargauge>
Copied to clipboard
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();
        }
    }
}

Inverted Axes

isInversed property is used to choose the rendering of axis either bottom to top or top to bottom direction.

tagHelper
inverted-axes.cs
Copied to clipboard
@using Syncfusion.EJ2;
<ejs-lineargauge id="linear">
    <e-lineargauge-axes>
        <e-lineargauge-axis isInversed="true"></e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>
Copied to clipboard
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();
        }
    }
}

Opposed Axes

To place an axis opposite from its original position, set opposedPosition property as true in the axis.

tagHelper
opposed-axes.cs
Copied to clipboard
@using Syncfusion.EJ2;
<ejs-lineargauge id="linear">
    <e-lineargauge-axes>
        <e-lineargauge-axis opposedPosition="true"></e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>
Copied to clipboard
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();
        }
    }
}

Multiple Axes

You can render any number of axis for a linear gauge by using array of axis objects. Each axis will have its own ranges, pointers, annotations and customization options.

tagHelper
multiple-axes.cs
Copied to clipboard
@{
    var labelstyle = new LinearGaugeLabel
    {
        Format = "{value}°C"
    };
    var labelstyle_2 = new LinearGaugeLabel
    {
        Format = "{value}°F"
    };
}
@using Syncfusion.EJ2
<ejs-lineargauge id="linear">
    <e-lineargauge-axes>
        <e-lineargauge-axis labelStyle="labelstyle"></e-lineargauge-axis>
        <e-lineargauge-axis labelStyle="labelstyle_2" opposedPosition="true"></e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>
Copied to clipboard
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()
        {
            List<LinearGaugeAxis> axes = new List<LinearGaugeAxis>();
            LinearGaugeAxis axis1 = new LinearGaugeAxis();
            axis1.LabelStyle = new
            {
                format = "{value}°C"
            };
            axes.Add(axis1);
            ViewBag.axis = axes;
            LinearGaugeAxis axis2 = new LinearGaugeAxis();
            axis2.LabelStyle = new
            {
                format = "{value}°F"
            };
            axis2.OpposedPosition = true;
            axes.Add(axis2);
            ViewBag.axis = axes;
            return View();
        }
    }
}