Customization in EJ2 TypeScript Timeline control

5 Mar 202624 minutes to read

Customize the Timeline items by adjusting dot size, connectors, dot borders, dot outer spacing, and more to personalize its appearance. This section explains the available styling options.

Connector styling

Common styling

Apply styles universally to all Timeline item connectors.

index.ts
index.html
styles.css
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container' style="height: 250px;">
        <div id="timeline"></div>
    </div>
    <style>
        .custom-connector .e-timeline-item.e-connector::after {
            border-color: #f7c867;
            border-width: 1.4px;
        }
    </style>
</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

Apply unique styles to individual connectors to differentiate specific items within the Timeline.

index.ts
index.html
styles.css
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container' style="height: 250px;">
        <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>
</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

Modify dot colors to highlight specific Timeline items.

index.ts
index.html
styles.css
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container' style="height: 250px;">
        <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>
</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

Adjust the dot size using the --dot-size CSS variable to make dots larger or smaller.

index.ts
index.html
styles.css
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container' style="height: 250px;">
        <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>
</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

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

index.ts
index.html
styles.css
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container' style="height: 250px;">
        <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>
</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

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

index.ts
index.html
styles.css
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container' style="height: 250px;">
        <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>
</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 the e-outline class to the Timeline cssClass property to enable the dots to have an outline state.

index.ts
index.html
styles.css
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <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='loader'>LOADING....</div>
    <div id='container' style="height: 250px;">
        <div id="timeline"></div>
    </div>
</body>

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

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

Search docs

Ask HelpBot