我有一些基于时间的数据，我想要一个图形表示，并希望使用Chartjs来绘制这个。
数据如下所示：

Time    State   
--------------
7am     up
9am     down
10.45am out
17.35   up

此外，每个"状态"都有自己的颜色，因此在使用条形图时，我会将其用作条形颜色

up =    red
down =  yellow
out =   green

最终的结果，我后是一个简单的一行酒吧，如下图所示...

我想我也许可以使用Chartjs horizontal stacked条形图（https：//www.chartjs.org/docs/latest/charts/bar.html#horizontal-bar-chart）来完成这项工作，但我就是想不出如何让它工作。
一些（不工作的）实验代码如下：

private createChart(): void {
        if (this.chart !== undefined) {
          return;
        }
        Chart.register(BarController, PointElement, Tooltip, Legend, TimeScale, LinearScale, CategoryScale, LinearScale, BarElement);
        const options: ChartOptions = {
          plugins: {
            legend: {
              display: false,
            },
            title: {
              display: false,
            },
          },
          indexAxis: 'y',
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              stacked: true,
              type: 'time',
              display: true,
              // position: 'bottom',
              time: {
                unit: 'minute',
                displayFormats: {
                  minute: 'h:mm a'
                }
              }
            },
            x: {
              stacked: false,
              
             }
          }    
        };
        this.chart = new Chart(this.canvasRef.nativeElement, {
          type: 'bar',
          data: this.chartData,
          options
        });
        this.chart.config.options.scales.y.min = new Date('2023-02-13T06:19:31.842Z').getTime();
         
        const labels = [
          'up',
          'down'
          // 'Dataset 2'
        ];
        
        const d1 = new Date('2023-02-13T06:20:32.842Z').getTime();
        const d2 = new Date('2023-02-13T06:21:33.842Z').getTime();
        this.chartData = {
          labels,
          datasets: [{
            label: 'up',
            data: [{x: 10, y: d1}],
            backgroundColor: 'red',
          },
          {
             label: 'down',
             data: [{x: 20, y: d2}],
              backgroundColor: 'green',
           }
        ]
        };
        this.chart.update();
      }

在上面的例子中，我尝试了标签、x值、y值、数据形状的各种组合，但我甚至只得到了一个空图。
也许这真的不可能（我试图使用错误的组件）。
如何使用chartjs实现这一点？

更新

使用下面@winner_joiner中的示例，我将其副本放在plunkr中，并尝试在x轴中使用时间，但可以看到它仍然没有使用日期作为长度来绘制条形图