Is Chart.js capable of producing this kind of timeline chart

[Sparkalyzer]

Hi,

Is there a way to get recurring events (blue) to display like in the example below?
My code for creating a chart close to what I want is below the example image.

const data012 = {
  labels: ['Active', 'Stopped', 'Interrupted'],
  datasets: [{
    label: 'Active',
    data: [
      [new Date('2022-01-01T00:00'), new Date('2022-01-01T06:00')],
      null,
      null
    ],
    backgroundColor: 'rgba(88,188,116,1)',
    },
    {
    label: 'Stopped',
    data: [
      null,
      [new Date('2022-01-01T06:10'), new Date('2022-01-01T06:30')],
      null
    ],
    backgroundColor: 'rgba(255,172,100,1)',
    },
    {
    label: 'Interrupted',
    data: [
      null,
      null,
      [new Date('2022-01-01T06:00'), new Date('2022-01-01T06:10')]
    ],
    backgroundColor: 'rgba(195,40,96,1)',
    }
  ]
};

const config012 = {
  type: 'bar',
  data: data012,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'top',
      }
    },
    scales: {
      y: {
        stacked: true,
        ticks: {
          callback: function() {
            return null;
          }
        }
      },
      x: {
        type: 'time',
        time: {
          displayFormats: {
            hour: 'hh:mm'
          },
          // Luxon format string
          tooltipFormat: 'DD T'
        },
        min: new Date('2022-01-02T00:00'),
        max: new Date('2022-01-01T00:00')
      }
    }
  }
};

const reportChart01 = new Chart(document.getElementById('reportChart-01'), config012);

[kurkle]

You could use a (thick) line chart instead?

[Sparkalyzer]

@kurkle, Are you able to provide an example?, as I'm getting nowhere.
I have updated my question with a more clear image

[kurkle]

I see you changed the example. My answer was about the first one you posted, where the colors are on separate levels.

But for that kind of chart, I've previously used my matrix type:
https://codepen.io/kurkle/pen/poZvYew

[Sparkalyzer]

Thank you, this should get me on my way.

[Udemology]

@Sparkalyzer, I guess you already have a solution. I did manage to explore the bar chart by playing around with all the options and found something similar in the type bar chart: https://youtu.be/G-uyPkXPmt4 perhaps if needed.

[leehbing]

您好，我是李红兵，您的邮件已收到，谢谢！