Chartjs duration horizontal bar chart

Question

I'm trying to figure out how to approach drawing this chart. It looks like a stacked horizontal bar chart, but I'm having troubles with defining a datasets format for duration intervals. I still haven't found the right way to structure the data source to achieve this result.

Another option could be a line/scatter chart. And the final one is writing custom plugin and drawing this on a canvas manually, shape by shape. I would like to avoid this though :)

Any idea would be really helpful. Thanks!

Thanks for the advice @Aroon! This one looks even better. Noted for the future reference. However, there are a several reasons why it has to be Chart.js at the moment. Please share if you have an idea or snippet that solves this, even partially would be great. — Oddomir
Possible duplicate of: stackoverflow.com/questions/41259441/… — John Go-Soco
It's very good lead actually @JohnGo-Soco! I just learned that this chart is called Gantt's chart :) Thanks! — Oddomir
Some advice - you can use a 'line' chart and when you define the dataset config options, set the spanGaps to false. This way, you can use NaN values to get the gap between two non-contiguous sections of the data. — John Go-Soco

Oddomir Oddomir · Accepted Answer · 2018-11-01T10:15:22

I found the way to work this out with the help of @John Go-Soco. Some very key pieces of the graph config are bellow. In short, each line is a separate dataset with two data points defining a start date and the end date.

const yMap = [ 'amlodipine', 'simvastatin', 'lisinopril' ];

const mapDataPoint = function(xValue, yValue) {
                       return {
                          x: xValue,
                          y: yMap.indexOf(yValue)
                       };
                     };

const config = {
                type: 'line',
                data: {
                    datasets: [
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('1/1/2007', 'simvastatin'),
                                mapDataPoint('6/1/2010', 'simvastatin'),
                            ]
                        },
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('9/1/2010', 'simvastatin'),
                                mapDataPoint('11/1/2018', 'simvastatin'),
                            ]
                        },
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('1/1/2007', 'lisinopril'),
                                mapDataPoint('9/1/2015', 'lisinopril'),
                            ]
                        },
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('1/1/2014', 'amlodipine'),
                                mapDataPoint('11/1/2022', 'amlodipine'),
                            ]
                        },
                    ]
                },
                options: {
                    //other chart config options here
                    scales: {
                        xAxes: [
                            {
                                type: 'time',
                                time: {
                                    unit: 'year',
                                    round: 'day',
                                    displayFormats: {
                                        year: 'YYYY'
                                    },
                                    min: moment('2006', 'YYYY'),
                                    max: moment('2019', 'YYYY')
                                },

                            }
                        ],
                        yAxes: [
                            {
                                 ticks: {
                                    min: -1,
                                    max: yMap.length,
                                    //setting custom labels on the Y-axes
                                    callback: function(value) {
                                        return yMap[ value ];
                                    }
                                }
                            }
                        ]
                    }
                },

            };

const ctx = 'reference to your ctx here';

const chart = new Chart(ctx, config)

Chartjs duration horizontal bar chart

1 Answers