You can customize the width, color, and dashArray of the major grid lines using the majorGridLines property.
@{
var value = new object[]{20, 50 };
}
<ejs-rangenavigator id="rangeNavigator" valueType="Double" value="value" >
<e-rangenavigator-majorgridlines color="blue" width=4 dashArray="5,5">
</e-rangenavigator-majorgridlines>
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.dataSource" type="StepLine" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>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;
}You can customize the width, color, and height of the major tick lines using the majorTickLines property.
@{
var value = new object[]{20, 50 };
}
<ejs-rangenavigator id="rangeNavigator" valueType="Double" value="value" >
<e-rangenavigator-majorticklines color="blue" width=4 >
</e-rangenavigator-majorticklines>
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.dataSource" type="StepLine" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>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;
}