Chart.js 3.7.1 如何始终显示tooltip？并实现仅今日日期文本加深

1. 让 Tooltip 始终显示 #

通过配置Tooltip选项并结合插件钩子，可实现Tooltip持续显示：

const chart = new Chart(ctx, {
  type: 'line', // 替换为你的实际图表类型
  data: {
    // 你的数据配置
  },
  options: {
    plugins: {
      tooltip: {
        enabled: true,
        mode: 'index',
        position: 'average',
        trigger: 'none' // 关闭默认触发逻辑
      }
    }
  },
  plugins: [{
    afterInit(chart) {
      // 初始化后立即显示今日数据对应的Tooltip
      const todayIndex = chart.data.labels.indexOf(new Date().toLocaleDateString());
      chart.tooltip.show([{
        datasetIndex: 0,
        index: todayIndex
      }]);
    },
    afterUpdate(chart) {
      // 图表更新后保持Tooltip显示
      if (!chart.tooltip._active) {
        const todayIndex = chart.data.labels.indexOf(new Date().toLocaleDateString());
        chart.tooltip.show([{
          datasetIndex: 0,
          index: todayIndex
        }]);
      }
    }
  }]
});

如果不需要固定显示今日数据的Tooltip，可将index设为你需要默认显示的固定数据点索引。

2. 加深今日日期对应的文本颜色 #

利用X轴ticks的回调函数，对今日标签单独设置样式：

// 确保日期格式与图表labels中的格式一致
const today = new Date().toLocaleDateString();

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['2024-05-20', '2024-05-21', '2024-05-22', '2024-05-23'], // 示例标签
    datasets: [{
      // 你的数据集配置
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback(value, index, values) {
            const label = this.getLabelForValue(value);
            if (label === today) {
              return {
                text: label,
                font: { weight: 'bold' }, // 加粗实现加深效果
                color: '#1a1a1a' // 自定义深色
              };
            }
            return label;
          }
        }
      }
    }
  }
});

注意：需保证today的格式和图表labels中的日期格式完全匹配，否则无法触发样式修改。

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