Typescript 顶点堆叠的图表条形图未在正确的x轴上显示

我在我的Angular 16应用程序中使用了顶点堆叠条形图.在这里，我在x轴上有4个类别，而条形图没有出现在正确的x轴标签中.

我的API响应数据:

let data = [
      {
        tenantName: 'OBC+',
        labelName: 'Application',
        total: 85,
        postiveTotal: '21',
        negativeTotal: '-64',
      },
      {
        tenantName: 'Discovery-world',
        labelName: 'Application',
        total: 194,
        postiveTotal: '119',
        negativeTotal: '-75',
      },
      {
        tenantName: 'OBC+',
        labelName: 'Channels',
        total: 40,
        postiveTotal: '0',
        negativeTotal: '-40',
      },
      {
        tenantName: 'OBC+',
        labelName: 'Wifi',
        total: 1,
        postiveTotal: '1',
        negativeTotal: '1',
      },
      {
        tenantName: 'Discovery-world',
        labelName: 'Channels',
        total: 59,
        postiveTotal: '0',
        negativeTotal: '-59',
      },
      {
        tenantName: 'Vidocon',
        labelName: 'Test',
        total: 30,
        postiveTotal: '10',
        negativeTotal: '-20',
      },
    ];

请判断上面的图像.API响应此处为tenantName: 'Vidocon'，系列数据未进入正确的x轴标签.

它应该显示在"测试"x轴标签中，但却显示在"应用程序"x轴标签中.

Example Code个