How to draw a chart like below using chart js

Question

I want to draw a Graph looks like below. i already have chart js library in my project so i can able to draw this graph using chart js

Please advise me How to draw this graph. if not possible with chart js please suggest some other libraries

Answer 1

You can use Highcharts-ng with angular which has a gant chart feature

var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },

            title: {
                text: 'SOTMP Checklist Compliance History'
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {

                categories: ['Category 9',
                             'Category 8',
                             'Category 7',
                             'Category 6',
                             'Category 5',
                             'Category 4',
                             'Category 3',
                             'Category 2',
                             'Category 1'],
                tickInterval: 1,            
                tickPixelInterval: 200,
                labels: {
                    style: {
                        color: '#525151',
                        font: '12px Helvetica',
                        fontWeight: 'bold'
                    },
                   /* formatter: function() {
                        if (tasks[this.value]) {
                            return tasks[this.value].name;
                        }
                    }*/
                },
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Criteria'
                },
                minPadding: 0.2,
                maxPadding: 0.2,
                   fontSize:'15px'

            },

            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ tasks[this.y].name + '</b><br/>' +
                        Highcharts.dateFormat('%m-%d-%Y', this.point.options.from)  +
                        ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); 
                }
            },

            plotOptions: {
                line: {
                    lineWidth: 10,
                    marker: {
                        enabled: false
                    },
                    dataLabels: {
                        enabled: true,
                        align: 'left',
                        formatter: function() {
                            return this.point.options && this.point.options.label;
                        }
                    }
                }
            },

            series: series

        });        

DEMO