Strip line in React Chart

27 Aug 202624 minutes to read

The React Charts component supports horizontal and vertical strip lines and provides 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 the Inject directive in the React component.

import { ChartComponent, Inject, StripLine } from '@syncfusion/ej2-react-charts';

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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { stripData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Overs' };
    const primaryyAxis = {
        title: 'Runs',
        stripLines: [{ start: 15, end: 22, text: 'Good', color: '#ff512f', visible: true },
            { start: 8, end: 15, text: 'Medium', color: 'pink', opacity: 0.5, visible: true },
            { start: 0, end: 8, text: 'Not enough', color: 'skyblue', opacity: 0.5, visible: true }]
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='India Vs Australia 1st match'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';
import { stripData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Overs' };
  const primaryyAxis: AxisModel = {
    title: 'Runs',
    stripLines: [{ start: 15, end: 22, text: 'Good', color: '#ff512f', visible: true },
    { start: 8, end: 15, text: 'Medium', color: 'pink', opacity: 0.5, visible: true },
    { start: 0, end: 8, text: 'Not enough', color: 'skyblue', opacity: 0.5, visible: true }]
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='India Vs Australia 1st match'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stripData = [
    { 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: 34 }, { x: 10, y: 7 }
];
export let stripData: 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: 34 }, { x: 10, y: 7 }
];

Vertical strip lines

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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { stripData } from './datasource';
function App() {
    const primaryxAxis = {
        title: 'Overs', stripLines: [{ start: 0, end: 5, text: 'powerplay 1', color: 'red', visible: true, opacity: 0.5 },
            { start: 5, end: 10, text: 'powerplay 2', color: 'blue', visible: true, opacity: 0.5 }]
    };
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='India Vs Australia 1st match'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';
import { stripData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = {
    title: 'Overs', stripLines: [{ start: 0, end: 5, text: 'powerplay 1', color: 'red', visible: true, opacity: 0.5 },
    { start: 5, end: 10, text: 'powerplay 2', color: 'blue', visible: true, opacity: 0.5 }]
  };
  const primaryyAxis: AxisModel = { title: 'Runs' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='India Vs Australia 1st match'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stripData = [
    { 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: 34 }, { x: 10, y: 7 }
];
export let stripData: 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: 34 }, { x: 10, y: 7 }
];

Customize the strip line

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

  • Use color to set the fill color of the strip line.
  • Use opacity to adjust the strip line transparency.
  • Use text to display a label on the strip line.
  • 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 configure border color, width, and dashArray.
  • Use zIndex to control whether the strip line appears behind or above the chart series.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { stripData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Overs', stripLines: [{ startFromOrigin: true, size: 4, zIndex: 'Behind', opacity: 0.5 }] };
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='India Vs Australia 1st match'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';
import { stripData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Overs', stripLines: [{ startFromOrigin: true, size: 4, zIndex: 'Behind', opacity: 0.5 }] };
  const primaryyAxis: AxisModel = { title: 'Runs' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='India Vs Australia 1st match'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stripData = [
    { 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: 34 }, { x: 10, y: 7 }
];
export let stripData: 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: 34 }, { x: 10, y: 7 }
];

Customize the strip line text

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

  • Use textStyle to set the text appearance.
  • Use rotation to rotate the strip line text.
  • Use horizontalAlignment and verticalAlignment to adjust label placement.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { stripData } from './datasource';
function App() {
    const primaryxAxis = {
        title: 'Overs', stripLines: [
            {
                startFromOrigin: true, size: 4, zIndex: 'Behind', opacity: 0.5, verticalAlignment: 'Middle', horizontalAlignment: 'End', rotation: 90,
                textStyle: { size: 15 }
            }, { start: 5, end: 8, verticalAlignment: 'Start', horizontalAlignment: 'End', rotation: 45 }
        ]
    };
    const primaryyAxis = { title: 'Runs' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='India Vs Australia 1st match'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';
import { stripData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = {
    title: 'Overs', stripLines: [
      {
        startFromOrigin: true, size: 4, zIndex: 'Behind', opacity: 0.5, verticalAlignment: 'Middle', horizontalAlignment: 'End', rotation: 90,
        textStyle: { size: 15 }
      }, { start: 5, end: 8, verticalAlignment: 'Start', horizontalAlignment: 'End', rotation: 45 }]
  };
  const primaryyAxis: AxisModel = { title: 'Runs' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='India Vs Australia 1st match'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stripData = [
    { 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: 34 }, { x: 10, y: 7 }
];
export let stripData: 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: 34 }, { x: 10, y: 7 }
];

Dash array

Dashed strip lines can be rendered using the dashArray property. Each number pair defines the dash length and gap length (for example, "5,5").

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { stripData } from './datasource';
function App() {
    const primaryyAxis = { minimum: 0, maximum: 60, interval: 10,
        stripLines: [{ start: 30, size: 2, sizeType: 'Pixel', dashArray: "10,5", color: "red" }]
    };
    const marker = { visible: true };
    return <ChartComponent id='charts' primaryYAxis={primaryyAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';
import { stripData } from './datasource';
function App() {

  const primaryyAxis: AxisModel = {  minimum: 0, maximum: 60, interval: 10,
        stripLines:[{ start: 30, size: 2, sizeType: 'Pixel', dashArray:"10,5", color: "red"}]
  };
  const marker = { visible: true };

  return <ChartComponent id='charts'
      primaryYAxis={primaryyAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stripData = [
    { 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: 34 }, { x: 10, y: 7 }
];
export let stripData: 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: 34 }, { x: 10, y: 7 }
];

Recurrence strip line

Recurring strip lines help mark repeating events across the chart axis. The following properties configure recurrence:

  • isRepeat – Enables or disables repeating strip lines.
  • repeatEvery – Specifies the interval at which the strip line repeats.
  • repeatUntil – Defines the end value up to which the strip lines should repeat.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { stripLines: [{ start: 1, size: 1, isRepeat: true, repeatEvery: 2, color: 'rgba(167,169,171, 0.3)' }]
    };
    const marker = { visible: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { stripLines:[{start: 1, size: 1, isRepeat: true, repeatEvery: 2, color: 'rgba(167,169,171, 0.3)'}]
  };
  const marker = { visible: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let 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 }
];
export let chartData: Object[] = [
    { 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 }
];

Size type

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

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

Use Pixel for numeric axes and the date-based units (Years, Months, Days, Hours, Minutes, Seconds) for date-time axes.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, DateTime, ColumnSeries, Legend, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', intervalType: 'Years',
        stripLines: [{ start: new Date(2002, 0, 1), size: 2, sizeType: 'Years', color: 'rgba(167,169,171, 0.3)' }] };
    const primaryyAxis = { minimum: 0, maximum: 60, interval: 10 };
    const marker = { visible: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis}>
      <Inject services={[ColumnSeries, Legend, LineSeries, Tooltip, DataLabel, DateTime, StripLine]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,DateTime,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', intervalType: 'Years',
       stripLines:[{start:new Date(2002, 0, 1) , size: 2, sizeType: 'Years', color: 'rgba(167,169,171, 0.3)'}] };
  const primaryyAxis: AxisModel={ minimum: 0, maximum: 60, interval: 10 }
  const marker = { visible: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}>
      <Inject services={[ColumnSeries, Legend, LineSeries, Tooltip, DataLabel, DateTime, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let 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 }
];
export let chartData: Object[] = [
    { 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 }
];

Segment strip line

Segment strip lines highlight a specific region corresponding to another axis. This is useful for marking regions that depend on values across two dimensions.

Key properties:

  • isSegmented – Enables segmented strip lines.
  • segmentStart – Defines the starting point of the segment region.
  • segmentEnd – Defines the ending point of the segment region.
  • segmentAxisName – Specifies the associated axis for segmentation.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
    const primaryyAxis = { stripLines: [
            { start: 20, end: 40, isSegmented: true, segmentStart: 2, segmentEnd: 4,
                color: 'rgba(167,169,171, 0.3)' }
        ]
    };
    const marker = { visible: true };
    return <ChartComponent id='charts' primaryYAxis={primaryyAxis}>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, StripLine,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, StripLinesDirective, StripLineDirective}
from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';

function App() {

  const primaryyAxis: AxisModel = { stripLines:[
            {start: 20, end: 40, isSegmented: true, segmentStart: 2, segmentEnd: 4,
            color: 'rgba(167,169,171, 0.3)'}
        ]
  };
  const marker = { visible: true };

  return <ChartComponent id='charts'
       primaryYAxis={primaryyAxis}>
      <Inject services={[ColumnSeries,LineSeries, Legend, Tooltip, DataLabel, Category, StripLine]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let 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 }
];
export let chartData: Object[] = [
    { 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 }
];

See also