ChartJS y Labels on max value

r55awzrz  于 2023-11-18  发布在  Chart.js
关注(0)|答案(1)|浏览(155)

我是ChartJS v4.4.0的新手,我想突出显示y轴上的最大值


的数据
在本例中,我希望y轴上的“19”值为红色和粗体。
我该怎么做?
谢谢JeLeB

fv2wmkja

fv2wmkja1#

自定义特定点元素的概念类似于@LeeLenalee关于是否可以为每个数据集的ChartJS气泡图的元素更改pointStyle的答案。
您需要为backgroundColorradius值覆盖options.elements.point
1.从数据集中获取最大值。

let maxValue = [...dataset1, ...dataset2].sort((a, b) => b - a)[0];

字符串
1.定义当point元素的值为maxValue时,覆盖其值的实现。否则,使用默认值。

options: {
  elements: {
    point: {
      backgroundColor: (ctx) =>
        ctx.raw == maxValue
              ? 'red'
              : Chart.defaults.elements.point.backgroundColor,
      radius: (ctx) =>
        ctx.raw == maxValue ? 5 : Chart.defaults.elements.point.radius,
    }
  }
}


x1c 0d1x的数据

更新

误解了你的问题,你希望在y轴上设置红色和粗体的刻度标签,但不使用最高值设置点元素的样式。
您应该覆盖scales.y.ticks.colorscales.y.ticks.font.weight的值。

scales: {
  y: {
    max: maxValue,
    ticks: {
      color: (ctx) =>
        ctx.tick.value == maxValue ? 'red' : Chart.defaults.color,
      font: {
        weight: (ctx) =>
          ctx?.tick?.value == maxValue ? 'bold' : 'normal',
      }
    }
  }
}



Demo @ StackBlitz

相关问题