We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
The JavaScript Timeline is a tool to display a series of data in chronological order, providing a visually compelling and user-friendly experience. This showcases user activities, tracking progress, narrating historical timelines, and more. It includes several built-in features, such as orientation, opposite content, item alignment, reverse timeline, and template customization.
Easily get started with the JavaScript Timeline using a few simple lines of HTML code as demonstrated below. Also explore our JavaScript Timeline Example that shows you how to render and configure the Timeline in JavaScript.
<!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/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/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: 350px;">
<!--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>The JavaScript Timeline control has two orientation modes:
Horizontal: Displays items side-by-side.Vertical: Default orientation that displays items one below the other.
Positioned opposite to the item content, the opposite content provides additional information to each Timeline item.
The JavaScript Timeline control supports aligning the items’ content and opposite content as follows:
Before: Align the item content to the left (or top for horizontal orientation) and the opposite content to the right (or bottom).After: The default alignment aligns the item content to the right (or bottom for horizontal orientation) and the opposite content to the left (or top).Alternate: Align the content of the first item to the right and the opposite content to the left, and vice versa for subsequent items.AlternateReverse: Align the content of the first item to the left and the opposite content to the right, and vice versa for subsequent items.
Allows you to set icons, background colors, or images to personalize the appearance of dots associated with each timeline item.
Display timeline items in reverse order, considering the alignment of items, offering flexibility, and enhancing the user experience.
The JavaScript Timeline control supports templates to customize the default appearance, including styling the dot items, templated content, and more.
Customize timeline items’ dot sizing, dot outer spacing, connector styling, and more, enabling it to fit the application’s needs.
Customizing the size of the dot items enhances the Timeline control’s appearance.
Adjust the space between dot items and connectors in the Timeline control.
Customize the size, color, and dashed styling of the connector for each item.
Customizing the shape, outline color, and spacing of the dot items enhances their appearance and makes them stand out.
The JavaScript Timeline supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application.
The JavaScript Timeline control offers APIs for customizing its appearance and behavior, as well as templates for personalizing the look and feel. With these APIs, developers can create a unique and highly personalized Timeline that fits seamlessly into their applications.
The Timeline is available for the Blazor, React, Angular, and Vue frameworks. Explore its platform-specific options through the following links:
The JavaScript Timeline works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
The JavaScript Timeline with rich set of features offers the following:
We do not sell the JavaScript Timeline separately. It is only available for purchase as part of the Syncfusion team license. This contains over 1,800 components and frameworks, including the JavaScript Timeline. The price of the team license starts at $395 per month for 5 developers, and includes support and updates until the subscription expires. In addition, we might offer discounts based on currently active promotions. Please contact our product specialists today to see if you qualify for any additional discounts.
You can find our JavaScript Timeline demo, which demonstrates how to render and configure the Timeline component.
No, our 1,800+ components and frameworks for web, mobile, and desktop, including our JavaScript Timeline, are not sold individually. They are only available as part of a team license. However, we have competitively priced the product, so it only costs a little bit more than what some other vendors charge for their Timeline control alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 1,800+ components and frameworks for a subscription fee that starts at $395 per month for a team of 5 developers. Additionally, we might be able to offer discounts based on currently active promotions. Please contact our product specialists today to see if you qualify for any additional discounts.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
A good place to start would be our comprehensive getting started documentation.
Contact Support
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
