Hilo in ASP.NET Core Charts Component
26 Feb 20248 minutes to read
To get started with the ASP.NET Core Hilo charts, you can check on this video:
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.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Hilo">
</e-series>
</e-series-collection>
</ejs-chart>
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.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low" fill="blue" opacity="0.5"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Hilo">
</e-series>
</e-series-collection>
</ejs-chart>
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;
}