Timelines come in handy when you want to display information about events in chronological order. They allow us to present information to our users in a visually pleasing manner. However, writing the code needed to show usable timelines on your website can be a bit time-consuming if you do everything from scratch.
We will begin our list with a relatively well-known timeline library called TimelineJS3. It has been used by a lot of popular websites like Time, Mashable, Engadget, and CNN, among others.
The easiest option to create a timeline using this library is simply to use the official authoring tool. It comes with a step-by-step guide to help you along the way. You will then be able to embed the timeline into your own website by adding a single line of code.
There are also plugins for CMSs like WordPress and Drupal to make the process of embedding timelines easier on those platforms.
The second library on our list is called TimelineJS. Its name might sound similar to TimelineJS3, but they are completely different projects. You will have to spend relatively little time on this library to learn how to get your timeline up and running.
Keep in mind that it is a jQuery plugin, so you will need to load jQuery on your webpage if you are not using it already. The content of the timeline is specified using HTML here instead of JSON. The content for each point in time is wrapped in its own
div element, which also has a
data-time attribute to indicate the time when the event took place.
The plugin comes with a variety of options to control the behavior of the timeline. This includes making changes to things like the direction of the timeline and its autoplay speed if it is set to auto play. You can also define custom classes that should be added to different timeline elements.
All these options will make it a lot easier for you to add your own custom styling. There are a bunch of examples on the official website to show you what it looks like with different options set up.
3. React Calendar Timeline
The React Calendar Timeline component is different from the first two libraries. This one is not meant to be used as a tool to give viewers an overview of events with a time axis to mark when they happened.
You can think of it more like an event planner or tracker. For example, it would be useful in situations where you are managing a group of people who have been assigned tasks that have to be completed at specific times.
The component has a huge feature set to help you manage and plan different kinds of activities. It comes with all the basic functionality like panning and zooming across a timeline. The items added to the timeline can be made moved or resized. You also have the option to provide your own custom styling for the items. Multiple timelines can also be linked so that scrolling across one of them moves the others in synchronization.
You can also listen to different events in order to add your own functionality over what the component provides by default.
4. Vis Timeline
The Vis Timeline library is helpful for people who are looking for a data visualization library that can create interactive timelines and 2D graphs which are fully customizable.
The library comes with a huge set of features. You can divide the events or data into groups to keep items from mixing. However, you also have the option to allow such intermixing. You can also move across the timeline or zoom in and out to fit items on the screen. The timescale will adjust automatically, and it can range from milliseconds to years.
Individual items can either have only a start date or a combination of both start and end dates. There are many ways to style any timelines that you create. You could change the grid background or add unique classes to different event items in order to give them their own styling.
The library also allows you to map events on a 2D graph with bar charts or line charts instead of a linear timeline.
It is quite possible that you are creating a timeline where you have to place a lot of labels in close proximity because they happened in a short amount of time. You can mark the time on the timeline with a simple dot, but a label that contains more information about the event will take up extra space. This means that there is a considerable chance of overlap among different labels. The Labella.js library takes care of this label packing issue for you.
One thing to keep in mind about Labella.js is that it assumes you have already implemented or integrated your own timeline. However, you can also use another free library called d3kit-timeline if you want to use something that comes with all the features of Labella while also implementing the timeline functionality. You will be able to create your own labelled timelines by writing around a dozen lines of code.
Play around with the interactive demo to see how you can create your own packed timeline labels.
The Squarechip Timeline library is a great alternative for people who are looking for a lightweight and dependency-free implementation of timelines. The library keeps performance in focus when rendering the timelines.
You can use it to create both horizontal and vertical timelines. They are responsive, and you can configure a bunch of options to set them up in a way that changes horizontal timelines to vertical ones on screens with smaller widths.
The library comes with minimal styling of its own, so you can easily apply your own styling without too much effort. You can find the documentation as well as some working examples of the timeline on the official website.
7. Timeline Storyteller
The Timeline Storyteller library is the most feature-rich solution for people who want to create timelines that are not limited to simple horizontal or vertical layouts. It has been developed by Microsoft and comes with a huge feature set.
You can pass around your timeline data in multiple formats such as CSV, JSON, and Google spreadsheets. You can assign relevant information to different events using a variety of attributes, but only the
start_date is actually required, while others are optional.
The data on the timeline can be represented in linear, radial, spiral, or grid format, among other layouts. You can also specify a timescale for event placement. There is a chronological scale with absolute values, as well as relative and log scales. Consider visiting the gallery of the library to see all the possible layouts that you can create with it.
8. D3 Timeline
The D3.js library is great at visualizing all kinds of data, and timelines are no different. You can use the D3 timeline library, which is basically an extension of D3, in order to quickly create simple timelines.
The library is pretty simple to use but offers a large variety of options for placing the event labels on the timeline. You can easily create timelines with or without an axis. There is also an option to mix circular labels with rectangular ones in order to plot events that happen at a point in time as well as a period of time. The event labels can be stacked and respond to click events.
You can add custom colors to event labels or rotate the axis labels if there is not enough space. There are a lot of methods mentioned on the repository homepage to customize the appearance and behavior of the timeline.