CODEWITHSUNDEEP
javascriptchart.js
Gabriel
Gabriel

Reputation: 61

Chartjs - Set start and end value into a Bar Chart

I am working on drowing a Gantt diagram like on Chartjs.

What am I trying to do is painting and HorizontalBarChart with time type, as a mixed type where I set a min value for each bar, however seems it does not work.

My code:

new Chart(document.getElementById("customChart"), {
    type: 'horizontalBar',

        data: {
            labels: ['Item 1', 'Item 2'],
            datasets: [
                {
                    type: 'horizontalBar',
                    label: 'Bar Component1',
                    data: [new Date(2017,02,26) ],
                    options:{
                        scales:{
                            xAxes: [{

                                  type: 'time',
                                  unit: 'day',
                                  unitStepSize: 1,
                                time: {
                                    displayFormats: {
                                       'day': 'YYYY-MM-DD'
                                    },
                                    min: new Date(2017,03,24)
                                }
                            }]
                        }
                    }
                },
                {
                    type: 'horizontalBar',
                    label: 'Bar Component2',
                    data: [new Date(2017,02,14)],
                    options:{
                        scales:{
                            xAxes: [{

                                  type: 'time',
                                  unit: 'day',
                                  unitStepSize: 1,
                                time: {
                                    displayFormats: {
                                       'day': 'YYYY-MM-DD'
                                    },
                                    min: new Date(2017,02,10)
                                }
                            }]
                        }
                    }
                }
            ]
        }

});

Is there any workaround in order to implement this? Should I use another library?

Upvotes: 2

Views: 7095

Answers (3)

uminder
uminder

Reputation: 26170

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.

enter image description here

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>

Upvotes: 1

Mich Stress
Mich Stress

Reputation: 11

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

Upvotes: 1

jordanwillis
jordanwillis

Reputation: 10705

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.

Upvotes: 1

Related Questions