如何在Chart.js中垂直对齐底部图例？

单独设置options.legend.orientation: 'vertical'不生效，大概率是因为缺少位置配置，或是你使用的Chart.js版本不同导致配置路径错误，以下是对应解决方案：

针对Chart.js v2版本 #

需要同时指定图例的position为right或left，垂直排列的配置才会生效，完整示例代码：

new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: {
    labels: ['红色', '蓝色', '黄色'],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
      hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  },
  options: {
    legend: {
      position: 'right', // 指定图例在右侧
      orientation: 'vertical', // 垂直排列
      labels: {
        padding: 15, // 调整标签间距，优化显示
        usePointStyle: true // 用点样式替代默认方块，贴合示例图风格
      }
    }
  }
});

针对Chart.js v3及以上版本 #

v3+版本重构了配置结构，图例配置需要放在options.plugins.legend下，示例代码：

new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: {
    labels: ['红色', '蓝色', '黄色'],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  },
  options: {
    plugins: {
      legend: {
        position: 'right',
        orientation: 'vertical',
        labels: {
          padding: 10,
          usePointStyle: true
        }
      }
    }
  }
});

关键说明 #

• 只有当position设置为right/left时，orientation: 'vertical'才会渲染出垂直排列的侧边图例；如果position是默认的top/bottom，垂直配置不会有明显效果。
• 可以通过调整labels.padding控制垂直方向的标签间距，让显示更贴合你需要的效果。

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