Annotations are used to mark the specific area of interest in the gauge area with texts, shapes or images. You can add any number of annotations to the gauge.
By using the content
property of annotation
object, you can either specify the id of the element or specify the code to create a new element, that needs to be displayed in the gauge area.
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" annotations="ViewBag.annotations"></ejs-lineargauge>
<script id='fruits' type="text/x-template">
<div id='apple'>
<img src="/ej/styles/images/lineargauge/apple.png" />
</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;
using Syncfusion.EJ2.Charts;
using Syncfusion.EJ2.LinearGauge;
namespace EJ2_Core_Application.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
List<LinearGaugeAnnotation> annotations = new List<LinearGaugeAnnotation>();
LinearGaugeAnnotation annotation1 = new LinearGaugeAnnotation();
annotation1.Content = "#fruits";
annotation1.X = 100;
annotation1.Y = 100;
annotations.Add(annotation1);
ViewBag.annotations = annotations;
return View();
}
}
}
You can customize the annotation using following properties.
zIndex
- When annotation overlaps with another element, you can use this property to bring annotation to the front or back.horizontalAlignment
- To move annotation horizontally. Possible values are “Center”, “Far”, “Near”, “None”verticalAlignment
- To move annotation vertically. Possible values are “Center”, “Far”, “Near”, “None”x
and y
- To move annotation to the specified location.Changing the z-order
You can change the z-order of the annotation element by using the zIndex
property.
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" annotations="ViewBag.annotations"></ejs-lineargauge>
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<LinearGaugeAnnotation> annotations = new List<LinearGaugeAnnotation>();
LinearGaugeAnnotation annotation1 = new LinearGaugeAnnotation();
annotation1.Content = "<div id='first'><h1>Gauge</h1></div>";
annotation1.ZIndex = "-1";
annotation1.HorizontalAlignment = Placement.Center;
annotation1.VerticalAlignment = Placement.Center;
annotations.Add(annotation1);
ViewBag.annotations = annotations;
return View();
}
}
}
Positioning the Annotation
You can place the annotation anywhere in gauge area by specifying pixel values to the x
and y
properties.
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" annotations="ViewBag.annotations"></ejs-lineargauge>
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<LinearGaugeAnnotation> annotations = new List<LinearGaugeAnnotation>();
LinearGaugeAnnotation annotation1 = new LinearGaugeAnnotation();
annotation1.Content = "<div id='first'><h1>Gauge</h1></div>";
annotation1.X = 100;
annotation1.Y = 100;
annotations.Add(annotation1);
ViewBag.annotations = annotations;
return View();
}
}
}
Alignment of Annotation
You can align the annotation using horizontalAlignment
and verticalAlignment
properties.
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" annotations="ViewBag.annotations"></ejs-lineargauge>
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<LinearGaugeAnnotation> annotations = new List<LinearGaugeAnnotation>();
LinearGaugeAnnotation annotation1 = new LinearGaugeAnnotation();
annotation1.Content = "<div id='first'><h1>Gauge</h1></div>";
annotation1.VerticalAlignment = Placement.Center;
annotation1.HorizontalAlignment = Placement.Center;
annotations.Add(annotation1);
ViewBag.annotations = annotations;
return View();
}
}
}
You can add multiple annotations to the gauge as demonstrated below.
@using Syncfusion.EJ2
<ejs-lineargauge id="linear" annotations="ViewBag.annotations"></ejs-lineargauge>
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<LinearGaugeAnnotation> annotations = new List<LinearGaugeAnnotation>();
LinearGaugeAnnotation annotation1 = new LinearGaugeAnnotation();
annotation1.Content = "<div id='first'><h1 style='color: red;'>Speed</h1></div>";
annotation1.VerticalAlignment = Placement.Near;
annotation1.HorizontalAlignment = Placement.Center;
annotation1.X = 100;
annotation1.Y = 150;
annotations.Add(annotation1);
LinearGaugeAnnotation annotation2 = new LinearGaugeAnnotation();
annotation2.Content= "<div id='first'><h1 style='color: blue;'>Meter</h1></div>";
annotation2.VerticalAlignment = Placement.Center;
annotation2.HorizontalAlignment = Placement.Center;
annotation2.X = -100;
annotation2.Y = -100;
annotations.Add(annotation2);
ViewBag.annotations = annotations;
return View();
}
}
}