Chart.js图例长标签被截断，如何压缩图表适配标签？

• 启用图例标签自动换行
  开启标签自动换行功能，设置最大宽度让超长标签自动折行，避免横向截断：

  options: {
    legend: {
      labels: {
        wordWrap: {
          enabled: true,
          maxWidth: 150 // 可根据实际需求调整宽度阈值
        }
      }
    }
  }
  

• 让图表布局自适应图例空间
  关闭固定宽高比，让图表自动压缩自身区域以适配右侧图例，同时配合布局padding预留空间：

  options: {
    maintainAspectRatio: false,
    layout: {
      padding: {
        right: 30 // 按需调整右侧内边距
      }
    },
    legend: {
      position: 'right',
      align: 'center'
    }
  }
  

  关闭maintainAspectRatio后，图表会根据容器和图例的实际空间动态调整尺寸，不再保持固定比例。

• 自定义图例渲染（灵活控制样式）
  通过自定义图例渲染逻辑，完全控制标签的换行、宽度等样式：

  plugins: {
    legend: {
      render: function(chart) {
        const legendList = document.createElement('ul');
        chart.data.datasets[0].data.forEach((_, index) => {
          const item = document.createElement('li');
          // 创建颜色标识点
          const dot = document.createElement('span');
          dot.style.display = 'inline-block';
          dot.style.width = '12px';
          dot.style.height = '12px';
          dot.style.borderRadius = '50%';
          dot.style.backgroundColor = chart.data.datasets[0].backgroundColor[index];
          dot.style.marginRight = '8px';
          
          // 创建标签文本，强制换行
          const labelText = document.createTextNode(chart.data.labels[index]);
          item.appendChild(dot);
          item.appendChild(labelText);
          item.style.maxWidth = '160px';
          item.style.wordBreak = 'break-word';
          item.style.padding = '4px 0';
          
          legendList.appendChild(item);
        });
        return legendList;
      }
    }
  }
  

  这种方式能针对超长标签做更细致的样式适配。

• 调整容器CSS适配空间
  给图表容器设置合适的宽度或允许横向滚动，确保图例和图表有足够展示空间：

  .chart-container {
    width: 100%;
    min-width: 600px;
    overflow-x: auto;
  }
  

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