Chart.js图例标签点样式无法同时调整宽高问题

我使用以下Chart.js配置生成图表：

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'bottom',
      labels: {
        usePointStyle: true,
        pointStyle: 'circle',
        // fontSize: 2,
        // boxWidth: 6,
        // pointStyleWidth: 10,
        template: {
          maxWidth: 10,
        },
      },
    },
    title: {
      display: false,
    },
  },
}
const data = {
  labels: ['电商', '企业', '黄色', '绿色', '紫色'],
  datasets: [
    {
      label: '投票数',
      data: [12, 19, 3, 5, 3],
      backgroundColor: ['#C07CC3', '#9C3848', '#9DDBAD', '#ADA8B6', '#606EDA'],
      borderWidth: 1,
    },
  ],
}

初始图表效果（图例点为默认尺寸）：

我希望缩小图例中的圆点，但取消注释pointStyleWidth属性后，只有点的宽度变小，高度仍保持不变，效果如下：

解决方案 #

要让图例圆点整体等比例缩小，不能仅设置pointStyleWidth，需要搭配调整相关属性或自定义图例渲染逻辑：

方案1：调整配合属性实现等比例缩放

通过同步设置fontSize、boxWidth和pointStyleWidth，让点的宽高匹配：

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'bottom',
      labels: {
        usePointStyle: true,
        pointStyle: 'circle',
        fontSize: 12, // 调整字体大小，约束图例项的整体高度
        boxWidth: 8, // 设置图例项的容器宽度
        pointStyleWidth: 8, // 让点的宽度与高度一致
      },
    },
    title: {
      display: false,
    },
  },
}

方案2：自定义图例生成逻辑（更灵活）

通过generateLabels方法直接控制图例点的宽高，实现精准缩放：

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'bottom',
      labels: {
        usePointStyle: true,
        generateLabels: (chart) => {
          return chart.data.datasets.map((dataset, index) => ({
            text: chart.data.labels[index],
            fillStyle: dataset.backgroundColor[index],
            strokeStyle: dataset.backgroundColor[index],
            lineWidth: dataset.borderWidth,
            pointStyle: 'circle',
            pointStyleWidth: 6, // 自定义点宽度
            pointStyleHeight: 6, // 自定义点高度，与宽度一致
          }));
        },
      },
    },
    title: {
      display: false,
    },
  },
}

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