ASP.NET MVC
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Grid Lines and Tick Lines in ASP.NET MVC Range Navigator control

Grid line customization

You can customize the width, color, and dashArray of the major grid lines using the majorGridLines property.

razor
grid.cs
@(Html.EJS().RangeNavigator("container")
                    .ValueType(Syncfusion.EJ2.Charts.RangeValueType.DateTime)
                    .LabelFormat("{value}K")
                    .MajorGridLines(ViewBag.lineWidth)
                .Series(sr =>
                {
                    sr.XName("x").YName("y").DataSource(ViewBag.dataSource).Add();
                }).Render()
                )
public IActionResult Index()
        {
            List < data>dataSource = new List<data>
            {
                new data {  y = 12, y1 = 28 },
                new data {  y = 34, y1 = 44 },
                new data {  y = 45, y1 = 48 },
                new data {  y = 56, y1 = 50 },
                new data {  y = 67, y1 = 66 },
                new data {  y = 78, y1 = 78 },
                new data {  y = 89, y1 = 84 },
            };
            ViewBag.dataSource = dataSource;
            return View();
        }
        public class data
        {
            public double y;
            public double y1;
        }

Tick line customization

You can customize the width, color, and height of the major tick lines using the majorTickLines property.

razor
tick.cs
@(Html.EJS().RangeNavigator("container")
                    .ValueType(Syncfusion.EJ2.Charts.RangeValueType.DateTime)
                    .LabelFormat("{value}K")
                    .MajorTickLines(ViewBag.lineWidth)
                .Series(sr =>
                {
                    sr.XName("x").YName("y").DataSource(ViewBag.dataSource).Add();
                }).Render()
                )
public IActionResult Index()
        {
            List < data>dataSource = new List<data>
            {
                new data {  y = 12, y1 = 28 },
                new data {  y = 34, y1 = 44 },
                new data {  y = 45, y1 = 48 },
                new data {  y = 56, y1 = 50 },
                new data {  y = 67, y1 = 66 },
                new data {  y = 78, y1 = 78 },
                new data {  y = 89, y1 = 84 },
            };
            ViewBag.dataSource = dataSource;
            return View();
        }
        public class data
        {
            public double y;
            public double y1;
        }
Previous
Next