Chart.js timeline

Question

Chart.js is a very popular JavaScript library for making charts. A timeline is a very popular type of chart. It looks like chart.js can make many different types of charts, except timelines. Is it possible to make a timeline with chart.js?

Outpatient

Answer 1

I was also searching for a way to draw a timeline/gantt diagram with chartjs 3 (in my case react-chartjs-2) but I couldn't find a good example that would fulfill all my needs.

1. Use Date as start and end
2. Multiple groups in one graph
3. Custom Tooltip
4. No overlapping -> Move events to new row inside one group so that they don't overlap

So I started experimenting with the horizontal stacked bar chart and got everything I needed. I was able to format and stack the data to fulfill all my needs without any fancy library, just chartjs 3 and data formatting. In my application I also created horizontal scrolling by filtering data, which works quite well.

I used the Stacked Bar Chart with Groups and the Horizontal Bar Chart as a starting point.

These information are essential to make it work correctly:

1. You can give a bar a start and end value by providing an array with two numeric entries
2. The values for the first bar of a stack are absolute values, all following values of the same stack must be relative to the end of the previous bar
3. You need to make use of skipNull property
4. You also need to use the display function of the datalabels options in order to hide all datalabels with null values

I created a basic example in codesandbox:

Basic Example

Ichnology

Answer 2

There is an extension for timelines.

https://github.com/fanthos/chartjs-chart-timeline

It is not very well-known and there's not much documentation but I worked with it and it works quite good.

Feel free to ask any questions about it.

Methodize

Can you share any working example? I am trying to register in chart.js in my angular project. Any quick help is really helpful! – Gragg

This no longer works. "timeline" is not a registered controller is the console error. – Marmot

Answer 3

I have to log in to say Thanks to @DAGA. Your work saved my day.

To be precise, DAGA's approach uses [number, number][] for data structure, which is mentioned in Floating Bars sample in Chart.js Documentation.

Schleswigholstein