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?

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