High Low Open Close Chart in Angular Charts

High Low Open Close

A High Low Open Close series renders stock-style bars that show the high, low, open, and close prices for each data point. The data is typically time-based, with the x-axis representing the trading period and each bar showing the four OHLC values.

High low open close chart showing data trends over time

Configure a Hilo Open Close series as follows:

  1. Set the series type: Set the series type to HiloOpenClose.
  2. Register the service: Register HiloOpenCloseSeriesService (and any required axis services) in the module providers array, or in ApplicationConfig.providers for standalone applications. Confirm that ChartModule is imported.
  3. Map the OHLC fields: Bind the data with dataSource, and map the date and price fields with xName, high, low, open, and close.
import { ChartModule, CategoryService, HiloOpenCloseSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, HiloOpenCloseSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='HiloOpenClose' xName='x' high='high' low='low' open='open' close='close' name='SHIRPUR-G'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.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 }
        ];
        this.primaryXAxis = {
            title: 'Date',
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Price in Dollar',
            minimum: 100,
            maximum: 200,
            interval: 20
        };
        this.title = 'Financial Analysis';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let openData: Object[] = [
            { 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 }
            ];

Series customization

Customize a Hilo Open Close series using the following properties.

Bull and bear colors

Use bullFillColor to color the segment when the close value is greater than the open value, and bearFillColor to color the segment when the close value is less than the open value.

import { ChartModule, CategoryService, HiloOpenCloseSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { openData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, HiloOpenCloseSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='HiloOpenClose' xName='x' high='high' low='low' open='open' close='close' name='SHIRPUR-G' bearFillColor='#e56590' bullFillColor='#f8b883'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.chartData = openData;
        this.primaryXAxis = {
            title: 'Date',
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Price in Dollar',
            minimum: 100,
            maximum: 200,
            interval: 20
        };
        this.title = 'Financial Analysis';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let openData: Object[] = [
            { 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 }
            ];

Empty points

A data point whose mapped value is null or undefined is empty. Configure its behavior with emptyPointSettings.mode.

Mode

Use mode to control empty-point rendering. The default is Gap.

Mode Visual behavior
Gap Skip the empty point; subsequent bars are still rendered.
Zero Treat the empty point as 0 and render a flat bar.
Drop Drop the empty bar; subsequent points are still rendered.
Average Replace the empty value with the average of the surrounding points. 
import { ChartModule, CategoryService, HiloOpenCloseSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { openData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, HiloOpenCloseSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='HiloOpenClose' xName='x' high='high' low='low' open='open' close='close' name='SHIRPUR-G' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public emptyPointSettings?: Object;

    ngOnInit(): void {
        this.chartData = openData;
        this.primaryXAxis = {
            title: 'Date',
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Price in Dollar',
            minimum: 100,
            maximum: 200,
            interval: 20
        };
        this.emptyPointSettings = {
            mode: 'Average'
        };
        this.title = 'Financial Analysis';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let openData: Object[] = [
    { 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: null, low: 110, close: 150 },
    { x: 'Apr', open: 160, high: 180, low: 120, close: 140 },
    { x: 'May', open: 150, high: 170, low: 110, close: 130 }
];

Empty-point fill

Use the emptyPointSettings.fill property to customize the fill color of empty-point bars.

import { ChartModule, CategoryService, HiloOpenCloseSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { openData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, HiloOpenCloseSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='HiloOpenClose' xName='x' high='high' low='low' open='open' close='close' name='SHIRPUR-G' [emptyPointSettings]='emptyPointSettings'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public emptyPointSettings?: Object;

    ngOnInit(): void {
        this.chartData = openData;
        this.primaryXAxis = {
            title: 'Date',
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Price in Dollar',
            minimum: 100,
            maximum: 200,
            interval: 20
        };
        this.emptyPointSettings = {
            mode: 'Average',
            fill: 'blue'
        };
        this.title = 'Financial Analysis';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
export let openData: Object[] = [
    { 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: null, low: 110, close: 150 },
    { x: 'Apr', open: 160, high: 180, low: 120, close: 140 },
    { x: 'May', open: 150, high: 170, low: 110, close: 130 }
];

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. The callback receives an ISeriesRenderEventArgs argument that exposes mutable series and data properties.

<ejs-chart (seriesRender)="onSeriesRender($event)"></ejs-chart>
import { ChartModule, CategoryService, HiloOpenCloseSeriesService } from '@syncfusion/ej2-angular-charts';
import { ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
import { Component, OnInit } from '@angular/core';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, HiloOpenCloseSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (seriesRender)='seriesRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='HiloOpenClose' xName='x' high='high' low='low' open='open' close='close' name='SHIRPUR-G'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.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 }
        ];
        this.primaryXAxis = {
            title: 'Date',
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Price in Dollar',
            minimum: 100,
            maximum: 200,
            interval: 20
        };
        this.title = 'Financial Analysis';
    }

    public seriesRender(args: ISeriesRenderEventArgs): void {
        args.series.bearFillColor = '#ff6347';
        args.series.bullFillColor = '#009cb8';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Point render

The pointRender event allows you to customize each data point before it is rendered on the chart. The callback receives an IPointRenderEventArgs argument that exposes the current point, series, fill, and border, plus a cancel flag.

<ejs-chart (pointRender)="onPointRender($event)"></ejs-chart>
import { ChartModule, CategoryService, HiloOpenCloseSeriesService } from '@syncfusion/ej2-angular-charts';
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
import { Component, OnInit } from '@angular/core';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, HiloOpenCloseSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='HiloOpenClose' xName='x' high='high' low='low' open='open' close='close' name='SHIRPUR-G'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;

    ngOnInit(): void {
        this.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 }
        ];
        this.primaryXAxis = {
            title: 'Date',
            valueType: 'Category'
        };
        this.primaryYAxis = {
            title: 'Price in Dollar',
            minimum: 100,
            maximum: 200,
            interval: 20
        };
        this.title = 'Financial Analysis';
    }

    public pointRender(args: IPointRenderEventArgs): void {
        if (args.point.index % 2 !== 0) {
            args.fill = '#ff6347';
        } else {
            args.fill = '#009cb8';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Troubleshooting

The following symptoms map to the most common configuration issues.

  • Bars are not rendered: Confirm that HiloOpenCloseSeriesService is registered, the series type is HiloOpenClose, and that xName, high, low, open, and close map to fields in the data source.
  • All bars use the same color: Verify that bullFillColor and bearFillColor are set, and that the open and close values are not identical.
  • An empty point renders as a flat zero bar: Review emptyPointSettings.mode. Use Gap to skip rendering or Drop to keep subsequent bars.

See also