Customization in EJ2 JavaScript Timeline control

26 Feb 202524 minutes to read

You can customize the Timeline items by adjusting dot size, connectors, dot borders, dot outer spacing, and more to personalize its appearance. This section explains the various ways to style the items.

Connector styling

Common styling

You can apply styles universally to all Timeline item connectors.

var dailyRoutine = [
  { content: 'Eat' },
  { content: 'Code' },
  { content: 'Repeat' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: dailyRoutine,
  cssClass: 'custom-connector'
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 250px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <style>
        .custom-connector .e-timeline-item.e-connector::after {
            border-color: #f7c867;
            border-width: 1.4px;
        }
    </style>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Individual styling

You can apply unique styles to individual connectors to differentiate specific items within the Timeline.

var dailyRoutine = [
  { content: 'Eat', cssClass: 'state-initial' },
  { content: 'Code', cssClass: 'state-intermediate' },
  { content: 'Repeat' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: dailyRoutine,
  cssClass: 'custom-connector'
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 250px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <style>
        .custom-connector .state-initial.e-connector::after {
            border: 1.5px #f8c050 dashed;
        }

        .custom-connector .state-intermediate.e-connector::after {
            border: 1.5px #4d85f5 dashed;
        }
    </style>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Dot styling

Dot color

You can modify the color of the dots to highlight specific Timeline items.

var orderStatus = [
  { content: 'Ordered', cssClass: 'state-completed' },
  { content: 'Shipped', cssClass: 'state-progress' },
  { content: 'Delivered' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: orderStatus,
  cssClass: 'dot-color'
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 250px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <style>
        .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;
        }
    </style>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Dot size

You can adjust the size of the dot, making it larger or smaller, by using the --dot-size variable.

var dotSizes = [
  { content: 'Extra Small', cssClass: 'x-small' },
  { content: 'Small', cssClass: 'small' },
  { content: 'Medium', cssClass: 'medium' },
  { content: 'Large', cssClass: 'large' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: dotSizes,
  cssClass: 'dot-size'
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 250px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <style>
        .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;
        }
    </style>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Dot shadow

You can add shadow effects to the Timeline dots to provide a visually engaging appearance by using the --dot-outer-space and --dot-border variables.

var orderStatus = [
  { content: 'Ordered' },
  { content: 'Shipped' },
  { content: 'Delivered' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: orderStatus,
  cssClass: 'dot-shadow'
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 250px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <style>
        .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;
        }
    </style>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Dot variant

You can achieve the desired dot variant by customizing the border, outline and background colors of the Timeline dots.

var dotVariants = [
  { content: 'Filled', cssClass: 'dot-filled' },
  { content: 'Flat', cssClass: 'dot-flat' },
  { content: 'Outlined', cssClass: 'dot-outlined' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: dotVariants,
  cssClass: 'dot-variant'
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 250px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <style>
        .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;
        }
    </style>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Dot outline

Add an e-outline class to the Timeline cssClass property to enable the dots to have an outline state.

var orderStatus = [
  { content: 'Shipped' },
  { content: 'Departed' },
  { content: 'Arrived' },
  { content: 'Out for Delivery' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: orderStatus,
  cssClass: 'e-outline'
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 250px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}