title: Chart.js timeline [Group for single bar]
body: <p>I would like to create a time line like this:
  [1]: <a href="https://i.stack.imgur.com/RQ819.png" rel="nofollow noreferrer">https://i.stack.imgur.com/RQ819.png</a></p>
  <p>But I don't understand how to put green into the top bar and yellow into the bottom bar.</p>
  <p>This is what I got so far but I don't find anything how to make group  only for one bar.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Set Up
  const labels = ["ONLINE", "IDLE"];
  const data = {
      labels: labels,
      datasets: [
          {
              label: "ONLINE",
              data: [
                  ["2022-01-01", "2022-01-02"],
                  ["2022-01-03", "2022-01-04"],
              ],
              backgroundColor: ["green"],
          },
          {
              label: "IDLE",
              data: [
                  ["2022-01-02", "2022-01-03"],
                  ["2022-01-04", "2022-01-05"],
              ],
              backgroundColor: ["orange"],
          },
      ],
  };
  
  // Config
  const config = {
      type: "bar",
      data: data,
      options: {
          responsive: true,
          indexAxis: "y",
          scales: {
              xAxis: {
                  min: "2022-01-01",
                  type: "time",
                  time: {
                      unit: "day",
                  },
  
                  ticks: {
                      display: false,
                  },
              },
              yAxes: {
                  stacked: true,
                  beginAtZero: true,
              },
          },
      },
  };
  // Render Chart
  const myChart = new Chart(document.getElementById("myChart"), config);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/chart.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div&gt;
      &lt;canvas id="myChart"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>