Strip Line in Angular Chart Component

13 Mar 202624 minutes to read

The Angular Chart component supports horizontal and vertical strip lines, providing visual guides to highlight specific ranges in the chart area. Strip lines can be added to both axes and fully customized based on visual and functional requirements. To use strip line features, inject StriplineService into the @NgModule.providers.

Horizontal Strip lines

Horizontal strip lines are created by adding the stripline configuration to the vertical axis and setting the visible property to true. They highlight horizontal ranges in the chart, and multiple strip lines can be added to the same axis.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { stripData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService ],
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='Column' xName='x' yName='y' name='Internet'></e-series>>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData =  [{x: 1, y: 20},{x: 2, y: 22},{x: 3, y: 0},{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.primaryYAxis = {
           title: 'Runs',
            stripLines:[
            { start: 15, end: 22, text: 'Good', color: '#ff512f', visible: true, zIndex: 'Behind', opacity: 0.5 },
            { start: 8, end: 15, text: 'Medium', color: 'pink', opacity: 0.5, visible: true, zIndex: 'Behind' },
            { start: 0, end: 8, text:'Not enough', color: 'skyblue', opacity: 0.5, visible: true, zIndex: 'Behind' }]
        };
        this.primaryXAxis = {
            title: 'Overs'
        };
        this.title = 'India Vs Australia 1st match';
    }

}

main.ts

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

Vertical Striplines

Vertical strip lines are created by adding the stripline configuration to the horizontal axis and enabling the visible property. They highlight vertical regions in the chart and support multiple entries for an axis.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { stripData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService ],
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='Column' xName='x' yName='y' name='Internet'></e-series>>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData =  [{x: 1, y: 20},{x: 2, y: 22},{x: 3, y: 0},{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.primaryYAxis = {
           title: 'Runs',

        };
        this.primaryXAxis = {
           title: 'Overs',
            stripLines:[
            {start: 0, end: 5, text: 'powerplay 1', color: 'red', visible: true, opacity: 0.5, rotation: 45, textStyle: { size: 20, color: 'black'}},
            {start: 5, end: 10, text: 'powerplay 2', color: 'blue', visible: true, opacity: 0.5, rotation: 45, textStyle: { size: 20, color: 'black'}},
        ]
        };
        this.title = 'India Vs Australia 1st match';
    }

}

main.ts

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

Stripline as band and line

You can utilize the stripline to visualize both the frequency band and transmission line characteristics by specifying its start and end properties in StripLineSettingsModel.

app.component.ts

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

import { Component, OnInit } from '@angular/core';
import { stripData } from './datasource';
@Component({
  imports: [ChartModule],

  providers: [
    StripLineService,
    AreaSeriesService,
    ColumnSeriesService,
    DataLabelService,
    LineSeriesService,
  ],
  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' width='2' yName='y' name='Internet'></e-series>>
        </e-series-collection>
    </ejs-chart>`,
})
export class AppComponent implements OnInit {
  public primaryXAxis?: Object;
  public chartData?: Object[];
  public title?: string;
  public primaryYAxis?: Object;
  ngOnInit(): void {
    this.chartData = [
      { x: 1, y: 5 },
      { x: 2, y: 15 },
      { x: 3, y: 0 },
      { x: 4, y: 12 },
      { x: 5, y: 5 },
      { x: 6, y: 8 },
      { x: 7, y: 6 },
      { x: 8, y: 12 },
      { x: 9, y: 20 },
      { x: 10, y: 7 },
    ];
    this.primaryYAxis = {
      title: 'Runs',
      stripLines: [
        {
          start: 20,
          end: 24,
          text: 'Y-axis Plot Band',
          color: '#ff512f',
          visible: true,
          textStyle: { size: 15, textAlignment: 'Far', color: 'black' },
        },
        {
          start: 0.5,
          end: 0.7,
          text: 'Y-Axis Plot Line',
          color: 'Red',
          visible: true,
          textStyle: { size: 15, textAlignment: 'Far', color: 'black' },
        },
      ],
    };
    this.primaryXAxis = {
      title: 'Overs',
      stripLines: [
        {
          start: 1.4,
          end: 1.45,
          text: 'X-Axis Plot Line',
          color: 'red',
          visible: true,
          textStyle: { size: 15, textAlignment: 'Far', color: 'black' },
        },
        {
          start: 5,
          end: 7,
          text: 'X-Axis Plot Band',
          color: 'blue',
          visible: true,
          opacity: 0.5,
          textStyle: { size: 15, color: 'black' },
        },
      ],
    };
    this.title = 'India Vs Australia 1st match';
  }
}

main.ts

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

Customize the strip line

Strip lines can be customized to highlight specific regions more effectively:

• Use start to set the beginning value of the strip line.
• Use end to define the ending value.
• Use startFromOrigin to begin the strip line from the axis origin.
• Use size to specify the strip line height or width (based on orientation).
• Use border to customize border appearance.
• Use zIndex to control whether the strip line appears behind or above chart series.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { stripData } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService ],
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='Column' xName='x' yName='y' name='Internet'></e-series>>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = [
                 {x: 1, y: 20},{x: 2, y: 22},{x: 3, y: 0},{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.primaryYAxis = {
           title: 'Runs',
        };
        this.primaryXAxis = {
            stripLines:[
            { startFromOrigin: true, size: 4, zIndex: 'Behind', opacity: 0.5, border: { width: 2, color:'red'}}
        ],
            title: 'Overs'
        };
        this.title = 'India Vs Australia 1st match';
    }

}

main.ts

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

Customize the stripline text

Strip line text labels can be customized for readability and visual presentation:

• Use textStyle to set text appearance.
• Use rotation to rotate the strip line text.
• Use horizontalAlignment and verticalAlignment to adjust label placement.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { stripData } from './datasource';
@Component({
imports: [
         ChartModule
    ],

providers: [ StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService ],
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='Column' xName='x' yName='y' name='Internet'></e-series>>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public primaryYAxis?: Object;
    ngOnInit(): void {
        this.chartData = [
                 {x: 1, y: 20},{x: 2, y: 22},{x: 3, y: 0},{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.primaryYAxis = {
           title: 'Runs',
        };
        this.primaryXAxis = {
            stripLines:[
            { startFromOrigin: true, size: 4, zIndex: 'Behind', opacity: 0.5,  text: 'Good', verticalAlignment: 'Middle', horizontalAlignment: 'Middle', rotation: 90, textStyle: { size: 15}},
            { start: 5, end: 8, verticalAlignment: 'Start', horizontalAlignment: 'End', rotation: 45, text: 'Poor'}
        ],
            title: 'Overs'
        };
        this.title = 'India Vs Australia 1st match';
    }

}

main.ts

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

Dash Array

Dashed strip lines can be rendered using the dashArray property. The dash pattern is defined using a series of numbers representing dash and gap lengths.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { stripData } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryYAxis]='primaryYAxis'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' [marker]='marker'></e-series>>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public marker?: Object;
    ngOnInit(): void {
        this.chartData = [
            {x: 1, y: 5},{x: 2, y: 39},{x: 3, y: 21},{x: 4, y: 51},{x: 5, y: 30},
            {x: 6, y: 25},{x: 7, y: 10},{x: 8, y: 40},{x: 9, y: 50},{x: 10, y: 20}
            ];
        this.primaryYAxis = {
           minimum: 0, maximum: 60, interval: 10,
        stripLines:[
            { start: 30, size: 2, sizeType: 'Pixel', dashArray:"10,5", color: "red"}
        ]
        };
        this.marker = { visible: true }
    }

}

main.ts

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

Recurrence Stripline

Strip lines can be drawn repeatedly at regular intervals – this will be useful when you want to mark an event that occurs recursively along the timeline of the chart. Following properties are used to configure this feature.

• isRepeat - It is used to enable / disable the recurrence strip line.
• repeatEvery - It is used to mention the stripline interval.
• repeatUntil - It specifies the end value at which point strip line has to stop repeating.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { stripData } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' [marker]='marker'></e-series>>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public marker?: Object;
    ngOnInit(): void {
        this.chartData = [
            {x: 1, y: 5},{x: 2, y: 39},{x: 3, y: 21},{x: 4, y: 51},{x: 5, y: 30},
            {x: 6, y: 25},{x: 7, y: 10},{x: 8, y: 40},{x: 9, y: 50},{x: 10, y: 20}
            ];
        this.primaryXAxis = {
            stripLines:[
            {start: 1, size: 1, isRepeat: true, repeatEvery: 2, color: 'rgba(167,169,171, 0.3)'}
        ]
        };
        this.marker = { visible: true }
    }

}

main.ts

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

Size Type

The sizeType property determines how strip line size is interpreted. Supported units include:

• Auto
• Pixel
• Years
• Months
• Days
• Hours
• Minutes
• Seconds

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, LineSeriesService, DateTimeCategoryService, StripLineService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';

@Component({
imports: [
         ChartModule
    ],

providers: [ DateTimeService, LineSeriesService, DateTimeCategoryService, StripLineService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' [marker]='marker'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public marker?: Object;
    ngOnInit(): void {
        this.chartData =  [{ x: new Date(2000, 0, 1), y: 10 }, { x: new Date(2002, 0, 1), y: 40 },
    { x: new Date(2004, 0, 1), y: 20 }, { x: new Date(2006, 0, 1), y: 50 },
    { x: new Date(2008, 0, 1), y: 15 }, { x: new Date(2010, 0, 1), y: 30 }];
        this.primaryXAxis = {
            valueType: 'DateTime', intervalType: 'Years',
       stripLines:[
            {start:new Date(2002, 0, 1) , size: 2, sizeType: 'Years', color: 'rgba(167,169,171, 0.3)'}
            ]
        };
        this.primaryYAxis = {
           minimum: 0, maximum: 60, interval: 10
        };
       this.marker = { visible: true }
    }

}

main.ts

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

Segment stripline

You can create stripline in a particular region with respect to segment. You can enable the segment stripline using isSegmented property. The start and end value of this type of stripline can be defined using segmentStart and segmentEnd properties.

• isSegmented - It is used to enable the segment stripline.
• segmentStart - Used to change the segment start value. Value correspond to associated axis.
• segmentEnd - Used to change the segment end value. Value correspond to associated axis.
• segmentAxisName - Used to specify the name of the associated axis.

app.component.ts

import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { stripData } from './datasource';

@Component({
imports: [
         ChartModule
    ],

providers: [ StripLineService, ColumnSeriesService, DataLabelService, LineSeriesService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryYAxis]='primaryYAxis'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='x' yName='y' [marker]='marker'></e-series>>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public primaryYAxis?: Object;
    public marker?: Object;
    ngOnInit(): void {
        this.chartData = [
            {x: 1, y: 5},{x: 2, y: 39},{x: 3, y: 21},{x: 4, y: 51},{x: 5, y: 30},
            {x: 6, y: 25},{x: 7, y: 10},{x: 8, y: 40},{x: 9, y: 50},{x: 10, y: 20}
            ];
        this.primaryYAxis = {
        stripLines:[
            {start: 20, end: 40, isSegmented: true, segmentStart: 2, segmentEnd: 4,
            color: 'rgba(167,169,171, 0.3)'}
        ]

        };
        this.marker = { visible: true }
    }

}

main.ts

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

See Also

• Mark the threshold in chart