Chartjs-Chart.js timeline [Group for single bar]

by

0👍

✅

You need to define a separate datasets for each floating bar.

Please take a look at your amended code and see how it works.

const data = {
  labels: ["ONLINE", "IDLE"],
  datasets: [{
      label: "Jan 1 - Jan 2",
      data: [["2022-01-01", "2022-01-02"],],
      backgroundColor: "green"
    },        
    {
      label: "Jan 2 - Jan 3",
      data: [,["2022-01-02", "2022-01-03"]],
      backgroundColor: "orange"
    },
    {
      label: "Jan 3 - Jan 4",
      data: [["2022-01-03", "2022-01-04"],],
      backgroundColor: "green"
    },    
    {
      label: "Jan 4 - Jan 5",
      data: [,["2022-01-04", "2022-01-05"]],
      backgroundColor: "orange"
    }
  ]
};

const config = {
  type: "bar",
  data: data,
  options: {
    responsive: true,
    indexAxis: "y",
    scales: {
      x: {
        min: "2022-01-01",
        type: "time",
        time: {
          unit: "day"
        }
      },
      y: {
        stacked: true
      }
    }
  }
};

const myChart = new Chart("myChart", config);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

<div>
  <canvas id="myChart"></canvas>
</div>

Leave a comment