我有一个带Vue 3的Nuxt 3应用程序。我正在使用复合API和typescript。在我的package.json文件中，我有以下依赖项：

{
  ...
  "dependencies": {
    "chart.js": "^4.2.1",
    "vue-chartjs": "^5.2.0",
  }
  ...
}

当图表渲染时，我的y轴标签在移动的视图中被切断。请参见下图。

我的vue组件代码如下：
MovieHorizontalBarChart.vue

<template>
  <div class="chart-container">
    <ClientOnly>
      <Bar :data="data" :options="chartOptions" />
    </ClientOnly>
  </div>
</template>
<script setup lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  ChartOptions,
} from "chart.js";
import { Bar } from "vue-chartjs";
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);
const data = {
  labels: ["Label 1", "Very very very very long name that is cut off"],
  datasets: [
    {
      axis: "y",
      label: "Count",
      backgroundColor: "#000",
      data: [10, 24],
    },
  ],
};
const chartOptions: ChartOptions<"bar"> = {
  responsive: true,
  maintainAspectRatio: false,
  indexAxis: "y",
  plugins: {
    title: {
      display: true,
      text: "Horizontal Bar chart by ChartJS",
      font: { size: 14 },
    },
  },
};
</script>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  height: 25vh;
}
</style>

问题：Very very very very long name that is cut off标签被切断。我如何让我的y轴标 checkout 现在多行上？或者有任何其他方法可以避免标签被切断？
注意：标签是动态的。我不知道每个标签会有多长。每个新的外部API请求都会生成新的值。我的实际标签代码如下：

const data = {
  labels: props.movies.map((movie) => movie.name),
  datasets: [
    {
      axis: "y",
      label: "Count",
      backgroundColor: "#000",
      data: props.movies.map((movies) => movie.count),
    },
  ],
};