[Chartjs]-Chartjs – Set start and end value into a Bar Chart

Unfortunately, there is no way to configure chart.js to produce a gantt chart because each dataset that you plot on the graph either starts at the origin (the min value set on the scale) or is stacked right on top of each other. You cannot configure a chart to stack bars but show them in different “lanes” (which is what a gantt chart would require).

Even if you try to create multiple scales (which is looks like you are attempting), it will not work because the 2nd bar will still start at the origin (however the 2nd scale’s origin would be the min value you specified). In other words, both bars will still touch the y axis.

You had several problems with you chart.js configuration. First, you cannot define scale config in a dataset. Second, you tried to use several time scale options, but they must be inside the time object.

I cleaned up everything just so you can see how to correctly define a chart. Here is a codepen demonstrating this.

Currently [November 2018] chart.js is not able todo so.

However if you are willing to apply a patch, there is a pull request pending, which would implement exactly this feature: https://github.com/chartjs/Chart.js/pull/5262

For my purposes I adapted the code of https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.bar.js

@@ -453,10 +453,12 @@ module.exports = function(Chart) {

                        helpers.canvas.clipArea(chart.ctx, chart.chartArea);

-                       for (; i < ilen; ++i) {
-                               if (!isNaN(scale.getRightValue(dataset.data[i]))) {
-                                       rects[i].draw();
-                               }
+                       if (dataset.label != 'noshow') {
+                               for (; i < ilen; ++i) {
+                                       if (!isNaN(scale.getRightValue(dataset.data[i]))) {
+                                               rects[i].draw();
+                                       }
+                               }
                        }

                        helpers.canvas.unclipArea(chart.ctx);

Utilizing bar chart like this:

    var gapdemo= new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: ["todo1", "todo2", "todo3", "todo4"],
            datasets: [{
                type: 'horizontalBar',
                label: 'noshow',
                data: [1,2,4,3],
            },{
                type: 'horizontalBar',
                label: 'showme',
                data: [3,2,2,1],
            },{
                type: 'horizontalBar',
                label: 'noshow',
                data: [1,5,3,4],
            },{
                type: 'horizontalBar',
                label: 'showme',
                data: [2,2,1,4],
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    id: 'x-axis-1',
                    stacked: true
                }],
                yAxes: [{
                    id: 'y-axis-1',
                    stacked: true,
                    ticks: {beginAtZero: true}
                }]
            }                
        }
    });

This results in a chart like that:
barchart with gaps

Since version 2.9.0, Chart.js supports floating bars. Individual bars can now be specified with the syntax [min, max].

This makes it possible to draw a Gantt chart.

var dates = [new Date("2019-12-24"), new Date("2019-12-26"), new Date("2019-12-30"), new Date("2020-1-2"), new Date("2020-1-4"), new Date("2020-1-9"), new Date("2020-1-10") ];

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'horizontalBar',
   data: {
      labels: dates.map((d, i) => "Task " + i).splice(1),
      datasets: [
        {
          label: 'Tasks',
          data: dates.map((d, i) => i == 0 ? null : [dates[i - 1], d]).slice(1),
          backgroundColor: 'lightblue',
          borderWidth: 1
        }
      ]
   },
   options: {
      responsive: true,
      scales: {
         xAxes: [{
            type: 'time',
            time: {
               displayFormats: {
                  day: 'YYYY-MM-DD'
               }
            },
            ticks: {            
               min: dates[0].getTime(), 
               max: dates[dates.length - 1].getTime()
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>