Line Chart in React Chart

17 Aug 202624 minutes to read

Line

Follow these steps to render a line series, which is ideal for visualizing trends over time or across categories.

1. Set the series type: Set the series type to Line in the series configuration.

2. Inject the LineSeries module: Add LineSeries to the services array of the Inject component inside ChartComponent. This registers the functionality required to render a line series.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 }, 
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 }, 
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Binding data with series

You can bind data to the chart using the dataSource property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series xName and yName properties.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 }, 
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 }, 
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Series customization

Customize the line’s appearance with the following properties. Defaults are taken from the standard Series model.

Property	Type	Default	Description
fill	string	null	Color applied to the line. Accepts a CSS color or a gradient model.
opacity	number	1	Transparency of the fill (0 to 1).
dashArray	string	''	SVG dash-array pattern.
width	number	1	Stroke width of the line, in pixels.

Solid fill

The fill property determines the color applied to the line.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' fill='green' name='India' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {


  return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' fill='green' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Gradient fill

The fill property can be used to apply a gradient color to the line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' fill='url(#gradient)' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' fill='url(#gradient)' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Opacity

The opacity property controls the transparency of the fill and affects how the series blends with background or overlapping series.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' opacity={0.5} type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' opacity={0.5} type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Dash array

The dashArray property determines the pattern of dashes and gaps in the line.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' dashArray='2,5' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' dashArray='2,5' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Width

The width property specifies the stroke width applied to the line, in pixels.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2.5} type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2.5} type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Multicolored line

Follow these steps to render a multicolored line series, where each segment of the line can have a distinct color.

1. Set the series type: Set the series type to MultiColoredLine in the series configuration.

2. Inject the MultiColoredLineSeries module: Add MultiColoredLineSeries (and LineSeries) to the services array of the Inject component inside ChartComponent. This registers the functionality required to render a multicolored line.

3. Map individual colors: Use the pointColorMapping property to point at a field in your data source whose value is a CSS color name or hex code (e.g., pointColorMapping='color' and each data item has a color: 'red' entry).

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, MultiColoredLineSeries, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, MultiColoredLineSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='MultiColoredLine' pointColorMapping='color'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, MultiColoredLineSeries, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category, MultiColoredLineSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='MultiColoredLine'
          pointColorMapping='color'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [   
    { x: 2005, y: 28, color: 'red' }, 
    { x: 2006, y: 25, color: 'green' },
    { x: 2007, y: 26, color: '#ff0097' }, 
    { x: 2008, y: 27, color: 'crimson' },
    { x: 2009, y: 32, color: 'blue' }, 
    { x: 2010, y: 35, color: 'darkorange' }
];

datasource.tsx

export let data: Object[] = [   
    { x: 2005, y: 28, color: 'red' }, 
    { x: 2006, y: 25, color: 'green' },
    { x: 2007, y: 26, color: '#ff0097' }, 
    { x: 2008, y: 27, color: 'crimson' },
    { x: 2009, y: 32, color: 'blue' }, 
    { x: 2010, y: 35, color: 'darkorange' }
];

Empty points

Data points with null or undefined values are considered empty. By default (mode: 'Gap'), empty points leave a gap in the line; the mode property lets you change how they are handled.

Mode

Use the mode property to control handling of empty points. Available modes: Gap, Drop, Zero, Average. The default mode is Gap.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const emptyPoints = { mode: 'Gap' };
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' emptyPointSettings={emptyPoints}  marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const emptyPoints: object = { mode: 'Gap' };
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };
  return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' emptyPointSettings={emptyPoints} type='Line'  marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: null },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: null },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

Fill

Use the fill property to set the fill color for empty points.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const emptyPoints = { mode: 'Average', fill: 'red' };
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' emptyPointSettings={emptyPoints}  marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const emptyPoints: object = { mode: 'Average', fill: 'red' };
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };
  return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' emptyPointSettings={emptyPoints} type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: null },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: null },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

Border

Use the border property to customize the border width and color for empty points.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const emptyPoints = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'} };
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };
    return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' emptyPointSettings={emptyPoints}  marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const emptyPoints: object = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'} };
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };
  return <ChartComponent id='charts'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' emptyPointSettings={emptyPoints} type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: null },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: null },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

Events

Series render

The seriesRender event fires before each series is rendered and lets you modify series properties such as data, fill, or name. For a line series, use it to change the line color per render or to swap data sources on the fly.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const seriesRender = (args) => {
    args.fill = '#ff6347';
  };
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };

    return <ChartComponent id='charts' seriesRender={seriesRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, ISeriesRenderEventArgs, Selection}
from'@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { data } from './datasource';

function App() {
  const seriesRender: EmitType<ISeriesRenderEventArgs> = (args: ISeriesRenderEventArgs): void => {
    args.fill = '#ff6347';
  }
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };
  return <ChartComponent id='charts' seriesRender={seriesRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: null },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: 20 },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

Point render

The pointRender event fires before each data point is drawn, letting you customize per-point marker shape, border, or fill. For a line series, use it to color each segment differently or to apply conditional formatting per vertex.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const pointRender = (args) => {
    if (args.point.index % 2 !== 0) {
      args.fill = '#ff6347';
  }
  else {
      args.fill = '#009cb8';
  }
  };
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };

    return <ChartComponent id='charts' pointRender={pointRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, IPointRenderEventArgs, Selection}
from'@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { data } from './datasource';

function App() {
  const pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
    if (args.point.index % 2 !== 0) {
      args.fill = '#ff6347';
  }
  else {
      args.fill = '#009cb8';
  }
  }
  const marker = {
    visible: true,
    width: 10,
    height: 10,
    border: { width: 2, color: '#F8AB1D' },
  };
  return <ChartComponent id='charts' pointRender={pointRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: null },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

datasource.tsx

export let data: Object[] = [
    { x: 2005, y: 28 },
    { x: 2006, y: 25 },
    { x: 2007, y: 20 },
    { x: 2008, y: 27 },
    { x: 2009, y: 32 },
    { x: 2010, y: 35 },
    { x: 2011, y: 30 },
];

See also

• Data label
• Tooltip
• Axis customization
• Legend