如何在Chart.js水平柱状图的每个条形右侧默认显示百分比数值

你需要搭配 Chart.js 官方配套的 chartjs-plugin-datalabels 插件实现该效果，原生配置不支持直接开启条形外侧数值显示，操作步骤如下：

• 安装插件
  包管理器安装执行命令：npm install chartjs-plugin-datalabels，浏览器端直接引入对应插件资源即可。
• 注册插件
  全局注册（所有图表生效）示例：

  import Chart from 'chart.js/auto';
  import ChartDataLabels from 'chartjs-plugin-datalabels';
  Chart.register(ChartDataLabels);
  

  仅当前水平柱状图生效的话，直接将插件传入图表实例的 plugins 配置数组即可。
• 调整图表配置，你原有轴配置保留，新增插件配置即可，完整配置参考：

  const options = {
    indexAxis: 'y', // 水平柱状图必须配置该参数（v3+版本）
    scales: {
      x: {
        min: 0,
        max: 100,
        grid: {
          offset: false
        }
      },
      y: {
        grid: {
          display: false
        },
        position: "right",
        barPercentage: 0.8,
        minBarLength: 2
      }
    },
    plugins: {
      datalabels: {
        anchor: 'end', // 锚点在条形末端
        align: 'start', // 文字在锚点的外侧（水平柱状图下就是条形右侧）
        color: '#000', // 文字颜色可自定义
        formatter: (value) => {
          return `${value}%`; // 按需求格式化百分比格式
        }
      }
    }
  }
  

注：以上配置适配 Chart.js v3/v4 版本，若你使用旧版本需对应调整配置字段命名。

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