Timeline Chart type

It would be great to have a Timeline Chart (like below) for plotting boolean values or states across a period of time. I may take a stab at a plug-in, has anyone attempted this or have any tips on where to start?


Author: Fantashit

7 thoughts on “Timeline Chart type

  1. Oh yeah. That was just something showing what it would look like and definitely had lots of issues. Here’s a hopefully better one (https://jsfiddle.net/grugdbcf/) – still doesn’t have proper tooltips and its mostly a hack.


    Do you think I should extend the horizontalBar or create a new chart type?

    You could create a new chart type by extending horizontalBar – the methods you’d probably have to override is calculateBarBase and ‘calculateBarX`.

  2. First let me thank you guys for this awesome library.
    Since in my company there was a need to create a TimeLine i decided to use your library to create a a new type of graph.

    Here’s the fiddle with the chart created https://jsfiddle.net/lenyy/2e0u7u3k/

    So thanks to @tuckwat initiative and @potatopeelings hack i was able to create a new chart type, and so i have three questions:

    1. Would you like me to polish the timeLine graph so that you can distribute with charts, as you like it, being a sample or a new chart to add to the core.
    2. In the current design that i made for the chart i have to override a lot of functions from the rectangle because of the way i calculate the bar position and the tooltip itself, so the question really is if i should extend the rectangle element or leave it just like it is? If you have a better way to get the axes postions (x and y) and maintain the order of the rectangle element, then i ask for help 😀 .
    3. I’ve wondering around the base option for this kind of chart, i still can’t imagine properly how to fit the base concept here, if you can help enlighten me in the subject would be awesome.

    The future objective is to build this chart type with your plugin for pan and zoom built-in, because in my view this is used to represent dates, and i want to support more than one year in the data so a good way for the users to view the timeLine is to add support for pan and zoom plugin.

    Any doubt about the code don’t hesitate.

    Thanks again and sorry if this wasn’t the place to ask this, but i asked here because of the label assigned to this issue.


  3. Hey, what’s the current status on adding a chart of type “Timeline”? We’re currently using GoogleCharts, but it has many limitations at the moment, so would like to consider ChartsJS as we’re also thinking about it’s usage elsewhere. Lots of discussion here, but not sure where it’s at other than nice looking JSFiddle hacks, rather than something in this codebase for Timeline? Cheers.

  4. Hey @fanthos, I really like your plugin, well done!

    Can you provide a JSFiddle example for this? And is possible use this with Chartjs v 2.7.x?

    Thanks in advance!


Comments are closed.