[Chartjs]-Chart.js timeline

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.

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