HelpBot Assistant

How can I help you?

Strip line in EJ2 TypeScript Chart control

3 Feb 202611 minutes to read

The EJ2 TypeScript Chart control 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 the StripLine module using Chart.Inject(StripLine) method.

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.

import { Chart, Category, ColumnSeries, LineSeries, DataLabel, StripLine } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, LineSeries, DataLabel, StripLine);
let chartData: Object[] = [{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}];
let chart: Chart = new Chart({
   primaryYAxis: {
       stripLines:[
            { start: 15, end: 22 },
            { start: 8, end: 15 },
            { start: 0, end: 8 }]
    },
    series:[{
        dataSource: chartData,
        xName: 'x', yName: 'y', type: 'Column'
        }],
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

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.

import { Chart, Category, ColumnSeries, LineSeries, DataLabel, StripLine } from '@syncfusion/ej2-charts';
import { stripData } from './datasource.ts';
Chart.Inject(ColumnSeries, Category, LineSeries, DataLabel, StripLine);

let chart: Chart = new Chart({
    primaryXAxis: {
        stripLines:[
            {start: 0, end: 5 },
            {start: 5, end: 10 },
        ]
    },
   series:[{
        dataSource: stripData,
        xName: 'x', yName: 'y',
        type: 'Column'}],
},'#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

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.
import { Chart, ColumnSeries, LineSeries, DataLabel, StripLine } from '@syncfusion/ej2-charts';
import { stripData } from './datasource.ts';
Chart.Inject(ColumnSeries, LineSeries, DataLabel, StripLine);

let chart: Chart = new Chart({
    primaryXAxis: {
        stripLines:[
            { startFromAxis: true, size: 4, zIndex: 'Behind', opacity: 0.5}
        ]
    },
    series:[{
        dataSource: stripData,
        xName: 'x', yName: 'y',
        type: 'Column',
}]
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

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.
import { Chart, ColumnSeries, LineSeries, StripLine } from '@syncfusion/ej2-charts';
import { stripData } from './datasource.ts';
Chart.Inject(ColumnSeries, LineSeries, StripLine);

let chart: Chart = new Chart({
    primaryXAxis: {
        stripLines:[
            { startFromAxis: 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'}
        ]
    },
   series:[{
        dataSource: stripData,
        xName: 'x', yName: 'y',
        type: 'Column',
     }],
},'#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

See Also