Chart.js数据点颜色修改：如何移除边框使数据点为纯色？

直接修改对应数据集的点样式配置即可，核心是调整数据点的填充色和边框参数，有两种常用配置方式：

方式1：针对单个数据集配置 #

仅修改指定折线的点样式，在对应dataset配置项中新增参数即可：

const config = {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
    datasets: [{
      label: '业务数据',
      data: [15, 22, 18, 25, 19, 23],
      // 折线颜色可保留原有配置
      borderColor: '#36a2eb',
      // 1. 设置数据点填充色为你需要的纯色
      pointBackgroundColor: '#36a2eb',
      // 2. 两种方式去掉边框效果二选一即可
      // 方式A：边框色和填充色设为相同
      pointBorderColor: '#36a2eb',
      // 方式B：直接把边框宽度设为0
      // pointBorderWidth: 0,
      
      // 可选配置：hover悬停时也保持纯色效果
      pointHoverBackgroundColor: '#36a2eb',
      pointHoverBorderColor: '#36a2eb'
    }]
  }
}

方式2：全局统一配置 #

如果需要所有折线图的数据点都默认使用纯色样式，直接修改Chart.js全局默认参数即可：

// 全局设置点填充色
Chart.defaults.elements.point.backgroundColor = '#36a2eb';
// 全局去掉点边框
Chart.defaults.elements.point.borderWidth = 0;

效果对比 #

• 当前输出效果：
  
• 期望实现效果：
  

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