title: Horizontal floating bars with a time y-axis in Chart.js
body: <p>I'm trying to adapt <a href="https://www.chartjs.org/docs/latest/samples/bar/floating.html" rel="nofollow noreferrer">https://www.chartjs.org/docs/latest/samples/bar/floating.html</a> to create a kind of timeline chart, where the horizontal axis (the range data) are timestamps. Unfortunately I can't seem to get the data to display, and don't see any error messages, etc.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/moment@^2&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js@^3&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div&gt;
    &lt;canvas id=&quot;myChart&quot;&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
  
  //const labels = [&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;,&quot;fff&quot;,&quot;g&quot;,&quot;h&quot;]
  const labels = [&quot;a&quot;,&quot;b&quot;]
  const data = {
    labels: labels,
    datasets: [
      {
        label: 'Dataset 1',
        data: [[moment(&quot;2021-11-23T00:24:14Z&quot;),moment(&quot;2021-11-23T00:34:03Z&quot;)],
            [moment(&quot;2021-11-23T00:24:14Z&quot;),moment(&quot;2021-11-23T00:26:35Z&quot;)]]
        // This works fine (without 'yAxes' below):
        //data: labels.map(() =&gt; {
          //return [Math.random(), Math.random()];
        //}),
        //backgroundColor: Utils.CHART_COLORS.red,
      },
  
    ]
  };
  const config = {
    type: 'bar',
    data: data,
    options: {
        yAxes: [{
          type: 'time',
        }],
        indexAxis: 'y',
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: 'Chart.js Floating Bar Chart'
            }
          }
    }
  };
  
  var ctx = document.getElementById(&quot;myChart&quot;).getContext(&quot;2d&quot;);
  new Chart(ctx, config);
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>EDIT</strong>: JSFiddle: <a href="https://jsfiddle.net/r5ypuvks/" rel="nofollow noreferrer">https://jsfiddle.net/r5ypuvks/</a></p>