I'm working with chart.js and need to make a legend on horizontalBar, but isn't working because my data have 5 values and on legend label is showing only one and the value is "undefined", this undefined value control all chart colors.

Here is my code:

```js
horizontalMeters = new Chart("chartHorizontalBar", {
    type: "bar",
    data: {
      labels: ["red", "blue", "green"],
      datasets: [{
        backgroundColor: ["red", "blue", "green"],
        data: [123, 321, 213]
      }]
    },
    options: {
      indexAxis: 'y',
      plugins: {
        legend: {
          display: true,
          position: "right",
        }       
      },
    }
  });
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"
    integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js"
    integrity="sha512-+UYTD5L/bU1sgAfWA0ELK5RlQ811q8wZIocqI7+K0Lhh8yVdIoAMEs96wJAIbgFvzynPm36ZCXtkydxu1cs27w=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<canvas id="chartHorizontalBar"></canvas>
```

I'm using chart.js v3.7 and a datalabels plugin v2.0, i don't know if this plugin and version have a conflict, but i make a Doughnot Chart with the same CDN's and that one works

The code:

```js
doughnotQualities = new Chart("chartDoughnutBar", {
    type: "doughnut",
    data: {
      labels: ["red", "blue", "green"],
      datasets: [{
        backgroundColor: ["red", "blue", "green"],
        data: [123, 321, 213]
      }]
    },
    options: {
      plugins: {
        legend: { 
          display: true, 
          position: "right"
        },
      },
    }
  });
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"
    integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js"
    integrity="sha512-+UYTD5L/bU1sgAfWA0ELK5RlQ811q8wZIocqI7+K0Lhh8yVdIoAMEs96wJAIbgFvzynPm36ZCXtkydxu1cs27w=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<canvas id="chartDoughnutBar"></canvas>
```

That's the difference between charts:
[![enter image description here](https://i.stack.imgur.com/7TulD.png)](https://i.stack.imgur.com/7TulD.png)

[![enter image description here](https://i.stack.imgur.com/C2uRG.png)](https://i.stack.imgur.com/C2uRG.png)

Does anyone know how to solve this?