Timeline series


Accessibility Blog Posts Data Science Highcharts Tutorials0 comments

Featured image

 

 

Timeline is a widely used chart to visualize information in chronological and linear order such as a set of successive tasks, historical events, etc. Its simplicity is perhaps the key to its effectiveness. When presented with a timeline chart, most of us may not even think of it as a chart at all (demo).

The timeline view is also popular in project management applications, as it is easy to see the sequence of events, and their timing, which leads to the desired outcome. The demo below visualizes the main software development tasks.

To visualize detailed tasks of a project, with specific information and tasks dependencies, you might be better off using a Gantt chart, since it is more flexible and comprehensive with respect to collaborative project management.

Timeline charts may be rendered both horizontally or vertically. For a relatively short list of items, a compact, horizontal layout is the easiest to read.
The demo below displays four main events of space exploration. The sequence of events starts from left to right:

Each event has a name, label, and short description. The name and label are displayed on the chart, whereas the description appears when the user hovers over the event. Here is the structure of the first event:

{
  name: 'First dogs',
  label: '1951: First dogs in space',
  description: '22 July 1951 First dogs in space (Dezik and Tsygan) '
},

Nevertheless, if you want to visualize information that would lead to a very congested view if presented horizontally, a vertical timeline may be your best bet. The demo below features eleven events that start from the top and end at the bottom.

This design also works well when embedded into a 2-column article or blog post, where the chart serves as a visual guide in one column, with a more comprehensive description in the other (see demo below):

To achieve the vertical setup, all you have to do is to use the inverted option and set its value to true:

 chart: {
   inverted: true,
   ...
 },

Timeline charts are crucial for managing projects as they help managers, users, and readers alike for task planning, monitoring, and road mapping.

Feel free to use timeline charts whenever you have to visualize information in chronological order.

Check out the Highcharts API to learn more about how to use the timeline charts.

Consent for marketing cookies needs to be given to post comments