Tooltip looks incorrect on stacked bar chart with sparse times

[FlukeFan]

Expected Behavior

Attempting to stack values on a bar chart, where the data x value has sparse time values.

The chart draws correctly I think, but the tooltip is not correct when hovering the mouse over the chart.
The data for 1st May should total 30 (10 + 20);
The data for 2nd May should total 50 (20 + 30);
The data for 5th May should total 40 (10 + 30).

The tooltip should show the combined stacked values when hovered over.

Current Behavior

The tooltip is showing incorrect values when hovering over a stacked-bar:

(The x-axis labels also look a little suspect, it's missing the first label - so I'm curious if I'm doing something wrong here?):

Steps to Reproduce

got to: https://jsfiddle.net/ajgqkvcf/1/
Hover over the first (or any) stacked bar, and the tooltip looks incorrect.

Environment

• Chart.js version:
• Browser name and version: chrome 92.0.4515.107
• Link to your project: https://jsfiddle.net/ajgqkvcf/1/

var ctx = document.getElementById('myChart').getContext('2d');

new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Amount1',
      backgroundColor: '#004c6d',
      data: [{
          x: '2010-05-01T00:00:00Z',
          y: 10
        },
        {
          x: '2010-05-02T00:00:00Z',
          y: 20
        }
      ]
    }, {
      label: 'Amount2',
      backgroundColor: '#b3cce2',
      data: [{
          x: '2010-05-02T00:00:00Z',
          y: 30
        },
        {
          x: '2010-05-05T00:00:00Z',
          y: 10
        }
      ]
    }, {
      label: 'Amount3',
      backgroundColor: '#547c9a',
      data: [{
          x: '2010-05-01T00:00:00Z',
          y: 20
        },
        {
          x: '2010-05-05T00:00:00Z',
          y: 30
        },
      ]
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        stacked: true,
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'YYYY-MMM-DD'
          }
        }
      },
      y: {
        stacked: true,
      }
    }
  }
});

[LeeLenaleee]

Setting a different tooltip mode resolves your issue: https://jsfiddle.net/Leelenaleee/8oLgvu41/1/
Since it defaults to index it seems wrong

[FlukeFan]

Oh perfect, thanks - I hadn't seen that option.

So is the default behaviour correct? (i.e., this isn't a bug?)

[FlukeFan]

(btw, I tried mode: 'point', and that seems much closer to what I'm after - thanks again.)

[LeeLenaleee]

No the behaviour itself is not a bug since its taking the index in the data array so even though its linked to a different label its at the same index in the data array.

[FlukeFan]

OK cool, thanks.

[LeeLenaleee]

@FlukeFan read over the part that first label is not showing, this does seem like a bug so you might want to reopen this issue again or create a new one so its a bit more clear since in the samples it also seems like the first label is missing: https://www.chartjs.org/docs/master/samples/scales/time-max-span.html

[FlukeFan]

@LeeLenaleee thanks - I've opened it as a new issue: #9470

[ex5]

Setting a different tooltip mode resolves your issue

mode: "index" appears to be the only way to display all of the dataset belonging to a single stacked bar, so changing it doesn't seem like a solution at all.
Why is this considered "not a bug"?

[LeeLenaleee]

Because mode index takes the value at the index in the data array so it does not look at the the specific mapping you give in the object notation. If you use mode x it will work as expected

[ex5]

@LeeLenaleee actually, you are right, x appears to do the trick on the latest chart.js >_<