diff --git a/ej2-asp-core-mvc/circular-gauge/gauge-animation.md b/ej2-asp-core-mvc/circular-gauge/gauge-animation.md new file mode 100644 index 0000000000..c1a0d4e8fc --- /dev/null +++ b/ej2-asp-core-mvc/circular-gauge/gauge-animation.md @@ -0,0 +1,63 @@ +--- +layout: post +title: Animation in ##Platform_Name## Circular Gauge component | Syncfusion +description: Learn here all about animation in the Syncfusion ##Platform_Name## Circular Gauge component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Circular Gauge +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Animation in Circular Gauge component + +{% if page.publishingplatform == "aspnet-core" %} + +All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.CircularGauge.CircularGauge.html#Syncfusion_EJ2_CircularGauge_CircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. + +1. The axis line will be animated in the rendering direction (clockwise or anticlockwise). +2. Each tick line and label will then be animated. +3. If available, ranges will be animated. +4. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetcore/documentation/circular-gauge/gauge-pointers#animation). +5. If available, annotations will be animated. + +The animation of the Circular Gauge is demonstrated in the following example. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/circulargauge/gauge-animation/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Animation.cs" %} +{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %} +{% endhighlight %} +{% endtabs %} + +![Circular Gauge with Animation](../circular-gauge/images/animation.gif) + +> Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetcore/documentation/circular-gauge/gauge-pointers#animation) to enable only pointer animation. + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.CircularGauge.CircularGauge.html#Syncfusion_EJ2_CircularGauge_CircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `AnimationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `AnimationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. + +1. The axis line will be animated in the rendering direction (clockwise or anticlockwise). +2. Each tick line and label will then be animated. +3. If available, ranges will be animated. +4. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/gauge-pointers#animation). +5. If available, annotations will be animated. + +The animation of the Circular Gauge is demonstrated in the following example. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/circulargauge/gauge-animation/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Animation.cs" %} +{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %} +{% endhighlight %} +{% endtabs %} + +![Circular Gauge with Animation](../circular-gauge/images/animation.gif) + +> Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/gauge-pointers#animation) to enable only pointer animation. + +{% endif %} diff --git a/ej2-asp-core-mvc/circular-gauge/images/animation.gif b/ej2-asp-core-mvc/circular-gauge/images/animation.gif new file mode 100644 index 0000000000..a39eb9276f Binary files /dev/null and b/ej2-asp-core-mvc/circular-gauge/images/animation.gif differ diff --git a/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/gauge-animation.cs b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/gauge-animation.cs new file mode 100644 index 0000000000..13b690a185 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/gauge-animation.cs @@ -0,0 +1,19 @@ +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(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/razor b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/razor new file mode 100644 index 0000000000..ed1a6ec9ed --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/razor @@ -0,0 +1,26 @@ +@using Syncfusion.EJ2; +@using Syncfusion.EJ2.CircularGauge; + +@Html.EJS().CircularGauge("container").AnimationDuration(2000).Load("gaugeLoad").Background("transparent").Axes(axes => axes + .Radius("80%").StartAngle(230).EndAngle(130).LabelStyle(labelStyle => labelStyle.Position(Position.Inside).Font(font => font.FontFamily("inherit")).Offset(-1)) + .Annotations(annotation => annotation.Content("
60
").ZIndex("1").Angle(165).Radius("35%").Add()) + .Pointers(pointer => pointer.Value(60).Radius("60%").PointerWidth(7).Color("#c06c84").Animation(animation => animation.Enable(true).Duration(2000)).Cap(cap => cap.Radius(8).Color("#c06c84").Border(border => border.Width(0))).NeedleTail(needleTail => needleTail.Length("0%")).Add()) + .Ranges(range => range.Start(0).End(30).StartWidth(22).EndWidth(22).Color("#E63B86").Radius("60%").Add()) + .LineStyle(lineStyle => lineStyle.Width(8).Color("#E0E0E0")) + .MinorTicks(minorTick => minorTick.Offset(5)).MajorTicks(majorTick => majorTick.Offset(5)).Add()).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper new file mode 100644 index 0000000000..7a8dc69ac3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper @@ -0,0 +1,49 @@ +@using Syncfusion.EJ2; + +@{ + var labelFont = new Syncfusion.EJ2.CircularGauge.CircularGaugeFont { FontFamily = "inherit" }; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/animation/animation.cs b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/animation.cs new file mode 100644 index 0000000000..48a99dcc60 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/animation.cs @@ -0,0 +1,22 @@ +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(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/animation/razor b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/razor new file mode 100644 index 0000000000..6a8632f24e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/razor @@ -0,0 +1,15 @@ +@using Syncfusion.EJ2.LinearGauge; + +@Html.EJS().LinearGauge("container").Load("gaugeLoad").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Annotations( + annotation => annotation.AxisIndex(0).AxisValue(10).X(10).Y(-70).ZIndex("1").Content("
10 MPH
").Add()).Axes(axes => + axes.Pointers(pointer => pointer.Width(15).Height(15).Value(10).Offset("-40").Placement(Syncfusion.EJ2.LinearGauge.Placement.Near).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Triangle).Add()) + .MajorTicks(majorTick => majorTick.Interval(10).Height(20).Color("#9E9E9E")) + .MinorTicks(minorTick => minorTick.Interval(2).Height(10).Color("#9E9E9E")) + .Ranges(range => range.Start(0).End(50).StartWidth(10).EndWidth(10).Color("#F45656").Offset(35).Add()) + .LabelStyle(labelStyle => labelStyle.Offset(48).Font(font => font.FontFamily("inherit"))).Add()).Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/animation/tagHelper b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/tagHelper new file mode 100644 index 0000000000..2d6c5cccae --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/animation/tagHelper @@ -0,0 +1,34 @@ +@using Syncfusion.EJ2.LinearGauge + +@{ + var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" }; +} + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs new file mode 100644 index 0000000000..48a99dcc60 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs @@ -0,0 +1,22 @@ +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(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/razor b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/razor new file mode 100644 index 0000000000..1b4920425b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/razor @@ -0,0 +1,10 @@ +@using Syncfusion.EJ2.LinearGauge; + +@Html.EJS().LinearGauge("gauge").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(axes => axes.Minimum(0).Maximum(100) + .LabelStyle(labelStyle => labelStyle.Font(font => font.FontFamily("inherit")).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)) + .Pointers(pointer => + { + pointer.Value(60).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Image).Width(40).Height(40).ImageUrl("https://ej2.syncfusion.com/aspnetmvc/Content/LinearGauge/step-count.png").Offset("-27").Add(); + }) + .MajorTicks(majorTick => majorTick.Interval(20).Height(7).Width(1).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).MinorTicks(minorTick => minorTick.Height(3).Width(1).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).Add()).Render() + diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/tagHelper b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/tagHelper new file mode 100644 index 0000000000..885b6f444b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-image/tagHelper @@ -0,0 +1,20 @@ +@using Syncfusion.EJ2.LinearGauge + +@{ + var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" }; +} + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs new file mode 100644 index 0000000000..48a99dcc60 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs @@ -0,0 +1,22 @@ +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(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/razor b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/razor new file mode 100644 index 0000000000..8d79d83e67 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/razor @@ -0,0 +1,21 @@ +@using Syncfusion.EJ2.LinearGauge; + +@{ + var textStyle = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { Size = "18px", FontWeight = "bold" }; +} + +@Html.EJS().LinearGauge("gauge").Orientation(Syncfusion.EJ2.LinearGauge.Orientation.Horizontal).Axes(axes => axes.Minimum(0).Maximum(100) + .Line(line => line.Width(0)).LabelStyle(labelStyle => labelStyle.Font(font => font.FontFamily("inherit")).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)) + .Pointers(pointer => + { + pointer.Value(13).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("Low").Color("Black").Offset("-35").TextStyle(textStyle).Add(); + pointer.Value(48).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("Moderate").Color("Black").Offset("-35").TextStyle(textStyle).Add(); + pointer.Value(83).MarkerType(Syncfusion.EJ2.LinearGauge.MarkerType.Text).Text("High").Color("Black").Offset("-35").TextStyle(textStyle).Add(); + }) + .Ranges(range => + { + range.Start(0).End(30).StartWidth(50).EndWidth(50).Color("#FB7D55").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add(); + range.Start(30).End(65).StartWidth(50).EndWidth(50).Color("#ECC85B").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add(); + range.Start(65).End(100).StartWidth(50).EndWidth(50).Color("#6FC78A").Position(Syncfusion.EJ2.LinearGauge.Position.Outside).Add(); + }).MajorTicks(majorTick => majorTick.Interval(20).Height(7).Width(1).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).MinorTicks(minorTick => minorTick.Height(3).Interval(10).Position(Syncfusion.EJ2.LinearGauge.Position.Outside)).Add()).Render() + diff --git a/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/tagHelper b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/tagHelper new file mode 100644 index 0000000000..3987770725 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/lineargauge/pointers/marker-pointer-text/tagHelper @@ -0,0 +1,27 @@ +@using Syncfusion.EJ2.LinearGauge + +@{ + var labelFont = new Syncfusion.EJ2.LinearGauge.LinearGaugeFont { FontFamily = "inherit" }; +} + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs new file mode 100644 index 0000000000..f30278336b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs @@ -0,0 +1,35 @@ +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() + { + ViewBag.world_map = GetWorldMap(); + ViewBag.worldMap = GetMap(); + return View(); + } + + // To access the data in Core + public object GetWorldMap() + { + string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js"); + return JsonConvert.DeserializeObject(allText); + } + + // To access the data in MVC + public object GetMap() + { + string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json")); + return JsonConvert.DeserializeObject(allText, typeof(object)); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/razor b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/razor new file mode 100644 index 0000000000..2b4c94889b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/razor @@ -0,0 +1,50 @@ +@{ + var data = new [] + { + new { latitude= 22.572646, longitude= 88.363895 }, + new { latitude= 25.0700428, longitude= 67.2847875 } +}; +} + + +< button id = "button" > GetMinMaxLatitudeLongitude +

+ +@(Html.EJS().Maps("maps").Width("450px").ZoomSettings(zoom => zoom.ZoomFactor(7).Enable(true)).CenterPosition(center => center.Latitude(21.815447).Longitude(80.1932)).Layers(layers => { + layers.MarkerSettings(marker => { + marker.Visible(true).AnimationDuration(1500).Shape(MarkerType.Circle).DataSource(data).Height(25).Width(25).Add(); + }).ShapeData(ViewBag.worldMap).Add(); +}).Render()) + + diff --git a/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/tagHelper new file mode 100644 index 0000000000..c97039a35d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/methods/getMinMaxLatitudeLongitude/tagHelper @@ -0,0 +1,60 @@ +@using Syncfusion.EJ2.Maps + +@{ +var data = new[] +{ +new { latitude= 22.572646, longitude= 88.363895 }, +new { latitude= 25.0700428, longitude= 67.2847875} +}; + +} + + + +

+ + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs @@ -0,0 +1,29 @@ +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + ViewBag.worldmap = GetWorldMap(); + ViewBag.world_map = GetMap(); + return View(); + } + + // To access the data in Core + public object GetWorldMap() + { + string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js"); + return JsonConvert.DeserializeObject(allText); + } + + // To access the data in MVC + public object GetMap() + { + string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json")); + return JsonConvert.DeserializeObject(allText, typeof(object)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/razor new file mode 100644 index 0000000000..4ff2dab42a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/razor @@ -0,0 +1,74 @@ +@using Syncfusion.EJ2.Maps; + +@{ + var data = new[] + { + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 }, + new { longitude = -1.6479633699113947, latitude = 33.58989612266137 }, + new { longitude = -1.4201220366858252, latitude = 32.819439646045254 }, + new { longitude = -1.197974596225663, latitude = 32.26940895444655 }, + new { longitude = -2.891112397949655, latitude = 32.10303058820031 }, + new { longitude = -3.8246984550501963, latitude = 31.34551662687602 }, + new { longitude = -3.720166273688733, latitude = 30.758086682848685 }, + new { longitude = -5.6571886081189575, latitude = 29.613582597203006 }, + new { longitude = -7.423353242214745, latitude = 29.44328441403087 }, + new { longitude = -8.6048931685323, latitude = 28.761444633616776 }, + new { longitude = -8.695726975465703, latitude = 27.353491085576195 }, + new { longitude = 3.837867279970908, latitude = 19.15916564839422 }, + new { longitude = 6.0705408799045415, latitude = 19.48749097192868 }, + new { longitude = 12.055736352807713, latitude = 23.694596786078293 }, + new { longitude = 11.272522332402986, latitude = 24.289329186946034 }, + new { longitude = 10.30872578261932, latitude = 24.65419958524693 }, + new { longitude = 9.910236690050027, latitude = 25.48943950947175 }, + new { longitude = 9.432639882414293, latitude = 26.398372489836902 }, + new { longitude = 9.898266456582292, latitude = 26.73489453809293 }, + new { longitude = 9.560243026853641, latitude = 30.31040379467153 }, + new { longitude = 8.943853847283322, latitude = 32.350324876652195 }, + new { longitude = 7.57004059025715, latitude = 33.75071049019398 }, + new { longitude = 8.0906322609153, latitude = 34.69043151009983 }, + new { longitude = 8.363285449347273, latitude = 35.38654406371319 }, + new { longitude = 8.26139549449448, latitude = 36.44751078733985 }, + new { longitude = 8.61100824823302, latitude = 36.881913362940196 }, + new { longitude = 7.4216488925819135, latitude = 37.021408008916254 }, + new { longitude = 6.461182254165351, latitude = 36.99092409199429 }, + new { longitude = 5.297178918070159, latitude = 36.69985479014656 }, + new { longitude = 3.6718056161224695, latitude = 36.86470546831693 }, + new { longitude = 1.2050052555659931, latitude = 36.57658056301722 }, + new { longitude = -0.26968570003779746, latitude = 35.806903541813625 }, + new { longitude = -0.995191786435754, latitude = 35.58466127904214 }, + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 } + }; + + + var polygons = new List + { + new Syncfusion.EJ2.Maps.MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; + + var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings + { + Enable = true, Fill = "yellow", Opacity = 0.4, + Border = new MapsBorder + { + Color ="blue", + Opacity = 0.6, + Width=4 + } + }; + + var selection = new Syncfusion.EJ2.Maps.MapsSelectionSettings + { + Enable = true, + Fill = "red", + EnableMultiSelect = false, + Opacity = 0.7, + Border = new MapsBorder + { + Color = "green", + Opacity = 0.7, + Width = 2 + } + }; +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons).HighlightSettings(highlight).SelectionSettings(selection); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/tagHelper new file mode 100644 index 0000000000..0ed75a4fe8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-highlight/tagHelper @@ -0,0 +1,82 @@ +@using Syncfusion.EJ2.Maps + +@{ + var data = new[] + { + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 }, + new { longitude = -1.6479633699113947, latitude = 33.58989612266137 }, + new { longitude = -1.4201220366858252, latitude = 32.819439646045254 }, + new { longitude = -1.197974596225663, latitude = 32.26940895444655 }, + new { longitude = -2.891112397949655, latitude = 32.10303058820031 }, + new { longitude = -3.8246984550501963, latitude = 31.34551662687602 }, + new { longitude = -3.720166273688733, latitude = 30.758086682848685 }, + new { longitude = -5.6571886081189575, latitude = 29.613582597203006 }, + new { longitude = -7.423353242214745, latitude = 29.44328441403087 }, + new { longitude = -8.6048931685323, latitude = 28.761444633616776 }, + new { longitude = -8.695726975465703, latitude = 27.353491085576195 }, + new { longitude = 3.837867279970908, latitude = 19.15916564839422 }, + new { longitude = 6.0705408799045415, latitude = 19.48749097192868 }, + new { longitude = 12.055736352807713, latitude = 23.694596786078293 }, + new { longitude = 11.272522332402986, latitude = 24.289329186946034 }, + new { longitude = 10.30872578261932, latitude = 24.65419958524693 }, + new { longitude = 9.910236690050027, latitude = 25.48943950947175 }, + new { longitude = 9.432639882414293, latitude = 26.398372489836902 }, + new { longitude = 9.898266456582292, latitude = 26.73489453809293 }, + new { longitude = 9.560243026853641, latitude = 30.31040379467153 }, + new { longitude = 8.943853847283322, latitude = 32.350324876652195 }, + new { longitude = 7.57004059025715, latitude = 33.75071049019398 }, + new { longitude = 8.0906322609153, latitude = 34.69043151009983 }, + new { longitude = 8.363285449347273, latitude = 35.38654406371319 }, + new { longitude = 8.26139549449448, latitude = 36.44751078733985 }, + new { longitude = 8.61100824823302, latitude = 36.881913362940196 }, + new { longitude = 7.4216488925819135, latitude = 37.021408008916254 }, + new { longitude = 6.461182254165351, latitude = 36.99092409199429 }, + new { longitude = 5.297178918070159, latitude = 36.69985479014656 }, + new { longitude = 3.6718056161224695, latitude = 36.86470546831693 }, + new { longitude = 1.2050052555659931, latitude = 36.57658056301722 }, + new { longitude = -0.26968570003779746, latitude = 35.806903541813625 }, + new { longitude = -0.995191786435754, latitude = 35.58466127904214 }, + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 } + }; + + + var polygons = new List + { + new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; + + var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings + { + Enable = true, Fill = "yellow", Opacity = 0.4, + Border = new MapsBorder + { + Color ="blue", + Opacity = 0.6, + Width=4 + } + }; + + var selection = new Syncfusion.EJ2.Maps.MapsSelectionSettings + { + Enable = true, + Fill = "red", + EnableMultiSelect = false, + Opacity = 0.7, + Border = new MapsBorder + { + Color = "green", + Opacity = 0.7, + Width = 2 + } + }; + +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs @@ -0,0 +1,29 @@ +using Newtonsoft.Json; +using Syncfusion.EJ2.Charts; + +namespace EJ2_Core_Application.Controllers +{ + public class HomeController : Controller + { + public IActionResult Index() + { + ViewBag.worldmap = GetWorldMap(); + ViewBag.world_map = GetMap(); + return View(); + } + + // To access the data in Core + public object GetWorldMap() + { + string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js"); + return JsonConvert.DeserializeObject(allText); + } + + // To access the data in MVC + public object GetMap() + { + string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json")); + return JsonConvert.DeserializeObject(allText, typeof(object)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/razor new file mode 100644 index 0000000000..c411172799 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/razor @@ -0,0 +1,74 @@ +@using Syncfusion.EJ2.Maps; + +@{ + var data = new[] + { + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 }, + new { longitude = -1.6479633699113947, latitude = 33.58989612266137 }, + new { longitude = -1.4201220366858252, latitude = 32.819439646045254 }, + new { longitude = -1.197974596225663, latitude = 32.26940895444655 }, + new { longitude = -2.891112397949655, latitude = 32.10303058820031 }, + new { longitude = -3.8246984550501963, latitude = 31.34551662687602 }, + new { longitude = -3.720166273688733, latitude = 30.758086682848685 }, + new { longitude = -5.6571886081189575, latitude = 29.613582597203006 }, + new { longitude = -7.423353242214745, latitude = 29.44328441403087 }, + new { longitude = -8.6048931685323, latitude = 28.761444633616776 }, + new { longitude = -8.695726975465703, latitude = 27.353491085576195 }, + new { longitude = 3.837867279970908, latitude = 19.15916564839422 }, + new { longitude = 6.0705408799045415, latitude = 19.48749097192868 }, + new { longitude = 12.055736352807713, latitude = 23.694596786078293 }, + new { longitude = 11.272522332402986, latitude = 24.289329186946034 }, + new { longitude = 10.30872578261932, latitude = 24.65419958524693 }, + new { longitude = 9.910236690050027, latitude = 25.48943950947175 }, + new { longitude = 9.432639882414293, latitude = 26.398372489836902 }, + new { longitude = 9.898266456582292, latitude = 26.73489453809293 }, + new { longitude = 9.560243026853641, latitude = 30.31040379467153 }, + new { longitude = 8.943853847283322, latitude = 32.350324876652195 }, + new { longitude = 7.57004059025715, latitude = 33.75071049019398 }, + new { longitude = 8.0906322609153, latitude = 34.69043151009983 }, + new { longitude = 8.363285449347273, latitude = 35.38654406371319 }, + new { longitude = 8.26139549449448, latitude = 36.44751078733985 }, + new { longitude = 8.61100824823302, latitude = 36.881913362940196 }, + new { longitude = 7.4216488925819135, latitude = 37.021408008916254 }, + new { longitude = 6.461182254165351, latitude = 36.99092409199429 }, + new { longitude = 5.297178918070159, latitude = 36.69985479014656 }, + new { longitude = 3.6718056161224695, latitude = 36.86470546831693 }, + new { longitude = 1.2050052555659931, latitude = 36.57658056301722 }, + new { longitude = -0.26968570003779746, latitude = 35.806903541813625 }, + new { longitude = -0.995191786435754, latitude = 35.58466127904214 }, + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 } + }; + + + var polygons = new List + { + new Syncfusion.EJ2.Maps.MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; + + var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings + { + Enable = true, Fill = "blue", Opacity = 0.7, + Border = new MapsBorder + { + Color ="green", + Opacity = 0.7, + Width=2 + } + }; + + var selection = new Syncfusion.EJ2.Maps.MapsSelectionSettings + { + Enable = true, + Fill = "violet", + EnableMultiSelect = false, + Opacity = 0.8, + Border = new MapsBorder + { + Color = "cyan", + Opacity = 1, + Width = 7 + } + }; +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons).HighlightSettings(highlight).SelectionSettings(selection); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/tagHelper new file mode 100644 index 0000000000..84e3296b3a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-selection/tagHelper @@ -0,0 +1,82 @@ +@using Syncfusion.EJ2.Maps + +@{ + var data = new[] + { + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 }, + new { longitude = -1.6479633699113947, latitude = 33.58989612266137 }, + new { longitude = -1.4201220366858252, latitude = 32.819439646045254 }, + new { longitude = -1.197974596225663, latitude = 32.26940895444655 }, + new { longitude = -2.891112397949655, latitude = 32.10303058820031 }, + new { longitude = -3.8246984550501963, latitude = 31.34551662687602 }, + new { longitude = -3.720166273688733, latitude = 30.758086682848685 }, + new { longitude = -5.6571886081189575, latitude = 29.613582597203006 }, + new { longitude = -7.423353242214745, latitude = 29.44328441403087 }, + new { longitude = -8.6048931685323, latitude = 28.761444633616776 }, + new { longitude = -8.695726975465703, latitude = 27.353491085576195 }, + new { longitude = 3.837867279970908, latitude = 19.15916564839422 }, + new { longitude = 6.0705408799045415, latitude = 19.48749097192868 }, + new { longitude = 12.055736352807713, latitude = 23.694596786078293 }, + new { longitude = 11.272522332402986, latitude = 24.289329186946034 }, + new { longitude = 10.30872578261932, latitude = 24.65419958524693 }, + new { longitude = 9.910236690050027, latitude = 25.48943950947175 }, + new { longitude = 9.432639882414293, latitude = 26.398372489836902 }, + new { longitude = 9.898266456582292, latitude = 26.73489453809293 }, + new { longitude = 9.560243026853641, latitude = 30.31040379467153 }, + new { longitude = 8.943853847283322, latitude = 32.350324876652195 }, + new { longitude = 7.57004059025715, latitude = 33.75071049019398 }, + new { longitude = 8.0906322609153, latitude = 34.69043151009983 }, + new { longitude = 8.363285449347273, latitude = 35.38654406371319 }, + new { longitude = 8.26139549449448, latitude = 36.44751078733985 }, + new { longitude = 8.61100824823302, latitude = 36.881913362940196 }, + new { longitude = 7.4216488925819135, latitude = 37.021408008916254 }, + new { longitude = 6.461182254165351, latitude = 36.99092409199429 }, + new { longitude = 5.297178918070159, latitude = 36.69985479014656 }, + new { longitude = 3.6718056161224695, latitude = 36.86470546831693 }, + new { longitude = 1.2050052555659931, latitude = 36.57658056301722 }, + new { longitude = -0.26968570003779746, latitude = 35.806903541813625 }, + new { longitude = -0.995191786435754, latitude = 35.58466127904214 }, + new { longitude = -1.8920678947185365, latitude = 35.06195799239681 } + }; + + + var polygons = new List + { + new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; + + var highlight = new Syncfusion.EJ2.Maps.MapsHighlightSettings + { + Enable = true, Fill = "blue", Opacity = 0.7, + Border = new MapsBorder + { + Color ="green", + Opacity = 0.7, + Width=2 + } + }; + + var selection = new Syncfusion.EJ2.Maps.MapsSelectionSettings + { + Enable = true, + Fill = "violet", + EnableMultiSelect = false, + Opacity = 0.8, + Border = new MapsBorder + { + Color = "cyan", + Opacity = 1, + Width = 7 + } + }; + +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/animation.md b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/animation.md new file mode 100644 index 0000000000..98acfa8cf5 --- /dev/null +++ b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/animation.md @@ -0,0 +1,36 @@ +--- +layout: post +title: Animation in the Syncfusion ##Platform_Name## Linear Gauge component +description: Learn here all about animation in the Syncfusion ##Platform_Name## Linear Gauge component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Linear Gauge +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Animation in ASP.NET MVC Linear Gauge + +All of the elements in the Linear Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGauge.html#Syncfusion_EJ2_LinearGauge_LinearGauge_AnimationDuration) property. The animation for the Linear Gauge is enabled when the `AnimationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `AnimationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. + +1. The axis line, ticks, labels, and ranges will all be animated at the same time. +2. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetmvc/documentation/linear-gauge/pointers#pointer-animation). +3. If available, annotations will be animated. + +The animation of the Linear Gauge is demonstrated in the following example. + +{% if page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/animation/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Animation.cs" %} +{% include code-snippet/lineargauge/animation/animation.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![Linear Gauge with animation](../linear-gauge/images/animation.gif) + +> Only the pointer of the Linear Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetmvc/documentation/linear-gauge/pointers#pointer-animation) to enable only pointer animation. diff --git a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/pointers.md b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/pointers.md index d5c3ec2566..5f9d18e225 100644 --- a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/pointers.md +++ b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.MVC/pointers.md @@ -1,6 +1,6 @@ --- layout: post -title: Pointers in ##Platform_Name## Linear Gauge Component +title: Pointers in Syncfusion ##Platform_Name## Linear Gauge Component description: Learn here all about Pointers in Syncfusion ##Platform_Name## Linear Gauge component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Pointers @@ -11,7 +11,7 @@ documentation: ug # Pointers in ASP.NET MVC Linear Gauge -Pointers are used to indicate values on an axis. The value of the pointer can be modified using the [`Value`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Value) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). +Pointers are used to indicate values on an axis. The value of the pointer can be modified using the [Value](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Value) property in [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). {% if page.publishingplatform == "aspnet-core" %} @@ -47,7 +47,7 @@ The Linear Gauge supports the following types of pointers: * Bar * Marker -The type of pointer can be modified by using the [`Type`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Type) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). +The type of pointer can be modified by using the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Type) property in [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). ### Marker pointer @@ -55,7 +55,7 @@ A marker pointer is a shape that can be used to mark the pointer value in the Li Types of marker shapes -By default, the marker shape for the pointer is **InvertedTriangle**. To change the shape of the pointer, use the [`MarkerType`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). The following marker types are available in Linear Gauge. +By default, the marker shape for the pointer is **InvertedTriangle**. To change the shape of the pointer, use the [MarkerType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property in [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). The following marker types are available in Linear Gauge. * Circle * Rectangle @@ -63,35 +63,54 @@ By default, the marker shape for the pointer is **InvertedTriangle**. To change * InvertedTriangle * Diamond * Image - -An image can be rendered instead of rendering a shape as a pointer. It can be achieved by setting the [`MarkerType`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Image** and setting the source URL of image to [`ImageUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_ImageUrl) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). - -{% if page.publishingplatform == "aspnet-core" %} +* Text {% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/tagHelper %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/pointers/marker-pointer/razor %} {% endhighlight %} {% highlight c# tabtitle="Marker-pointer.cs" %} {% include code-snippet/lineargauge/pointers/marker-pointer/marker-pointer.cs %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Linear Gauge with pointer as circle](../linear-gauge/images/marker-pointer.png) + + +Image can be rendered instead of rendering a shape as a pointer. It can be achieved by setting the [MarkerType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Image** and setting the source URL of image to [ImageUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_ImageUrl) property in [Pointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/razor %} +{% include code-snippet/lineargauge/pointers/marker-pointer-image/razor %} {% endhighlight %} -{% highlight c# tabtitle="Marker-pointer.cs" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/marker-pointer.cs %} +{% highlight c# tabtitle="Marker-pointer-image.cs" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Linear Gauge with image pointer](../linear-gauge/images/marker-pointer-image.png) -![Linear Gauge with pointer as circle](../linear-gauge/images/marker-pointer.png) +Text can be added instead of rendering a shape as a pointer. It can be achieved by setting the [MarkerType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Text**, and the text content can be set using the [Text](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Text) property in [Pointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). + +The following properties in the [TextStyle](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_TextStyle) property can be used to set the text style for the text pointer. + +* [FontFamily](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontFamily) - It is used to set the font family for the text pointer. +* [FontStyle](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontStyle) - It is used to set the font style for the text pointer. +* [FontWeight](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontWeight) - It is used to set the font weight for the text pointer. +* [Size](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_Size) - It is used to set the font size for the text pointer. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-text/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Marker-pointer.cs" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs %} +{% endhighlight %} +{% endtabs %} + +![Linear Gauge with text pointer](../linear-gauge/images/marker-pointer-text.png) + @@ -99,15 +118,15 @@ An image can be rendered instead of rendering a shape as a pointer. It can be ac The marker pointer can be customized using the following properties and class. -* [`Height`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Height) - To set the height of the pointer. -* [`Position`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Position) - The position of the pointer can be changed by setting the value as **Inside**, **Outside**, **Cross**, or **Auto**. -* [`Width`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Width) - To set the width of the pointer. -* [`Color`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Color) - To set the color of the pointer. -* [`Placement`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Placement) - To place the pointer in the specified position. By default, the pointer is placed **Far** from the axis. To change the placement, set the [`Placement`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Placement) property as **Near**, **Center**, or **None**. -* [`Offset`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Offset) - To place the pointer with specified distance from the axis. -* [`Opacity`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Opacity) - To set the opacity of the pointer. -* [`AnimationDuration`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) - To specify the duration of the animation in pointer. -* [`Border`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Border) - To set the color and width for the border of the pointer. +* [Height](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Height) - To set the height of the pointer. +* [Position](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Position) - The position of the pointer can be changed by setting the value as **Inside**, **Outside**, **Cross**, or **Auto**. +* [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Width) - To set the width of the pointer. +* [Color](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Color) - To set the color of the pointer. +* [Placement](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Placement) - To place the pointer in the specified position. By default, the pointer is placed **Far** from the axis. To change the placement, set the [Placement](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Placement) property as **Near**, **Center**, or **None**. +* [Offset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Offset) - To place the pointer with specified distance from the axis. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Opacity) - To set the opacity of the pointer. +* [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) - To specify the duration of the animation in pointer. +* [Border](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Border) - To set the color and width for the border of the pointer. {% if page.publishingplatform == "aspnet-core" %} @@ -132,7 +151,7 @@ The marker pointer can be customized using the following properties and class. ### Bar pointer -The bar pointer is used to track the axis value. The bar pointer starts from the beginning of the gauge and ends at the pointer value. To enable bar pointer set the [`Type`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Type) property in [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html) as **Bar**. +The bar pointer is used to track the axis value. The bar pointer starts from the beginning of the gauge and ends at the pointer value. To enable bar pointer set the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Type) property in [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html) as **Bar**. {% if page.publishingplatform == "aspnet-core" %} @@ -167,13 +186,13 @@ The bar pointer is used to track the axis value. The bar pointer starts from the The bar pointer can be customized using following properties and class. -* [`Width`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Width) - To set the thickness of the bar pointer. -* [`Color`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Color) - To set the color of the bar pointer. -* [`Offset`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Offset) - To place the bar pointer with the specified distance from it's default position. -* [`Opacity`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Opacity) - To set the opacity of the bar pointer. -* [`RoundedCornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_RoundedCornerRadius) - To set the corner radius of the bar pointer. -* [`Border`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Border) - To set the color and width for the border of the pointer. -* [`AnimationDuration`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) - To set the duration of the animation in bar pointer. +* [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Width) - To set the thickness of the bar pointer. +* [Color](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Color) - To set the color of the bar pointer. +* [Offset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Offset) - To place the bar pointer with the specified distance from it's default position. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Opacity) - To set the opacity of the bar pointer. +* [RoundedCornerRadius](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_RoundedCornerRadius) - To set the corner radius of the bar pointer. +* [Border](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Border) - To set the color and width for the border of the pointer. +* [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) - To set the duration of the animation in bar pointer. N>The Placement property is not applicable for the bar pointer. @@ -206,7 +225,7 @@ N>The Placement property is not applicable for the bar pointer. ## Multiple pointers -Multiple pointers can be added to the Linear Gauge by adding multiple [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html) in the [`LinearGaugePointers`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointers.html) and customization for the pointers can be done with [`LinearGaugePointer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). +Multiple pointers can be added to the Linear Gauge by adding multiple [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html) in the [LinearGaugePointers](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointers.html) and customization for the pointers can be done with [LinearGaugePointer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). {% if page.publishingplatform == "aspnet-core" %} @@ -237,7 +256,7 @@ Multiple pointers can be added to the Linear Gauge by adding multiple [`LinearGa ## Pointer animation -Pointer is animated on loading the gauge. This can be handled using the [`AnimationDuration`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) property. The duration of the animation can be specified in milliseconds. +Pointer is animated on loading the gauge. This can be handled using the [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_AnimationDuration) property. The duration of the animation can be specified in milliseconds. {% if page.publishingplatform == "aspnet-core" %} @@ -275,7 +294,7 @@ Gradient support allows the addition of multiple colors in the pointers of the L ### Linear Gradient -Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the [`StartValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) property. The end value of the linear gradient will be set using the [`EndValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) property. The color stop values such as [`Color`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Color), [`Opacity`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Opacity), and [`Offset`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Offset) are set using [`ColorStop`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_ColorStop) property. +Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the [StartValue](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) property. The end value of the linear gradient will be set using the [EndValue](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) property. The color stop values such as [Color](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Color), [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Opacity), and [Offset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Offset) are set using [ColorStop](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_ColorStop) property. {% if page.publishingplatform == "aspnet-core" %} @@ -306,7 +325,7 @@ Using linear gradient, colors will be applied in a linear progression. The start ### Radial Gradient -Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`InnerPosition`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_InnerPosition) property. The outer circle position of the radial gradient can be set using the [`OuterPosition`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_OuterPosition) property. The color stop values such as [`Color`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Color), [`Opacity`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Opacity), and [`Offset`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Offset) are set using [`ColorStop`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_ColorStop) property. +Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [InnerPosition](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_InnerPosition) property. The outer circle position of the radial gradient can be set using the [OuterPosition](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_OuterPosition) property. The color stop values such as [Color](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Color), [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Opacity), and [Offset](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeColorStop.html#Syncfusion_EJ2_LinearGauge_LinearGaugeColorStop_Offset) are set using [ColorStop](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeRadialGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeRadialGradient_ColorStop) property. {% if page.publishingplatform == "aspnet-core" %} @@ -335,4 +354,4 @@ Using radial gradient, colors will be applied in circular progression. The inner ![Linear Gauge with radial gradient pointer](../linear-gauge/images/radial-pointer.png) -N>If we set both gradients, only the linear gradient gets rendered. If we set the [`StartValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) of the [`LinearGradient`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html) as empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge. \ No newline at end of file +N>If we set both gradients, only the linear gradient gets rendered. If we set the [StartValue](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) and [EndValue](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) of the [LinearGradient](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html) as empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge. \ No newline at end of file diff --git a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/animation.md b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/animation.md new file mode 100644 index 0000000000..2885381dca --- /dev/null +++ b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/animation.md @@ -0,0 +1,37 @@ +--- +layout: post +title: Animation in the Syncfusion ##Platform_Name## Linear Gauge component +description: Learn here all about animation in the Syncfusion ##Platform_Name## Linear Gauge component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Animation +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Animation in ASP.NET Core Linear Gauge + +All of the elements in the Linear Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGauge.html#Syncfusion_EJ2_LinearGauge_LinearGauge_AnimationDuration) property. The animation for the Linear Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. + +1. The axis line, ticks, labels, and ranges will all be animated at the same time. +2. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetcore/documentation/linear-gauge/pointers#pointer-animation). +3. If available, annotations will be animated. + +The animation of the Linear Gauge is demonstrated in the following example. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/animation/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Animation.cs" %} +{% include code-snippet/lineargauge/animation/animation.cs %} +{% endhighlight %} +{% endtabs %} + +{% endif %} + +![Linear Gauge with animation](../linear-gauge/images/animation.gif) + +> Only the pointer of the Linear Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetcore/documentation/linear-gauge/pointers#pointer-animation) to enable only pointer animation. diff --git a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/pointers.md b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/pointers.md index 2a203f86ee..259b233a76 100644 --- a/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/pointers.md +++ b/ej2-asp-core-mvc/linear-gauge/EJ2_ASP.NETCORE/pointers.md @@ -1,6 +1,6 @@ --- layout: post -title: Pointers in ##Platform_Name## Linear Gauge Component +title: Pointers in Syncfusion ##Platform_Name## Linear Gauge Component description: Learn here all about Pointers in Syncfusion ##Platform_Name## Linear Gauge component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Pointers @@ -63,10 +63,7 @@ By default, the marker shape for the pointer is **InvertedTriangle**. To change * InvertedTriangle * Diamond * Image - -An image can be rendered instead of rendering a shape as a pointer. It can be achieved by setting the [`MarkerType`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Image** and setting the source URL of image to [`ImageUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_ImageUrl) property in [`e-lineargauge-pointer`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). - -{% if page.publishingplatform == "aspnet-core" %} +* Text {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -77,21 +74,43 @@ An image can be rendered instead of rendering a shape as a pointer. It can be ac {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} +![Linear Gauge with pointer as circle](../linear-gauge/images/marker-pointer.png) + + +Image can be rendered instead of rendering a shape as a pointer. It can be achieved by setting the [markerType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Image** and setting the source URL of image to [imageUrl](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_ImageUrl) property in [pointer](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). {% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/razor %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-image/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Marker-pointer.cs" %} -{% include code-snippet/lineargauge/pointers/marker-pointer/marker-pointer.cs %} +{% include code-snippet/lineargauge/pointers/marker-pointer-image/marker-pointer-image.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Linear Gauge with image pointer](../linear-gauge/images/marker-pointer-image.png) -![Linear Gauge with pointer as circle](../linear-gauge/images/marker-pointer.png) +Text can be added instead of rendering a shape as a pointer. It can be achieved by setting the [markerType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_MarkerType) property to **Text**, and the text content can be set using the [text](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_Text) property in [pointer](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html). + +The following properties in the [textStyle](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugePointer.html#Syncfusion_EJ2_LinearGauge_LinearGaugePointer_TextStyle) property can be used to set the text style for the text pointer. + +* [fontFamily](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontFamily) - It is used to set the font family for the text pointer. +* [fontStyle](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontStyle) - It is used to set the font style for the text pointer. +* [fontWeight](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_FontWeight) - It is used to set the font weight for the text pointer. +* [size](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeFont.html#Syncfusion_EJ2_LinearGauge_LinearGaugeFont_Size) - It is used to set the font size for the text pointer. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-text/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Marker-pointer-text.cs" %} +{% include code-snippet/lineargauge/pointers/marker-pointer-text/marker-pointer-text.cs %} +{% endhighlight %} +{% endtabs %} + +![Linear Gauge with text pointer](../linear-gauge/images/marker-pointer-text.png) + @@ -335,4 +354,4 @@ Using radial gradient, colors will be applied in circular progression. The inner ![Linear Gauge with radial gradient pointer](../linear-gauge/images/radial-pointer.png) -N>If we set both gradients, only the linear gradient gets rendered. If we set the [`StartValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) of the [`LinearGradient`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html) as empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge. \ No newline at end of file +N>If we set both gradients, only the linear gradient gets rendered. If we set the [`StartValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html#Syncfusion_EJ2_LinearGauge_LinearGaugeLinearGradient_EndValue) of the [`LinearGradient`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.LinearGauge.LinearGaugeLinearGradient.html) as empty strings, then the radial gradient gets rendered in the pointer of the Linear Gauge. diff --git a/ej2-asp-core-mvc/linear-gauge/images/animation.gif b/ej2-asp-core-mvc/linear-gauge/images/animation.gif new file mode 100644 index 0000000000..35454154d3 Binary files /dev/null and b/ej2-asp-core-mvc/linear-gauge/images/animation.gif differ diff --git a/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-image.png b/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-image.png new file mode 100644 index 0000000000..ec631074e2 Binary files /dev/null and b/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-image.png differ diff --git a/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-text.png b/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-text.png new file mode 100644 index 0000000000..8fd79b75d1 Binary files /dev/null and b/ej2-asp-core-mvc/linear-gauge/images/marker-pointer-text.png differ diff --git a/ej2-asp-core-mvc/maps/images/Methods/getMinMaxLatitudeLongitude-method.PNG b/ej2-asp-core-mvc/maps/images/Methods/getMinMaxLatitudeLongitude-method.PNG new file mode 100644 index 0000000000..a23423ad2b Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Methods/getMinMaxLatitudeLongitude-method.PNG differ diff --git a/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-highlight.gif b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-highlight.gif new file mode 100644 index 0000000000..bc6c4c3ec7 Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-highlight.gif differ diff --git a/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-selection.gif b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-selection.gif new file mode 100644 index 0000000000..105e6384ec Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-selection.gif differ diff --git a/ej2-asp-core-mvc/maps/methods.md b/ej2-asp-core-mvc/maps/methods.md new file mode 100644 index 0000000000..74fc290047 --- /dev/null +++ b/ej2-asp-core-mvc/maps/methods.md @@ -0,0 +1,45 @@ +--- +layout: post +title: Methods in Syncfusion ##Platform_Name## Maps Component +description: Learn here all about the methods in the Syncfusion ##Platform_Name## Maps component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Maps +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Methods in ##Platform_Name## Maps component + +## Methods + +This section explains the methods used in the Maps component. + +## getMinMaxLatitudeLongitude + +The `getMinMaxLatitudeLongitude` method returns the minimum and maximum latitude and longitude values of the Maps visible area. This method returns a `IMinMaxLatitudeLongitude` object that contains the Maps minimum and maximum latitude and longitude coordinates. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/methods/getMinMaxLatitudeLongitude/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="GetMinMax.cs" %} +{% include code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/methods/getMinMaxLatitudeLongitude/razor %} +{% endhighlight %} +{% highlight c# tabtitle="GetMinMax.cs" %} +{% include code-snippet/maps/methods/getMinMaxLatitudeLongitude/getMinMaxLatitudeLongitude.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +![getMinMaxLatitudeLongitude method](./images/Methods/getMinMaxLatitudeLongitude-method.PNG) diff --git a/ej2-asp-core-mvc/maps/user-interactions.md b/ej2-asp-core-mvc/maps/user-interactions.md index 4b77f001ca..52b39cd74c 100644 --- a/ej2-asp-core-mvc/maps/user-interactions.md +++ b/ej2-asp-core-mvc/maps/user-interactions.md @@ -549,6 +549,54 @@ To enable the selection for markers in Maps, set the `MapsSelectionSettings` in ![Enable selection for markers](./images/UserInteraction/selection-marker.PNG) +### Enable selection for polygons + +{% if page.publishingplatform == "aspnet-core" %} + +When the [enable](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Enable) property of [selectionSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_SelectionSettings) is set to **true**, the polygon shapes can be selected via user interaction. The following properties are available in `selectionSettings` to customize the polygon shape when it is selected. + +* [enableMultiSelect](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_EnableMultiSelect) - It is used to enable multiple selection of polygon shapes. +* [fill](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Fill) - It is used to change the color of the selected polygon shape. +* [opacity](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Opacity) - It is used to change the opacity of the selected polygon shape. +* [border](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Border) - This property is used to change the color, width, and opacity of the border of the selected polygon shape. + +The following example shows how to select the polygon shape in the geometry map. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-selection/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-selection.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +When the [Enable](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Enable) property of [SelectionSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_SelectionSettings) is set to **true**, the polygon shapes can be selected via user interaction. The following properties are available in `SelectionSettings` to customize the polygon shape when it is selected. + +* [EnableMultiSelect](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_EnableMultiSelect) - It is used to enable multiple selection of polygon shapes. +* [Fill](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Fill) - It is used to change the color of the selected polygon shape. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Opacity) - It is used to change the opacity of the selected polygon shape. +* [Border](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsSelectionSettings.html#Syncfusion_EJ2_Maps_MapsSelectionSettings_Border) - This property is used to change the color, width, and opacity of the border of the selected polygon shape. + +The following example shows how to select the polygon shape in the geometry map. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-selection/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-selection.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-selection/polygon-shape-selection.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +![Enable selection for polygons](./images/Polygon/polygon-shape-selection.gif) + + ### Public method for the shape selection The `shapeSelection` method can be used to select each shape in the Maps. LayerIndex, propertyName, country name, and selected value as a boolean state(true / false) are the input parameters for this method. @@ -741,6 +789,51 @@ To enable the highlight for markers in Maps, set the `MapsHighlightSettings` in ![Enable highlight for markers](./images/UserInteraction/selection-marker.PNG) +### Enable highlight for polygons + +{% if page.publishingplatform == "aspnet-core" %} + +The polygon shapes can be highlighted via user interaction if the [enable](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Enable) property of [highlightSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_HighlightSettings) is set to **true**. The following properties are available in `highlightSettings` to customize the polygon shape when it is highlighted. + +* [fill](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Fill) - It is used to change the color of the highlighted polygon shape. +* [opacity](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Opacity) - It is used to change the opacity of the highlighted polygon shape. +* [border](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Border) - This property is used to change the color, width, and opacity of the border of the highlighted polygon shape. + +The following example shows how to highlight a polygon shape on a geometry map. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-highlight/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-highlight.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +The polygon shapes can be highlighted via user interaction if the [Enable](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Enable) property of [HighlightSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_HighlightSettings) is set to **true**. The following properties are available in `HighlightSettings` to customize the polygon shape when it is highlighted. + +* [Fill](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Fill) - It is used to change the color of the highlighted polygon shape. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Opacity) - It is used to change the opacity of the highlighted polygon shape. +* [Border](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsHighlightSettings.html#Syncfusion_EJ2_Maps_MapsHighlightSettings_Border) - This property is used to change the color, width, and opacity of the border of the highlighted polygon shape. + +The following example shows how to highlight a polygon shape on a geometry map. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-highlight/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-highlight.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-highlight/polygon-shape-highlight.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +![Enable highlight for polygons](./images/Polygon/polygon-shape-highlight.gif) + ## Tooltip On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. It can be enabled separately for layer or bubble or marker by using the `Visible` property of `MapsTooltipSettings` as **true**. The `ValuePath` property in the tooltip takes the field name that presents in data source and displays that value as tooltip text. The `TooltipDisplayMode` property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, `TooltipDisplayMode` is set to **MouseMove**.