High low open close Chart in EJ2 JavaScript control
28 Sep 20238 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
and inject HiloOpenCloseSeries
module using Chart.Inject(HiloOpenCloseSeries)
method.
HiloOpenClose series requires 5 fields (x, high, low, open and close) to show the high, low, open and close price values in the stock.
var chartData = [
{ x: 'Jan', open: 120, high: 160, low: 100, close: 140 },
{ x: 'Feb', open: 150, high: 190, low: 130, close: 170 },
{ x: 'Mar', open: 130, high: 170, low: 110, close: 150 },
{ x: 'Apr', open: 160, high: 180, low: 120, close: 140 },
{ x: 'May', open: 150, high: 170, low: 110, close: 130 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Date',
valueType: 'Category',
},
primaryYAxis:
{
title: 'Price in Dollar', minimum: 100, maximum: 200, interval: 20,
},
series:[
{
dataSource: chartData, width:2,
xName: 'x', open: 'open', close: 'close', high: 'high', low: 'low',
name: 'SHIRPUR-G',
// Series type as HiloOpenClose
type: 'HiloOpenClose'
}
],
title: 'Financial Analysis'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Series customization
In hiloOpenClose
series, bullFillColor
property is used to fill the segment when the open value is greater than the close value and bearFillColor
property is used to fill the segment when the open value is less than the close value. By default, bullFillColor
is set as green and bearFillColor
is set as red.
var chartData = [
{ x: 'Jan', open: 120, high: 160, low: 100, close: 140 },
{ x: 'Feb', open: 150, high: 190, low: 130, close: 170 },
{ x: 'Mar', open: 130, high: 170, low: 110, close: 150 },
{ x: 'Apr', open: 160, high: 180, low: 120, close: 140 },
{ x: 'May', open: 150, high: 170, low: 110, close: 130 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Date',
valueType: 'Category',
},
primaryYAxis:
{
title: 'Price in Dollar', minimum: 100, maximum: 200, interval: 20,
},
series: [
{
type: 'HiloOpenClose',
// sets the bullFill and bearFill color of hiloopenclose chart
bearFillColor: 'red',
bullFillColor: 'green',
dataSource: chartData, width:2,
xName: 'x', open: 'open', close: 'close', high: 'high', low: 'low',
name: 'SHIRPUR-G'
}
],
title: 'Financial Analysis'
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>