High Low Open Close in ASP.NET CORE Charts Component
8 Oct 202424 minutes to read
High Low Open Close
To render an hiloOpenClose series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this:
-
Set the series type: Define the series
typeas HiloOpenClose in your chart configuration. This indicates that the data should be represented as a hiloOpenClose chart, which displays the high, low, open, and close values for each data point, providing a comprehensive visualization of stock price movements. -
Provide high, low, open, and close values: The
HiloOpenCloseseries requires five fields (x, high, low, open, and close) to accurately display the stock’s high, low, open, and close prices. Ensure that your data source includes these fields to create a detailed representation of stock price movements over time.
<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" 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;
}Binding data with series
You can bind data to the chart using the dataSource property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series xName, high, low, open and close properties.
<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" 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 the hiloOpenClose series, the bullFillColor property is used to fill the segment when the open value is greater than the close value, while the bearFillColor property is used to fill the segment when the open value is less than the close value. By default, bullFillColor is set to #e74c3d and bearFillColor is set to #2ecd71.
<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" open="open" close="close"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.HiloOpenClose" bearFillColor="red" bullFillColor="red">
</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;
}Empty points
Data points with null or undefined values are considered empty. Empty data points are ignored and not plotted on the chart.
Mode
Use the mode property to define how empty or missing data points are handled in the series. The default mode for empty points is Gap.
<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" open="open" close="close"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.HiloOpenClose">
<e-series-emptypointSettings mode="Average"></e-series-emptypointSettings>
</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= null, low= 130, close= 170 },
new Data{ x= "Mar", open= 130, high= 170, low= 110, close= 150 },
new Data{ x= "Apr", open= 160, high= null, 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;
}Fill
Use the fill property to customize the fill color of empty points in the 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" open="open" close="close"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.HiloOpenClose">
<e-series-emptypointSettings mode="Average" fill="red"></e-series-emptypointSettings>
</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= null, low= 130, close= 170 },
new Data{ x= "Mar", open= 130, high= 170, low= 110, close= 150 },
new Data{ x= "Apr", open= 160, high= null, 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;
}Events
Series render
The seriesRender event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart.
<ejs-chart id="container" seriesRender="changeColor">
<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>
<script>
function changeColor(args) {
args.series.bearFillColor = '#ff6347';
args.series.bullFillColor = '#009cb8';
}
</script>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;
}Point render
The pointRender event allows you to customize each data point before it is rendered on the chart.
<ejs-chart id="container" pointRender="changeColor">
<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>
<script>
function changeColor(args) {
if (args.point.index % 2 !== 0) {
args.fill = '#ff6347';
}
else {
args.fill = '#009cb8';
}
}
</script>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;
}