如何修改Chart.js中鼠标悬停提示标签的字体大小？

你当前代码里禁用了tooltip（tooltips: { enabled: false }），而且这是Chart.js旧版本的配置写法。在v3及以上版本中，tooltip的配置需要放在plugins.tooltip下，同时可以通过font属性直接修改提示框内的字体大小。

修改后的完整代码 #

var ctx = document.getElementById("myChart").getContext("2d");
myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Mouse (97.8 %)', 'Human (2.2 %)'],
    datasets: [{
      data: [1747649, 39589],
      label: 'Nº observations', // 你想要修改的提示标签
      backgroundColor: ['#F7DC6F', '#E59866'],
      borderWidth: 0.5
    }]
  },
  options: {
    layout: {
      padding: {
        bottom: 20
      }
    },
    plugins: {
      title: {
        display: true,
        text: 'Expression data distribution by organism',
        font: {
          family: "Anek Latin",
          size: 35
        }
      },
      legend: {
        display: true,
        position: 'top',
        labels: {
          font: {
            family: "Anek Latin",
            size: 25
          } 
        }
      },
      // 新增/修改tooltip配置
      tooltip: {
        enabled: true, // 开启提示框
        font: {
          family: "Anek Latin",
          size: 20 // 这里设置你需要的字体大小
        },
        // 如果需要单独修改标题或内容的字体，可以拆分配置
        // titleFont: {
        //   size: 22
        // },
        // bodyFont: {
        //   size: 18
        // }
      }
    }
  }
});

关键说明 #

1. 移除了旧版本的tooltips: { enabled: false }，改用plugins.tooltip.enabled: true来开启提示框。
2. 在plugins.tooltip.font中设置size属性，即可统一修改提示框内所有文字的字体大小。
3. 如果需要分别调整提示框标题和内容的字体，可以使用titleFont和bodyFont单独配置（代码中已注释示例）。

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