High Low Open Close in ASP.NET CORE Charts Component
17 Apr 20236 minutes to read
High Low Open Close
HiloOpenClose series is used to represent the low, high, open and closing values over time. To render a HiloOpenClose series, use series Type
as HiloOpenClose
.
HiloOpenClose series requires 5 fields (x, high, low, open and close) to show the high, low, open and close price values 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" open="open" close="close"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.HiloOpenClose">
</e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<Data> chartData = new List<Data>
{
new Data{ x= "Jan", open= 120, high= 160, low= 100, close= 140 },
new Data{ x= "Feb", open= 150, high= 190, low= 130, close= 170 },
new Data{ x= "Mar", open= 130, high= 170, low= 110, close= 150 },
new Data{ x= "Apr", open= 160, high= 180, low= 120, close= 140 },
new Data{ x= "May", open= 150, high= 170, low= 110, close= 130 }
};
ViewBag.dataSource = chartData;
return View();
}
public class Data
{
public string x;
public double y;
public double high;
public double low;
public double open;
public double close;
}
Series customization
In HiloOpenClose series, BullFillColor
is used to fill the segment when the open value is greater than the close value and BearFillColor
is used to fill the segment when the open value is less than the close value.
By default, bullFillColor is set as red and bearFillColor is set as green.
<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" open="open" close="close"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.HiloOpenClose" bearFillColor="#e56590" bullFillColor="#f8b883">
</e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<Data> chartData = new List<Data>
{
new Data{ x= "Jan", open= 120, high= 160, low= 100, close= 140 },
new Data{ x= "Feb", open= 150, high= 190, low= 130, close= 170 },
new Data{ x= "Mar", open= 130, high= 170, low= 110, close= 150 },
new Data{ x= "Apr", open= 160, high= 180, low= 120, close= 140 },
new Data{ x= "May", open= 150, high= 170, low= 110, close= 130 }
};
ViewBag.dataSource = chartData;
return View();
}
public class Data
{
public string x;
public double y;
public double high;
public double low;
public double open;
public double close;
}