Timeline Chart

														
<div id="tline_chart_1"></div>
													

														
<!-- Apex JS -->																														
<script src="vendors/moment/min/moment.min.js"></script>
<script src="vendors/apexcharts/dist/apexcharts.min.js"></script>
<script src="dist/js/timeline-chart-init.js"></script>
/*Basic Chart*/
var options = {
    series: [{
        data: [{
                x: 'Code',
                y: [
                    new Date('2019-03-02').getTime(),
                    new Date('2019-03-04').getTime()
                ]
            },
            {
                x: 'Test',
                y: [
                    new Date('2019-03-04').getTime(),
                    new Date('2019-03-08').getTime()
                ]
            },
            {
                x: 'Validation',
                y: [
                    new Date('2019-03-08').getTime(),
                    new Date('2019-03-12').getTime()
                ]
            },
            {
                x: 'Deployment',
                y: [
                    new Date('2019-03-12').getTime(),
                    new Date('2019-03-18').getTime()
                ]
            }
        ]
    }],
    chart: {
        height: 350,
        type: 'rangeBar'
    },
    plotOptions: {
        bar: {
            horizontal: true
        }
    },
    xaxis: {
        type: 'datetime'
    }
};

var chart = new ApexCharts(document.querySelector("#tline_chart_1"), options);
chart.render();
													

														
<div id="tline_chart_2"></div>
													

														
/*Custom Colors*/
var options1 = {
	series: [{
		data: [{
				x: 'Analysis',
				y: [
					new Date('2019-02-27').getTime(),
					new Date('2019-03-04').getTime()
				],
				fillColor: '#008FFB'
			},
			{
				x: 'Design',
				y: [
					new Date('2019-03-04').getTime(),
					new Date('2019-03-08').getTime()
				],
				fillColor: '#00E396'
			},
			{
				x: 'Coding',
				y: [
					new Date('2019-03-07').getTime(),
					new Date('2019-03-10').getTime()
				],
				fillColor: '#775DD0'
			},
			{
				x: 'Testing',
				y: [
					new Date('2019-03-08').getTime(),
					new Date('2019-03-12').getTime()
				],
				fillColor: '#FEB019'
			},
			{
				x: 'Deployment',
				y: [
					new Date('2019-03-12').getTime(),
					new Date('2019-03-17').getTime()
				],
				fillColor: '#FF4560'
			}
		]
	}],
	chart: {
		height: 350,
		type: 'rangeBar'
	},
	plotOptions: {
		bar: {
			horizontal: true,
			distributed: true,
			dataLabels: {
				hideOverflowingLabels: false
			}
		}
	},
	dataLabels: {
		enabled: true,
		formatter: function(val, opts) {
			var label = opts.w.globals.labels[opts.dataPointIndex]
			var a = moment(val[0])
			var b = moment(val[1])
			var diff = b.diff(a, 'days')
			return label + ': ' + diff + (diff > 1 ? ' days' : ' day')
		},
		style: {
			colors: ['#f3f4f5', '#fff']
		}
	},
	xaxis: {
		type: 'datetime'
	},
	yaxis: {
		show: false
	},
	};

var chart1 = new ApexCharts(document.querySelector("#tline_chart_2"), options1);
chart1.render();