High Low Open Close in JavaScript (ES5) Chart control

08 May 2023 / 2 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.

Source

Preview

index.js

index.html

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/21.2.3/dist/ej2.min.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.