使用 react-chartjs-2 增加图例和图表之间的填充答案

【问题标题】：Increase padding between legend and chart with react-chartjs-2使用 react-chartjs-2 增加图例和图表之间的填充
【发布时间】：2022-03-26 03:37:13
【问题描述】：

我正在尝试使用reactjs 增加图例标签和图表之间的间距，我已经寻找了不同的解决方案，但大多数都是使用 vanilla js。我已经根据answer在我的图表选项中添加了这个@

  const DoughnutOptions = {
    plugins: [
    {
      beforeInit: function (chart, options) {
        chart.legend.afterFit = function () {
          this.height = this.height + 50;
        };
      }
    },
      {
        labels: {
          render: "percentage",
          fontColor: ["black", "white"],
        },
      },
    ]
   }

  return (
         <Doughnut
            data={DoughnutData}
            options={DoughnutOptions}
          />
       )

但它不起作用，我在这里遗漏了什么吗？

【问题讨论】：

标签： reactjs charts chart.js

【解决方案1】：

关注官方文档：https://www.chartjs.org/docs/latest/configuration/legend.html

尝试像下面的代码示例那样更改填充，这可能会解决您的问题：

    legend: {
          labels: {
            padding: 40 //default is 10
          },
          display: true,
          position: 'bottom',
          align: 'start'
    },

【讨论】：

这会改变图例项之间的空间，而不是图例和图表之间的空间。