Horizontal bar Chart. How to adjust to stacked time line?

[Alex]

How to adjust to staked time line?
Data for same labels(Part5, Part5) must showing in one level( serialized)

[ian]

Hi Alex,

You can stack Gannt / horizontalBar timeline charts by adding a second dataset to the Chart.js config and setting yAxes[0].stacked to true.

For example, here is how to add a second horizontal bar for “Part 5”:

  // ...
  data: {
    labels: ['Part 1', 'Part 2', 'Part 3', 'Part 4', 'Part 5', 'Part 6'],
    datasets: [{
      data: [
        [new Date('2021-02-01'), new Date('2021-05-01')],
        [new Date('2021-05-10'), new Date('2021-07-01')],
        [new Date('2021-04-20'), new Date('2021-11-31')],
        [new Date('2021-08-01'), new Date('2021-09-01')],
        [new Date('2021-02-10'), new Date('2021-07-01')],
        [new Date('2021-07-20'), new Date('2021-11-31')],
      ],
      backgroundColor: ['rgba(255, 99, 132, 1.0)', 'rgba(255, 99, 132, 1.0)', 'rgba(255, 206, 86, 1.0)', 'rgba(255, 206, 86, 1.0)', 'rgba(255, 206, 86, 0.2)', undefined],
    }, {
      data: [
        null, null, null, null, null,
        [new Date('2021-01-20'), new Date('2021-05-31')],
      ],
      backgroundColor: [null, null, null, null, null, 'rgba(255, 99, 132, 0.2)'],
    }],
  },
  // ...
  options: {
    scales: {
      yAxes: [{
        stacked: true,
      }],
  // ...

Link to an example Chart.js config in the chart editor.

[Alex]

@ian

stacked: true,

{
type: ‘horizontalBar’,
data: {
labels: [‘Part 1’, ‘Part 2’, ‘Part 3’, ‘Part 4’, ‘Part 5’, ‘Part 6’],

datasets: [{
  data: [
    [new Date('2021-01-01'), new Date('2021-02-01')],
    [new Date('2021-05-10'), new Date('2021-07-01')],
    [new Date('2021-04-20'), new Date('2021-06-21')],
    [new Date('2021-08-01'), new Date('2021-09-01')],
    [new Date('2021-02-10'), new Date('2021-07-01')],
    [new Date('2021-07-20'), new Date('2021-08-31')],
  ],
  
  backgroundColor: ['rgb(255, 99, 132, 1.0)', 'rgba(255, 99, 132, 1.0)', 'rgba(255, 206, 86, 1.0)', 'rgba(255, 206, 86, 1.0)', 'rgba(255, 206, 86, 0.2)', undefined],
},{
data: [
    [new Date('2021-02-03'), new Date('2021-02-21')],
    [new Date('2021-07-10'), new Date('2021-08-01')],
    [new Date('2021-06-29'), new Date('2021-11-31')],
    [new Date('2021-09-02'), new Date('2021-09-31')],
    [new Date('2021-08-10'), new Date('2021-09-01')],
    [new Date('2021-09-20'), new Date('2021-11-31')],
  ],}, ],

},
options: {
legend: {
display: false
},
annotation: {
annotations: [{
type: ‘line’,
mode: ‘vertical’,
scaleID: ‘x-axis-0’,
value: new Date(‘2021-10-30’),
borderColor: ‘red’,
borderWidth: 1,
label: {
enabled: true,
content: ‘Now’,
position: ‘top’
}
}]
},
scales: {
xAxes: [{

    position: 'top',
    type: 'time',
    time: {
      unit: 'month'
    },
    ticks: {
      min: new Date('2021-01-01'),
      max: new Date('2022-01-01'),
    }
  }],
  
},

},
}
Could you please give me working example here to achieve like this

Now it looks like this

I’m already try but cant fide where to write stacked: true
Big thanks!

[ian]

Have a look at the Chart.js Sandbox Editor I linked above for a complete working example. You add stacked: true to options.scales.yAxes[0]

[Alex]

Thank you very much, Ian! Your link helped to me!

[Alex]

And one more question.

1. May be your know how to display label on Bars not on axis?
   
   
2. And to display data label at the start and at the end of each data bar
   
   

[ian]

Hi Alex,

At least #1 can be done with the Chart.js datalabels plugin.

• The Chart.js v2 renderer currently uses 0.7.0. Documentation here
• The Chart.js v3 renderer currently uses 2.0. Documentation here

Use the options object to set the datalabel based on dataset. You can also position the labels using the anchor and align attributes.