React中Chart.js Doughnut环形图标题与图例位置设置无效问题

核心问题 #

你的配置写法适配的是Chart.js v2版本，但当前使用的react-chartjs-2大概率依赖Chart.js v3+版本，v3+对配置结构做了调整，同时你的图例设置存在矛盾：

1. 配置层级错误：Chart.js v3+中，legend（图例）和title（标题）的配置必须嵌套在plugins对象内，不再是顶级属性。
2. 图例显示开关矛盾：你设置了legend.display: false，这会直接隐藏图例，就算位置设置正确也不会显示。

修正后的代码 #

const chartData = {
  labels: [],
  datasets: [{
    data: [],
    backgroundColor: [
      Colors.primary,
      Colors.secondary,
      Colors.danger,
      Colors.warning
    ],
    hoverBackgroundColor: [
      'rgb(143, 0, 180, 0.3)',
      'rgb(0, 196, 204, 0.3)',
      'rgb(206, 0, 0, 0.3)',
      'rgb(255, 179, 0, 0.3)'
    ],
    hoverOffset: 10
  }]
};

const options = {
  responsive: true,
  plugins: {
    legend: {
      display: true, // 改为true，显示图例
      position: 'right' // 图例位置设为右侧
    },
    title: {
      display: true,
      fontSize: 20,
      text: 'Tickets'
    }
  }
}

<Doughnut 
  data={chartData} 
  options={options}
/>

补充说明 #

• 如果你的react-chartjs-2确实基于Chart.js v2，那只需要把legend.display改成true即可，但现在主流版本都是v3+，建议按上述v3+的配置写法调整。
• 另外注意你的chartData中labels和data数组是空的，实际使用时需要填充对应数据，否则图表无法正常渲染出环形内容。

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