High Low Chart in Angular Charts

28 Aug 202624 minutes to read

Hilo

To render a Hilo series in your chart, follow these steps to configure it correctly.

Here’s a concise guide on how to do this:

1. Set the series type: Define the series type as Hilo in your chart configuration. This indicates that the data should be represented as a Hilo chart, which shows the high and low values for each data point.

2. Provide HiloSeriesService: Inject the HiloSeriesService into the component providers array. This is required for rendering Hilo series.

3. Provide high and low values: The Hilo series requires two y-values for each data point. Map both the high and low fields from the data to the high and low properties.

app.component.ts

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

@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService,HiloSeriesService],
standalone: true,
    selector: 'app-container',
    template: ` <ejs-chart style='display:block;' id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
                [title]='title' >
                <e-series-collection>
                    <e-series [dataSource]='data' type='Hilo' xName='x' high='high' low='low' name='India'> </e-series>
                </e-series-collection>
     </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];

    ngOnInit(): void {
        this.data = chartData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Months'
            };
        this.primaryYAxis = {
            labelFormat: '{value}mm',
            edgeLabelPlacement: 'Shift',
            title: 'Rainfall',
            };
        this.title = 'Maximum and Minimum Rainfall';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let chartData: Object[] = [
    { 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: 'Jun', low: 84, high: 130 },
    { x: 'Jul', 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 }
];

Series customization

Customize a Hilo series using the following properties.

Solid color

Use the fill property to set a single solid color. Accepted values are CSS color names (for example, blue), hexadecimal strings (for example, #1A75FF), and rgba(...) strings.

app.component.ts

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

@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService,HiloSeriesService],
standalone: true,
    selector: 'app-container',
    template: ` <ejs-chart style='display:block;' id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
                [title]='title' >
                <e-series-collection>
                    <e-series [dataSource]='data' type='Hilo' xName='x' high='high' low='low' name='India' fill='blue'> </e-series>
                </e-series-collection>
     </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];

    ngOnInit(): void {
        this.data = chartData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Months'
            };
        this.primaryYAxis = {
            labelFormat: '{value}mm',
            edgeLabelPlacement: 'Shift',
            title: 'Rainfall',
            };
        this.title = 'Maximum and Minimum Rainfall';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let chartData: Object[] = [
    { 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: 'Jun', low: 84, high: 130 },
    { x: 'Jul', 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 }
];

Gradient color

The fill property can also reference an SVG <linearGradient> defined in the host index.html. Define each gradient inside an SVG <defs> element and reference it with url(#gradientId):

<svg>
    <defs>
        <linearGradient id="gradient">
            <stop offset="0%" style="stop-color:blue;stop-opacity:5" />
            <stop offset="50%" style="stop-color:violet;stop-opacity:5" />
        </linearGradient>
    </defs>
</svg>

The id referenced by fill="url(#gradient)" must exist in the DOM of the page that hosts the chart.

app.component.ts

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

@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService,HiloSeriesService],
standalone: true,
    selector: 'app-container',
    template: ` <ejs-chart style='display:block;' id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
                [title]='title' >
                <e-series-collection>
                    <e-series [dataSource]='data' type='Hilo' xName='x' high='high' low='low' name='India' fill= 'url(#gradient)'> </e-series>
                </e-series-collection>
     </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];

    ngOnInit(): void {
        this.data = chartData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Months'
            };
        this.primaryYAxis = {
            labelFormat: '{value}mm',
            edgeLabelPlacement: 'Shift',
            title: 'Rainfall',
            };
        this.title = 'Maximum and Minimum Rainfall';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let chartData: Object[] = [
    { 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: 'Jun', low: 84, high: 130 },
    { x: 'Jul', 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 }
];

Opacity

The opacity property specifies the transparency of the fill. Accepts values from 0 (fully transparent) to 1 (fully opaque).

app.component.ts

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

@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService,HiloSeriesService],
standalone: true,
    selector: 'app-container',
    template: ` <ejs-chart style='display:block;' id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
                [title]='title' >
                <e-series-collection>
                    <e-series [dataSource]='data' type='Hilo' xName='x' high='high' low='low' name='India' opacity='0.5'> </e-series>
                </e-series-collection>
     </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];

    ngOnInit(): void {
        this.data = chartData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Months'
            };
        this.primaryYAxis = {
            labelFormat: '{value}mm',
            edgeLabelPlacement: 'Shift',
            title: 'Rainfall',
            };
        this.title = 'Maximum and Minimum Rainfall';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let chartData: Object[] = [
    { 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: 'Jun', low: 84, high: 130 },
    { x: 'Jul', 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 }
];

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 segments are still rendered.
Drop	Break the connecting line at the empty point.
Zero	Treat the empty point as 0.
Average	Replace the empty value with the average of the surrounding points.

app.component.ts

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

@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService,HiloSeriesService],
standalone: true,
    selector: 'app-container',
    template: ` <ejs-chart style='display:block;' id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
                [title]='title' >
                <e-series-collection>
                    <e-series [dataSource]='data' type='Hilo' xName='x' high='high' low='low' name='India' [emptyPointSettings]='emptyPointSettings'> </e-series>
                </e-series-collection>
     </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public emptyPointSettings?: object;
    ngOnInit(): void {
        this.data = chartData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Months'
            };
        this.primaryYAxis = {
            labelFormat: '{value}mm',
            edgeLabelPlacement: 'Shift',
            title: 'Rainfall',
            };
        this.emptyPointSettings = {
                mode: 'Average'
            }
        this.title = 'Maximum and Minimum Rainfall';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let chartData: Object[] = [
    { x: 'Jan', low: 87, high: 200 },  { x: 'Feb', low: 45, high: 135 },
    { x: 'Mar', low: 19, high: null },   { x: 'Apr', low: 31, high: 108 },
    { x: 'May', low: 27, high: 80 },   { x: 'Jun', low: 84, high: 130 },
    { x: 'Jul', low: 77, high: 150 },  { x: 'Aug', low: 54, high: undefined },
    { x: 'Sep', low: 60, high: 155 },  { x: 'Oct', low: 60, high: 180 },
    { x: 'Nov', low: 88, high: 180 },  { x: 'Dec', low: 84, high: 230 }
];

Empty-point fill

Use the emptyPointSettings.fill property to customize the fill color of empty points. You can also set border: { width, color } inside emptyPointSettings to style the empty-point outline.

app.component.ts

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

@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService,HiloSeriesService],
standalone: true,
    selector: 'app-container',
    template: ` <ejs-chart style='display:block;' id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
                [title]='title' >
                <e-series-collection>
                    <e-series [dataSource]='data' type='Hilo' xName='x' high='high' low='low' name='India' [emptyPointSettings]='emptyPointSettings'> </e-series>
                </e-series-collection>
     </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];
    public emptyPointSettings?: object;
    ngOnInit(): void {
        this.data = chartData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Months'
            };
        this.primaryYAxis = {
            labelFormat: '{value}mm',
            edgeLabelPlacement: 'Shift',
            title: 'Rainfall',
            };
        this.emptyPointSettings = {
                 mode: 'Average',
                fill: 'red'
            }
        this.title = 'Maximum and Minimum Rainfall';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let chartData: Object[] = [
    { x: 'Jan', low: 87, high: 200 },  { x: 'Feb', low: 45, high: 135 },
    { x: 'Mar', low: 19, high: null },   { x: 'Apr', low: 31, high: 108 },
    { x: 'May', low: 27, high: 80 },   { x: 'Jun', low: 84, high: 130 },
    { x: 'Jul', low: 77, high: 150 },  { x: 'Aug', low: 54, high: undefined },
    { x: 'Sep', low: 60, high: 155 },  { x: 'Oct', low: 60, high: 180 },
    { x: 'Nov', low: 88, high: 180 },  { x: 'Dec', low: 84, high: 230 }
];

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>

app.component.ts

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

@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService,HiloSeriesService],
standalone: true,
    selector: 'app-container',
    template: ` <ejs-chart style='display:block;' id='chart-container' (seriesRender)='seriesRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
                [title]='title' >
                <e-series-collection>
                    <e-series [dataSource]='data' type='Hilo' xName='x' high='high' low='low' name='India'> </e-series>
                </e-series-collection>
     </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];

    ngOnInit(): void {
        this.data = chartData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Months'
            };
        this.primaryYAxis = {
            labelFormat: '{value}mm',
            edgeLabelPlacement: 'Shift',
            title: 'Rainfall',
            };
        this.title = 'Maximum and Minimum Rainfall';
    }
    public seriesRender(args: ISeriesRenderEventArgs) {
        args.fill = '#ff6347';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let chartData: Object[] = [
    { 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: 'Jun', low: 84, high: 130 },
    { x: 'Jul', 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 }
];

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>

app.component.ts

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

@Component({
imports: [
         ChartModule
    ],

providers: [CategoryService,HiloSeriesService],
standalone: true,
    selector: 'app-container',
    template: ` <ejs-chart style='display:block;' id='chart-container' (pointRender)='pointRender($event)' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
                [title]='title' >
                <e-series-collection>
                    <e-series [dataSource]='data' type='Hilo' xName='x' high='high' low='low' name='India'> </e-series>
                </e-series-collection>
     </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public title?: string;
    public primaryYAxis?: Object;
    public data?: Object[];

    ngOnInit(): void {
        this.data = chartData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Months'
            };
        this.primaryYAxis = {
            labelFormat: '{value}mm',
            edgeLabelPlacement: 'Shift',
            title: 'Rainfall',
            };
        this.title = 'Maximum and Minimum Rainfall';
    }
    public pointRender(args: IPointRenderEventArgs) {
        if (args.point.index % 2 !== 0) {
            args.fill = '#ff6347';
        }
        else {
            args.fill = '#009cb8';
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

datasource.ts

export let chartData: Object[] = [
    { 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: 'Jun', low: 84, high: 130 },
    { x: 'Jul', 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 }
];

Troubleshooting

The following symptoms map to the most common configuration issues.

• No series is rendered: Verify that HiloSeriesService (and, for category x-axis data, CategoryService) are registered, the series type is Hilo, and that xName, high, and low map to fields in the data source.
• Empty-point styling has no effect: Confirm that null or undefined exists in the data values mapped to high or low, and that emptyPointSettings.mode matches the desired behavior.
• Event handlers do not fire: Confirm that seriesRender or pointRender are bound on the <ejs-chart> element, not on the <e-series>, and that the handler is a public method on the component.

See also

• Data labels
• Tooltip
• Axis customization
• Data binding
• Legend