Stacked horizontal bar chart where x is time for Apache Echarts

Question

I've been trying for a while to figure out how to correctly plot a chart which consists of a single row, but it can have different values in that row. Above is a simple mock on how it should look like.

How would something like this be done? I've tried it with a bar chart, line chart and custom, but I cannot for the life of me figure this out. If someone could provide me with a simple example, that would be lovely!

After many different tries, this is my last try (using 15 min intervals):

const option = {
  id: "shop_allocation ",
  title: "Stacked Horizontal Bar with Time",
  height: 200,
  dataset: [
    {
      id: "shopData",
      source: [
        {
          from: "2024-12-01T13:15:00.0000000Z",
          to: "2024-12-01T13:30:00.0000000Z",
          bestShop: "Shop 1",
        },
        {
          from: "2024-12-01T13:30:00.0000000Z",
          to: "2024-12-01T13:45:00.0000000Z",
          bestShop: "Shop 2",
        },
        {
          from: "2024-12-01T13:45:00.0000000Z",
          to: "2024-12-01T14:00:00.0000000Z",
          bestShop: "Shop 3",
        },
        {
          from: "2024-12-01T14:00:00.0000000Z",
          to: "2024-12-01T14:15:00.0000000Z",
          bestShop: "Shop 1",
        },
        {
          from: "2024-12-01T14:00:00.0000000Z",
          to: "2024-12-01T14:15:00.0000000Z",
          bestShop: "Shop 1",
        },
        {
          from: "2024-12-01T14:15:00.0000000Z",
          to: "2024-12-01T14:30:00.0000000Z",
          bestShop: "Shop 2",
        },
        {
          from: "2024-12-01T14:30:00.0000000Z",
          to: "2024-12-01T14:45:00.0000000Z",
          bestShop: "Shop 3",
        },
        {
          from: "2024-12-01T14:45:00.0000000Z",
          to: "2024-12-01T15:00:00.0000000Z",
          bestShop: "Shop 1",
        },
        {
          from: "2024-12-01T15:00:00.0000000Z",
          to: "2024-12-01T15:15:00.0000000Z",
          bestShop: "Shop 3",
        },
      ],
    },
  ],
  xAxis: {
    type: "time",
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      type: "bar",
      stack: "total",
      datasetId: "shopData",
    },
  ],
};

Answer 1

The stack property does not work with time axis. Below is an example using value axis and the formatter function. There is also this official example using custom series which might be interesting for you.

Example:

const data = [
  {
    from: '2024-12-01T13:15:00.0000000Z',
    to: '2024-12-01T13:30:00.0000000Z',
    bestShop: 'Shop 1'
  },
  {
    from: '2024-12-01T13:30:00.0000000Z',
    to: '2024-12-01T13:45:00.0000000Z',
    bestShop: 'Shop 2'
  },
  {
    from: '2024-12-01T13:45:00.0000000Z',
    to: '2024-12-01T14:00:00.0000000Z',
    bestShop: 'Shop 3'
  },
  {
    from: '2024-12-01T14:00:00.0000000Z',
    to: '2024-12-01T14:15:00.0000000Z',
    bestShop: 'Shop 1'
  },
  {
    from: '2024-12-01T14:15:00.0000000Z',
    to: '2024-12-01T14:30:00.0000000Z',
    bestShop: 'Shop 2'
  },
  {
    from: '2024-12-01T14:30:00.0000000Z',
    to: '2024-12-01T14:45:00.0000000Z',
    bestShop: 'Shop 3'
  },
  {
    from: '2024-12-01T14:45:00.0000000Z',
    to: '2024-12-01T15:00:00.0000000Z',
    bestShop: 'Shop 1'
  },
  {
    from: '2024-12-01T15:00:00.0000000Z',
    to: '2024-12-01T15:15:00.0000000Z',
    bestShop: 'Shop 3'
  }
];

const minTime = new Date(data[0].from).getTime();
const base = [{
  type: 'bar',
  stack: 'stack',
  data: [[minTime, 0]],
  itemStyle: {color: 'transparent'}
}];
const series = base.concat(data.map((item) => {
  const intervalLength =
    new Date(item.to).getTime() - new Date(item.from).getTime();
  return {
    type: 'bar',
    stack: 'stack',
    data: [[intervalLength, 0]]
  };
}));

option = {
  xAxis: {
    type: 'value',
    min: minTime,
    axisLabel: {
      formatter: function (value) {
        return (new Date(value).toLocaleString())
      }
    }
  },
  yAxis: {
    type: 'category'
  },
  series: series
};