Chart.js图例标签未显示dash点样式，显示为线条的问题求助

你的问题出在无效属性使用和图例样式优先级配置上，以下是具体修复方案：

问题根源 #

1. pointStyleWidth并非Chart.js官方配置项，该属性不会生效
2. 折线图图例默认优先渲染线条样式，即便开启usePointStyle，也需调整图例盒子尺寸适配dash点的显示

修复后代码 #

<div>
  <canvas id="myChart"></canvas>
</div>

const ctx = document.getElementById("myChart");

const options = {
  borderWidth: 0,
  plugins: {
    legend: {
      maxWidth: 200,
      labels: {
        usePointStyle: true,
        boxWidth: 20, // 调整该值控制dash点的显示宽度
        pointStyle: 'dash'
      }
    }
  },
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        borderDash: [4,4]
      }
    ]
  },
  options: options
});

关键调整说明 #

• 移除无效的pointStyleWidth属性
• 将boxHeight替换为boxWidth：由于dash是横向点样式，需通过盒子宽度控制其显示范围
• 保留usePointStyle: true：强制图例使用点样式而非默认的线条样式

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