How to Draw Gantt chart - Javascript Chart.js

Javascript examples for Chart.js:Gantt Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Gantt Chart

Description

How to Draw Gantt chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>[STACKOVERFLOW] Gantt Chart using Chart.JS</title> 
      <style>

.graph_container{//from w w  w. ja  va 2 s  .c om
   display:block;
   width:600px;
}


      </style> 
   </head> 
   <body translate="no">   
      <div class="graph_container"> 
         <canvas id="myChart"></canvas> 
      </div>   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> 
      <script>
      var barOptions_stacked = {
    hover :{
        animationDuration:10
    },
    scales: {
        xAxes: [{
            label:"Duration",
            ticks: {
                beginAtZero:true,
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize:11
            },
            scaleLabel:{
                display:false
            },
            gridLines: {
            },
            stacked: true
        }],
        yAxes: [{
            gridLines: {
                display:false,
                color: "#fff",
                zeroLineColor: "#fff",
                zeroLineWidth: 0
            },
            ticks: {
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize:11
            },
            stacked: true
        }]
    },
    legend:{
        display:false
    },
};
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["1", "2", "3", "4"],
        datasets: [{
            data: [50,150, 300, 400, 500],
            backgroundColor: "rgba(63,103,126,0)",
            hoverBackgroundColor: "rgba(50,90,100,0)"
        },{
            data: [100, 100, 200, 200, 100],
            backgroundColor: ['red', 'green', 'blue', 'yellow'],
        }]
    },
    options: barOptions_stacked,
});
// this part to make the tooltip only active on your real dataset
var originalGetElementAtEvent = myChart.getElementAtEvent;
myChart.getElementAtEvent = function (e) {
    return originalGetElementAtEvent.apply(this, arguments).filter(function (e) {
        return e._datasetIndex === 1;
    });
}
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials