Can Chart.js Horizontal bar work with time series data?

I am trying to develop a stacked bar graph based on time series data. The data is representing the running of a machine logged to Influx.

Looking about I have not seen this done and cannot seem to get my data to line up correctly to make the stacked bar chart. Essentially I want to show one color for running and one for not running. This isn’t an issue as this can be changed programmatically.

However, the issue I seem to be facing is possible more of a configuration issue. I would expect the time series adaptor to automatically align my data up with how it would correspond in my dataset.

See my example so far. To clarify, I am using the latest Chart.js at time of writing 3.7

const data = {
  labels: ["Label 1"],
  datasets: [{
    label: "Testing",
    data: [{
        x:  moment().valueOf(),
      y: moment().valueOf()
    }],
    backgroundColor: "red"
  },
  {
    label: "Testing",
    data: [{
        x:  moment().add(1, 'day').valueOf(),
            y: moment().add(1, 'day').valueOf()

    }],
    backgroundColor: "blue"
  }]
};
const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        ticks: {
                beginAtZero: true
            },
        stacked: true,
        type: 'time',
        time: {
            unit: 'day',
          unitStepSize: 6
        }
      },
      y: {
        stacked: true
      }
    }
  }
};

new Chart("myChart", config)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>

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

Any point in the correct direction would be most beneficial. I will also answer any queries to clarify my though process on the config also.

Answer

The problem is that Date represents milliseconds since 1 January 1970 UTC. Therefore you need to define the start date to see only the period of interest. This can be done by adding the min option to the x-axis as follows:

min: moment().startOf('day').subtract(1, 'day') 

You should also use moment().startOf('day') when defining your data. That way, the ticks on the x-axis will be correctly positioned.

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

const data = {
  datasets: [{
      label: "Testing",
      data: [{
        x: moment().startOf('day'),
        y: 0
      }],
      backgroundColor: "red"
    },
    {
      label: "Testing",
      data: [{
        x: moment().startOf('day').add(1, 'day'),
        y: 0
      }],
      backgroundColor: "blue"
    }
  ]
};
const config = {
  type: 'bar',
  data,
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          title: () => ''
        }
      }
    },
    indexAxis: 'y',
    scales: {
      x: {      
        stacked: true,
        type: 'time',
        time: {
          unit: 'day'
        },
        min: moment().startOf('day').subtract(1, 'day')
      },
      y: {
        stacked: true
      }
    }
  }
};

new Chart("myChart", config)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>

<canvas id="myChart" height="90"></canvas>