Chart.js v4.3.3气泡图边界气泡被截断，如何不修改min/max实现完整显示

问题 #

使用chart.js": "^4.3.3实现气泡图时，位于坐标轴边界线上的气泡会被截断，要求不修改坐标轴min、max参数的前提下，让边界处的气泡完整显示，效果和Chart.js官网气泡图示例一致。

解决方法 #

给气泡图的数据集添加clip: false配置即可，该设置允许气泡绘制在坐标轴边界之外，同时保留坐标轴的自动刻度计算逻辑（无需手动调整min/max）。

代码示例（以ng2-charts为例） #

修改组件中的图表数据配置：

public bubbleChartData: ChartConfiguration['data'] = {
  datasets: [
    {
      label: '示例数据集',
      data: [
        { x: 10, y: 20, r: 15 },
        { x: 50, y: 50, r: 20 },
        { x: 90, y: 30, r: 25 }
      ],
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      clip: false // 核心配置：关闭图形裁剪
    }
  ]
};

如果需要全局对所有点元素生效，也可以在图表选项中设置：

public bubbleChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  elements: {
    point: {
      clip: false // 全局关闭点元素的裁剪
    }
  },
  scales: {
    x: { type: 'linear', position: 'bottom' },
    y: { type: 'linear' }
  }
};

原理 #

Chart.js默认会裁剪掉超出坐标轴内部绘图区域的图形，设置clip: false后，气泡可以完整绘制在绘图区域之外，同时坐标轴的刻度依然保持自动计算的状态，完全满足需求。

内容的提问来源于stack exchange，提问作者J.Hyun