Customization in React Timeline component
7 Oct 202524 minutes to read
The Timeline component offers extensive customization options for visual styling including dot appearance, connector lines, borders, spacing, and color schemes. This section demonstrates various approaches to customize Timeline items and create visually distinctive event displays.
Connector styling
Common styling
Define styles that apply to all Timeline item connectors for consistent visual presentation across the entire Timeline.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
import './index.css'
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent cssClass='custom-connector'>
<ItemsDirective>
<ItemDirective content='Eat' />
<ItemDirective content='Code' />
<ItemDirective content='Repeat' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent cssClass='custom-connector'>
<ItemsDirective>
<ItemDirective content='Eat' />
<ItemDirective content='Code' />
<ItemDirective content='Repeat' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom-connector .e-timeline-item.e-connector::after {
border-color: #f7c867;
border-width: 1.4px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<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='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>Individual styling
Apply unique styles to specific connectors to differentiate particular items within the Timeline sequence.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
import './index.css'
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent cssClass='custom-connector'>
<ItemsDirective>
<ItemDirective content='Eat' cssClass='state-initial' />
<ItemDirective content='Code' cssClass='state-intermediate' />
<ItemDirective content='Repeat' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent cssClass='custom-connector'>
<ItemsDirective>
<ItemDirective content='Eat' cssClass='state-initial' />
<ItemDirective content='Code' cssClass='state-intermediate' />
<ItemDirective content='Repeat' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom-connector .state-initial.e-connector::after {
border: 1.5px #f8c050 dashed;
}
.custom-connector .state-intermediate.e-connector::after {
border: 1.5px #4d85f5 dashed;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<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='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>Dot styling
Dot color
You can modify the color of the dots to highlight the specific Timeline items.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
import './index.css'
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent cssClass='dot-color'>
<ItemsDirective>
<ItemDirective content='Ordered' cssClass='state-completed' />
<ItemDirective content='Shipped' cssClass='state-progress' />
<ItemDirective content='Delivered' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent cssClass='dot-color'>
<ItemsDirective>
<ItemDirective content='Ordered' cssClass='state-completed' />
<ItemDirective content='Shipped' cssClass='state-progress' />
<ItemDirective content='Delivered' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.dot-color .state-completed .e-dot {
background: #ff9900 ;
outline: 1px dashed #ff9900;
border-color: #ff9900;
}
.dot-color .state-progress .e-dot {
background: #33cc33;
outline: 1px dashed #33cc33;
border-color: #33cc33;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<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='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>Dot size
Adjust dot dimensions using the --dot-size CSS custom property to create visual emphasis or maintain design consistency with different Timeline layouts.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
import './index.css'
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent cssClass='dot-size'>
<ItemsDirective>
<ItemDirective content='Ordered' cssClass='x-small' />
<ItemDirective content='Shipped' cssClass='small' />
<ItemDirective content='Delivered' cssClass='medium' />
<ItemDirective content='Delivered' cssClass='large' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent cssClass='dot-size'>
<ItemsDirective>
<ItemDirective content='Ordered' cssClass='x-small' />
<ItemDirective content='Shipped' cssClass='small' />
<ItemDirective content='Delivered' cssClass='medium' />
<ItemDirective content='Delivered' cssClass='large' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.dot-size .e-dot {
background: #33cc33;
}
.dot-size .x-small .e-dot {
--dot-size: 12px;
}
.dot-size .small .e-dot {
--dot-size: 18px;
}
.dot-size .medium .e-dot {
--dot-size: 24px;
}
.dot-size .large .e-dot {
--dot-size: 30px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<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='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>Dot shadow
Create visually engaging Timeline dots by adding shadow effects using the --dot-outer-space and --dot-border CSS custom properties. These properties control the outer spacing and border appearance of Timeline dots.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
import './index.css'
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent cssClass='dot-shadow'>
<ItemsDirective>
<ItemDirective content='Ordered' />
<ItemDirective content='Shipped' />
<ItemDirective content='Delivered' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent cssClass='dot-shadow'>
<ItemsDirective>
<ItemDirective content='Ordered' />
<ItemDirective content='Shipped' />
<ItemDirective content='Delivered' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.dot-shadow .e-dot {
--dot-outer-space: 3px;
--dot-border: 3px;
--dot-size: 20px;
outline-color: #dee2e6;
border-color: #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5) ,
2px -2px 4px rgba(255, 255, 255, 0.5) inset;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<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='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>Dot variant
Create different dot appearances by customizing border, outline, and background color properties of Timeline dots. This enables distinct visual styles for different types of events.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
import './index.css'
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent cssClass='dot-variant'>
<ItemsDirective>
<ItemDirective content='Filled' cssClass='dot-filled' />
<ItemDirective content='Flat' cssClass='dot-flat' />
<ItemDirective content='Outlined' cssClass='dot-outlined' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent cssClass='dot-variant'>
<ItemsDirective>
<ItemDirective content='Filled' cssClass='dot-filled' />
<ItemDirective content='Flat' cssClass='dot-flat' />
<ItemDirective content='Outlined' cssClass='dot-outlined' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.dot-variant .dot-filled .e-dot::before { content: 'A'; color: #fff;}
.dot-variant .dot-flat .e-dot::before { content: 'B'; color: #fff;}
.dot-variant .dot-outlined .e-dot::before { content: 'C';}
.dot-variant .dot-filled .e-dot {
background: #33cc33;
--dot-outer-space: 3px;
outline-color: #81ff05;
--dot-size: 25px;
}
.dot-variant .dot-flat .e-dot {
background: #33cc33;
--dot-size: 25px;
--dot-radius: 10%;
}
.dot-variant .dot-outlined .e-dot {
outline-color: #33cc33;
--dot-outer-space: 3px;
background-color: unset;
--dot-size: 25px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<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='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>Dot outline
Apply the e-outline class to the Timeline cssClass property to enable outline-style dots to have an outline state.
import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
import './index.css'
function App() {
return (
<div id='timeline' style={{ height: "350px" }}>
<TimelineComponent cssClass='e-outline'>
<ItemsDirective>
<ItemDirective content='Shipped' />
<ItemDirective content='Departed' />
<ItemDirective content='Arrived' />
<ItemDirective content='Out for Delivery' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { TimelineComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-layouts';
function App() {
return (
<div id='timeline' style={{ height: "330px" }}>
<TimelineComponent cssClass='e-outline'>
<ItemsDirective>
<ItemDirective content='Shipped' />
<ItemDirective content='Departed' />
<ItemDirective content='Arrived' />
<ItemDirective content='Out for Delivery' />
</ItemsDirective>
</TimelineComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Timeline Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<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='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>