Chart.js折线图无需鼠标悬停在固定datalabel位置触发默认on-canvas tooltip是否可行？

可以实现无需鼠标悬停，在指定datalabel位置固定展示Chart.js默认的on-canvas tooltip，核心是通过手动触发Tooltip的渲染API实现，具体操作如下：

1. 基础配置调整 #

首先修改Tooltip基础配置，关闭默认的鼠标交互触发逻辑：

const lineChartConfig = {
  type: 'line',
  data: {/* 你的数据集配置 */},
  options: {
    plugins: {
      tooltip: {
        enabled: true,
        // 开启手动触发模式，不受鼠标操作影响
        trigger: 'manual',
        // 可自定义positioner函数调整位置，对齐datalabel
        position: 'nearest',
        // 清空默认触发事件，避免鼠标交互隐藏固定Tooltip
        events: []
      }
    }
  }
}

2. 主动渲染指定点位的Tooltip #

通过自定义插件的afterRender钩子，主动激活指定数据点的Tooltip并固定渲染：

const lineChartConfig = {
  // ...上面的基础配置
  plugins: [{
    id: 'fixedTooltipPlugin',
    afterRender: (chart) => {
      const tooltip = chart.tooltip;
      // 配置要固定显示的数据点：datasetIndex为数据集索引，index为数据点在数据集中的索引
      const targetPoint = [{
        datasetIndex: 0,
        index: 2 // 替换为你需要显示Tooltip的datalabel对应数据点索引
      }];
      // 绑定要显示的点位坐标
      tooltip.setActiveElements(targetPoint, {
        x: chart.data.datasets[0].data[2].x,
        y: chart.data.datasets[0].data[2].y
      });
      // 主动触发更新，完成渲染
      chart.update();
    }
  }]
}

注意事项 #

• 原生Chart.js默认Tooltip一次仅支持显示一个点位的内容，如需同时固定显示多个点位的Tooltip，需搭配官方plugin-multitooltip插件扩展
• 如需Tooltip和对应datalabel位置完全对齐，可以自定义options.plugins.tooltip.positioner函数，返回和datalabel一致的坐标参数即可
• 以上代码适配Chart.js 3.x/4.x版本，2.x版本API存在差异，需对应调整触发逻辑

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