如何移除react-chartjs-2折线图顶部显示的空标签块？

问题原因 #

你看到的顶部空块是Chart.js默认渲染的图例（Legend），即便把数据集的label设为空字符串，图例容器依然会保留，只是没有内容，所以出现了空占位块。

解决方案 #

在图表的options配置中添加图例控制项，将其display设为false，彻底关闭图例渲染即可：

修改后的linedata对象 #

let linedata = {
  data: {
    labels: currData.total_visits.label.slice(0, currData.total_visits.data.length),
    datasets: [
      {
        data: currData.total_visits.data,
        cubicInterpolationMode: 'monotone',
        borderColor: '#7166F9',
        label: '',    
      }
    ]
  },
  options: {
    responsive: true,
    // 添加此配置关闭图例
    legend: {
      display: false
    },
    scales: {
      y: {
        max: 40000000,
        grid: {
          display: false,
        },
        beginAtZero: true,
        ticks: { 
          callback: function(value, index, ticks) {
            return value % 10000000 === 0 ? Number(value).toLocaleString('en-US') : ''
          }
        }
      },
    },
    title: false,
    pointBorderWidth: 0,
    hoverBorderWidth: 3,
    hoverRadius: 5,
    radius: 0,
    pointHitRadius: 4,
    pointBorderColor: 'white',
    pointBackgroundColor: '#7166F9',
    label: '',           
    title: ''   
  }
}

额外说明 #

如果后续需要自定义图例样式而非完全关闭，也可以在legend配置中调整position、labels等属性，但当前场景下直接关闭图例就能解决空块问题。

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