Chart.js 4.4.8缩放时Tooltip不显示，设maintainAspectRatio:true破坏布局

使用Chart.js 4.4.8在flex容器中渲染折线图，初始状态Tooltip显示正常，但浏览器缩小页面时，部分Tooltip停止显示，页面越窄，无法显示的Tooltip越多。部分数据点在未设置maintainAspectRatio: true时无法触发Tooltip。设置maintainAspectRatio: true或responsive: false可修复Tooltip问题，但会导致图表变形，无法适配容器布局。

组件代码 #

<div className="graph-container">
   <Line
                    data={monthSummaryData}
                    options={{
                      scales: {
                        y: {
                          beginAtZero: true,
                          ticks: {
                            callback: (value) => {
                              if (value >= 1000) {
                                return value
                                  .toString()
                                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                              } else {
                                return value.toString();
                              }
                            },
                          },
                        },
                      },
                      // maintainAspectRatio: false,
                      maintainAspectRatio: true
                      plugins: {
                        legend: {
                          display: false,
                        },
                        tooltip: {
                          backgroundColor: "#fff",
                          titleColor: "#000",
                          bodyColor: "#000",
                          callbacks: {
                            label: (context) =>
                              `${monthSummaryData.currencySymbol}` +
                              context.formattedValue,
                          },
                        },
                        datalabels: {
                          display: false,
                        },
                      },
                    }}
                  />
</div>

CSS样式 #

.graph-container {
  width: 100%;
  flex: 1;
  min-height: 250px;
  max-height: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.graph-container:before {
  content: "";
  display: block;
  padding-top: 60%;
}

.graph-container canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

• 设置maintainAspectRatio: true：Tooltip恢复正常，但图表布局损坏
• 设置responsive: false：效果同上
• 调整.graph-container等CSS样式
• 增大pointHitRadius优化hover检测

1. 修复容器尺寸与Chart.js响应式的冲突 #

CSS中通过伪元素padding-top: 60%维持宽高比的方式，结合flex布局会干扰Chart.js的内部尺寸计算，导致Tooltip命中区域偏移。修改容器样式：

.graph-container {
  width: 100%;
  flex: 1;
  min-height: 250px;
  max-height: 300px;
  position: relative;
  /* 移除flex居中样式，避免干扰图表尺寸计算 */
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

/* 移除伪元素的padding-top设置 */
/* .graph-container:before {
  content: "";
  display: block;
  padding-top: 60%;
} */

.graph-container canvas {
  position: relative; /* 改为relative，让Chart.js自行管理尺寸 */
  width: 100% !important;
  height: 100% !important;
}

2. 优化Chart.js配置，兼顾响应式与Tooltip触发 #

开启默认的响应式配置，同时放宽Tooltip触发条件、增大数据点命中半径：

<Line
  data={monthSummaryData}
  options={{
    responsive: true,
    maintainAspectRatio: false, // 允许图表适配容器尺寸
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: (value) => {
            if (value >= 1000) {
              return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            } else {
              return value.toString();
            }
          },
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        backgroundColor: "#fff",
        titleColor: "#000",
        bodyColor: "#000",
        mode: 'index', // 确保hover时关联数据点都能触发Tooltip
        intersect: false, // 允许鼠标在点附近触发Tooltip
        callbacks: {
          label: (context) =>
            `${monthSummaryData.currencySymbol}` + context.formattedValue,
        },
      },
      datalabels: {
        display: false,
      },
    },
    elements: {
      point: {
        hitRadius: 8, // 增大命中半径，提升小屏幕下hover检测灵敏度
        radius: 4, // 保持视觉半径不变
      },
    },
  }}
/>

3. 手动触发重绘（可选） #

若页面缩放后仍存在Tooltip异常，可监听resize事件强制图表重绘：

import { useEffect, useRef } from 'react';

// 组件内添加
const chartRef = useRef(null);

useEffect(() => {
  const handleResize = () => {
    chartRef.current?.resize();
  };

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// 给Line组件绑定ref
<Line ref={chartRef} data={monthSummaryData} options={...} />

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