How to create a gantt chart using Chart.js and populate dates?

user_894532 0
Viewed 2049

I am trying to create a gantt chart with Chart.js. I use horizontalBar chart type and this works fine if I populate numbers instead of dates, but it does not render when I pass dates as data.

Data structure: Task, Start Date, End Date

this.chartData = {
  labels: ['Task 1', 'Task 2'],
  datasets: [{
    data: ['2019-01-20', '2019-01-30'],
  }],
};

this.options = {
  title: {
    display: true,
    text: 'Title of Chart',
  },
  legend: {display: false},
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        unit: 'day',
      },
    }],
  },
};

Template:

<chart class="chart" type="horizontalBar" [data]="chartData" [options]="options"></chart>

Tried another example

chart.js angular javascript
1 Answers

You are passing the values as strings. Try to pass as dates:

datasets: [{
      label: 'Demo',
      data: [{
          t: new Date("2015-3-15 13:3"),
          y: 12
        },
user_70620610
Related