Hilo in ASP.NET MVC Charts Component
17 Apr 20239 minutes to read
Hilo
Hilo Series illustrates the price movements in stock using the high and low values. To render a Hilo series, use series Type
as Hilo
.
Hilo series requires 3 fields (x, high and low) to show the high and low price in the stock.
<script src="chart/series/hilo/financial-data.js"></script>
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Hilo).
XName("x").
High("high").
Low("low").
DataSource("returnValue").
Name("Apple Inc").
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
.MajorGridLines(ViewBag.majorGridLines)
.CrosshairTooltip(ViewBag.crosshairTooltip)
)
.ChartArea(area => area.Border(ViewBag.ChartBorder))
.Crosshair(cr => cr.Enable(true).LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Line(ViewBag.line))
.LegendSettings(lg => lg.Visible(false))
.Tooltip(tt => tt.Enable(true).Shared(true))
.Title("AAPL Historical").Load("load").Render()
<script>
var dataSource = window.chartData;
var date1 = new Date('2017-01-01');
var returnValue = dataSource.filter(filterValue);
function filterValue(value) {
return value.x >= date1;
}
</script>
public ActionResult Index()
{
List<Data> chartData = new List<Data>
{
new Data{ x= "Jan", low= 87, high= 200 },
new Data{ x= "Feb", low= 45, high= 135 },
new Data{ x= "Mar", low= 19, high= 85 },
new Data{ x= "Apr", low= 31, high= 108 },
new Data{ x= "May", low= 27, high= 80 },
new Data{ x= "June",low= 84, high= 130 },
new Data{ x= "Jul", low= 77, high=150 },
new Data{ x= "Aug", low= 54, high= 125 },
new Data{ x= "Sep", low= 60, high= 155 },
new Data{ x= "Oct", low= 60, high= 180 },
new Data{ x= "Nov", low= 88, high= 180 },
new Data{ x= "Dec", low= 84, high= 230 }
};
ViewBag.dataSource = chartData;
return View();
}
public class Data
{
public string x;
public double y;
public double high;
public double low;
}
Series customization
The following properties can be used to customize the Hilo
series.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Hilo).
XName("x").
High("high").
Low("low").
DataSource(ViewBag.dataSource).
Opacity(0.5).
Fill("blue").
Add();
})
.PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Render()
public ActionResult Index()
{
List<Data> chartData = new List<Data>
{
new Data{ x= "Jan", low= 87, high= 200 },
new Data{ x= "Feb", low= 45, high= 135 },
new Data{ x= "Mar", low= 19, high= 85 },
new Data{ x= "Apr", low= 31, high= 108 },
new Data{ x= "May", low= 27, high= 80 },
new Data{ x= "June",low= 84, high= 130 },
new Data{ x= "Jul", low= 77, high=150 },
new Data{ x= "Aug", low= 54, high= 125 },
new Data{ x= "Sep", low= 60, high= 155 },
new Data{ x= "Oct", low= 60, high= 180 },
new Data{ x= "Nov", low= 88, high= 180 },
new Data{ x= "Dec", low= 84, high= 230 }
};
ViewBag.dataSource = chartData;
return View();
}
public class Data
{
public string x;
public double high;
public double low;
}