Chart.js图例文本被截断如何解决？如何移除柱状图左右边距

云上老周

2026-7-5

Chart.js 图例文本截断+柱状图左右空白移除方案

一、解决图例文本截断问题

从布局、样式两个维度调整即可：

更换图例位置：把默认的右侧图例移到顶部或底部，横向布局有更宽空间容纳长文本，配置项：legend: { position: 'bottom' }
开启自动换行：设置legend.labels.maxWidth（比如120），超过宽度的文本会自动换行，避免被截断
微调字体与间距：缩小字体大小legend.labels.font.size，或者减小图例项间的padding，给文本腾出显示空间

二、移除柱状图左右两侧空白

核心是调整x轴的偏移与范围设置：

关闭默认偏移：在scales.x中设置offset: false，这个默认值为true，是导致左右空白的主要原因
手动锁定x轴范围：如果是类别型x轴，直接设置scales.x.min: 0、scales.x.max: 数据标签长度-1，让图表从第一个类别边缘开始，到最后一个类别边缘结束
调整刻度内边距：通过scales.x.ticks.padding减小刻度的内边距，避免挤压图表区域

完整配置示例

const myBarChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['月度销售总览', '季度用户增长', '年度利润统计'],
    datasets: [{
      label: '线下渠道',
      data: [45, 62, 88],
      backgroundColor: '#2ecc71'
    }, {
      label: '线上渠道',
      data: [58, 75, 92],
      backgroundColor: '#3498db'
    }]
  },
  options: {
    // 图例配置
    legend: {
      position: 'bottom',
      labels: {
        maxWidth: 120,
        font: {
          size: 12
        },
        padding: 8
      }
    },
    // x轴空白移除配置
    scales: {
      x: {
        offset: false,
        min: 0,
        max: this.data.labels.length - 1,
        ticks: {
          padding: 4
        }
      }
    }
  }
});