Chart.js折线图自定义Tooltip标签无法换行问题求助

要解决鼠标悬停弹出框（Tooltip）的标签换行问题，核心是让Chart.js识别换行逻辑，有两种可靠方案：

方案1：使用HTML换行（需开启HTML渲染） #

默认情况下Tooltip以纯文本模式渲染，\n不会被解析为换行。只需开启useHTML: true，并将换行符替换为HTML的<br>标签即可：

const chart = new Chart(document.getElementById('your-chart'), {
  type: 'line',
  data: {
    labels: labels, // 你的标签数组
    datasets: [{
      label: '数量',
      data: quantity, // 你的数据集
      borderColor: '#your-color'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        useHTML: true, // 关键配置：启用HTML渲染
        callbacks: {
          // 自定义Tooltip标签内容
          label: function(context) {
            // 用<br>实现换行
            return `数量：${context.parsed.y}<br>订阅：${subscriptions[context.dataIndex]}`;
          }
        }
      }
    }
  }
});

方案2：返回数组自动换行（无需HTML） #

Chart.js的Tooltip标签回调支持返回数组，数组中的每个元素会自动作为单独一行显示，无需额外配置：

const chart = new Chart(document.getElementById('your-chart'), {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: '数量',
      data: quantity,
      borderColor: '#your-color'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            // 返回数组，每个元素对应一行
            return [
              `数量：${context.parsed.y}`,
              `订阅：${subscriptions[context.dataIndex]}`
            ];
          }
        }
      }
    }
  }
});

注意事项 #

• 若使用方案1，需确保Tooltip的HTML内容不会引入样式冲突，也可以通过tooltip.custom自定义完整的HTML结构。
• 两种方案都能解决你的问题，可根据实际需求选择：方案1更灵活（支持复杂HTML样式），方案2更简洁（纯文本场景推荐）。

内容的提问来源于stack exchange，提问作者Ivan