如何在ChartJS中让数据标签的数值部分加粗？

Chart.js 的 chartjs-plugin-datalabels 本身不原生支持富文本样式，但可以通过以下方式实现需求：

核心实现方式 #

利用插件的 useHTML: true 配置开启 HTML 内容支持，在 formatter 函数中将数值部分用 <strong> 标签包裹，标签部分保持原样。

React 代码修改示例 #

假设你当前的 datalabels 配置如下：

plugins: {
  datalabels: {
    formatter: (value, context) => {
      return `${context.dataset.label}: ${value}`;
    },
    // 其他现有配置
  }
}

修改为：

plugins: {
  datalabels: {
    useHTML: true, // 关键：开启HTML解析
    formatter: (value, context) => {
      // 数值部分用<strong>标签包裹实现加粗
      return `${context.dataset.label}: <strong>${value}</strong>`;
    },
    // 可选：调整基础样式避免冲突
    style: {
      font: {
        size: 12
      }
    }
  }
}

额外注意点 #

• 确保使用的 chartjs-plugin-datalabels 是最新版本，旧版本对 useHTML 的支持可能存在问题
• 如果全局样式影响 <strong> 标签效果，可以自定义类名（比如 <span class="data-num">${value}</span>），再通过 CSS 设置 .data-num { font-weight: 700; }

• 当前使用的 Chart.js 和 chartjs-plugin-datalabels 具体版本号
• datalabels 模块的完整配置代码（包括位置、样式等所有参数）
• 若图片无法正常展示，用文字描述预期效果与实际效果的具体差异
• 是否存在自定义全局 CSS 或 Chart.js 全局配置，可能影响标签样式

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