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>