How can I help you?
Customization in React Timeline component
5 Mar 202624 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 uniformly to all Timeline item connectors to maintain consistent visual presentation throughout the 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=>
<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=>
<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/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/tailwind3.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>
</head>
<body>
<div id='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>Individual styling
Apply unique styles to individual connectors to visually differentiate particular 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=>
<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=>
<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/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/tailwind3.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>
</head>
<body>
<div id='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>Dot styling
Dot color
Modify the color of Timeline dots to highlight specific items or differentiate event types.
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=>
<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=>
<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/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/tailwind3.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>
</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, indicate importance levels, or maintain design consistency across different Timeline layouts and orientations.
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=>
<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=>
<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/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/tailwind3.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>
</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=>
<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=>
<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/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/tailwind3.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>
</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=>
<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=>
<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/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/tailwind3.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>
</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 render dots with 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=>
<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=>
<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/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/tailwind3.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>
</head>
<body>
<div id='element' style="margin-top: 30px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>