A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Use them with or without Apex Chart in any project.

<div id="apex-timeline-chart"></div>
<script >
    import ApexCharts from 'apexcharts'

    $(document).ready(function() {
        var options = {
            chart: {
                height: 350,
                type: 'rangeBar',
                toolbar: {
                    show: false,
                }
            },        
            plotOptions: {
                bar: {
                    horizontal: true,                
                }
            },
            colors: ['#2f4858', '#52616B'],

            series: [{
                name: 'Bob',            
                data: [{
                    x: 'Design',
                    y: [new Date('2019-03-02').getTime(), new Date('2019-03-03').getTime()]
                }, {
                    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-07').getTime()]
                }, {
                    x: 'Deployment',
                    y: [new Date('2019-03-11').getTime(), new Date('2019-03-12').getTime()]
                }]
            }, {
                name: 'Joe',
                data: [{
                    x: 'Design',
                    y: [new Date('2019-03-01').getTime(), new Date('2019-03-02').getTime()] 
                }, {
                    x: 'Code',
                    y: [new Date('2019-03-03').getTime(), new Date('2019-03-07').getTime()] 
                }, {
                    x: 'Test',
                    y: [new Date('2019-03-06').getTime(), new Date('2019-03-09').getTime()]
                }, {
                    x: 'Deployment',
                    y: [new Date('2019-03-10').getTime(), new Date('2019-03-11').getTime()]
                }]
            }],
            yaxis: {
                min: new Date('2019-03-01').getTime(),
                max: new Date('2019-03-14').getTime()
            },
            xaxis: {
                type: 'datetime'
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'light',
                    type: "vertical",
                    shadeIntensity: 0.25,
                    gradientToColors: undefined,
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [50, 0, 100, 100]
                }
            }
        }

        var chart = new ApexCharts( document.querySelector("#apex-timeline"), options ); chart.render();
    });

</script>