Hilo in JavaScript Chart control

08 May 2023 / 3 minutes to read

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 and inject HiloSeries module using Chart.Inject(HiloSeries) method.

Hilo series requires 3 fields (x, high and low) to show the high and low price in the stock.

Source

Preview

index.ts

index.html

import { Chart, HiloSeries,Category } from '@syncfusion/ej2-charts';
Chart.Inject(HiloSeries, Category);
let chartData: any[] = [
    { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
    { x: 'Mar', low: 19, high: 85 }, { x: 'Apr', low: 31, high: 108 },
    { x: 'May', low: 27, high: 80 }, { x: 'June', low: 84, high: 130 },
    { x: 'July', low: 77, high: 150 }, { x: 'Aug', low: 54, high: 125 },
    { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
    { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    series:[
        {
            dataSource: chartData,
            xName: 'x', high: 'high', low: 'low',
            //Series type as Hilo
            type: 'Hilo'
        }
    ],
}, '#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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Series customization

The following properties can be used to customize the hilo series.

fill – Specifies the color of the series.
opacity – Specifies the opacity of fill.