ChartJS v4.4.0如何高亮Y轴最大值（设置红粗样式）

要在ChartJS v4.4.0中高亮Y轴上的最大值（比如你提到的19），可以通过配置Y轴的ticks选项，利用回调函数判断刻度值并设置对应样式，具体实现如下：

1. 准备数据并计算最大值 #

先定义图表数据，同时算出数据集中的最大值：

// 示例数据集
const chartData = {
  labels: ['一月', '二月', '三月', '四月', '五月'],
  datasets: [{
    label: '示例数据',
    data: [5, 12, 19, 8, 15],
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1
  }]
};

// 计算数据中的最大值（多数据集时，改用flatMap合并所有数据）
const maxYValue = Math.max(...chartData.datasets[0].data);

2. 配置图表并设置Y轴刻度样式 #

在图表配置的scales.y.ticks中，通过font和color回调函数，对最大值刻度单独设置样式：

const chartConfig = {
  type: 'bar', // 根据需求替换为line/bar等图表类型
  data: chartData,
  options: {
    scales: {
      y: {
        ticks: {
          // 自定义刻度颜色：最大值设为红色，其余默认灰色
          color: (context) => context.tick.value === maxYValue ? 'red' : '#666',
          // 自定义字体粗细：最大值设为加粗，其余正常
          font: (context) => ({
            weight: context.tick.value === maxYValue ? 'bold' : 'normal',
            size: 12 // 保持所有刻度字体大小一致
          })
        }
      }
    }
  }
};

// 初始化图表
new Chart(document.getElementById('yourChartId'), chartConfig);

说明 #

• 核心逻辑是利用ticks的回调函数，动态判断当前刻度值是否等于最大值，从而应用差异化样式。
• 若图表包含多个数据集，计算最大值时需合并所有数据集的数据：const maxYValue = Math.max(...chartData.datasets.flatMap(ds => ds.data))。

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