How to Use Threshold in Angular Chart

Use the striplines property of the Y axis to mark a horizontal threshold line. Strip lines help visualize reference values such as target goals, safety limits, or alert levels. The line’s position is controlled by start and end; for a thin threshold, set start and end to the same Y value.

Note: Strip lines require the StripLineService in the component’s providers array for a standalone component, or in the module’s providers for an NgModule-based app.

How it works

  1. Add striplines to the Y axis configuration.
  2. Each entry in the array is a stripLineSettings object; set start, optionally end (for a range rather than a line), and color.
  3. Set visible: true and size to control thickness when the line should be more prominent than the implicit 1 px.

Mark a horizontal threshold

  1. Configure the Y axis with a single threshold line. For a thin threshold at Runs = 15:

    this.primaryYAxis = {
    title: 'Runs',
    stripLines: [
        { start: 15, end: 15.1, color: '#ff512f', visible: true }
    ]
};

  2. Bind it to your chart.

The following tabs include the full component (app.component.ts) and the bootstrap entry (main.ts):

import { ChartModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
import { LineSeriesService, StripLineService } from '@syncfusion/ej2-angular-charts';


import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         ChartModule, ChartAllModule
    ],

providers: [LineSeriesService, StripLineService],
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='Line' xName='x' yName='y' name='Runs' [marker]='marker'></e-series>>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public marker?: Object;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = [
                 {x: 1, y: 5},{x: 2, y: 22},{x: 3, y: 10},{x: 4, y: 12},{x: 5, y: 5},
                 {x: 6, y: 15},{x: 7, y: 6},{x: 8, y: 12},{x: 9, y: 20},{x: 10, y: 7}];
        this.primaryXAxis={
            title: 'Overs'
        };
        this.primaryYAxis = {
           title: 'Runs',
            stripLines:[
           { start: 15, end: 15.1, color: '#ff512f', visible: true }
           ]
        };
        this.marker={visible: true}
        this.title = 'India Vs Australia 1st match';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Result

A horizontal red line is drawn across the plot area at Runs = 15, making it easy to see which data points cross the threshold.

Troubleshooting

  • Threshold line is not visible. Ensure that StripLineService is registered in the component’s providers array and that visible is set to true.
  • Line draws as a band. start and end differ by more than the chart’s numeric precision. Set them equal (or use start === end) for a thin threshold.
  • Threshold is displayed on the wrong axis. Add stripLines to primaryYAxis for a horizontal threshold or primaryXAxis for a vertical threshold.

See also