Chart.js虚线系列的图例方块边框为点状，如何设置为统一实线边框？

你遇到的图例边框样式不一致问题，原因是Chart.js默认会将数据集的边框样式（包括虚线属性borderDash）继承到对应图例的方块上，因此虚线系列的图例边框自动变为点状/虚线样式。

问题现象：

期望效果：

你可以通过generateLabels回调配置统一所有图例边框为实线，适配你使用的版本选择对应配置即可：

适配Chart.js v2.x版本（你当前使用的配置语法版本） #

修改你的图例配置如下即可：

legend: {
  display: true,
  labels: {
    fontSize: 10,
    boxWidth: 10,
    // 新增以下配置统一图例边框为实线
    generateLabels: function(chart) {
      // 调用默认逻辑生成原始图例标签
      const originalLabels = Chart.defaults.global.legend.labels.generateLabels(chart);
      originalLabels.forEach(label => {
        // 清空虚线配置，强制为实线
        label.borderDash = [];
      });
      return originalLabels;
    }
  }
}

适配Chart.js v3/v4版本 #

v3之后版本的配置层级调整到plugins.legend下，配置示例：

options: {
  plugins: {
    legend: {
      display: true,
      labels: {
        font: {
          size: 10
        },
        boxWidth: 10,
        generateLabels: (chart) => {
          const originalLabels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
          originalLabels.forEach(label => {
            label.borderDash = [];
          });
          return originalLabels;
        }
      }
    }
  }
}

配置修改后所有图例的方块边框都会统一为实线样式，和你期望的效果一致。

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