cal-heatmap v4 で tooltip が表示されないときの対象方法

• 概要
• 環境
• 対処方法
• 最後に

概要

高さがかなりあるサイトやスクロールバーが表示されるケースでなぜかツールチップが表示されない現象が確認できました
対処方法を紹介します

環境

• macOS 14.0
• nginx 1.25.2
• cal-heatmap 4.2.3

対処方法

placement: 'auto' を指定します
例えば以下のように cal.paint で指定します

  cal.paint({
    data: {
      source: calData,
      x: 'date',
      y: 'value',
      defaultValue: 0,
    },
    domain: { type: 'month' },
    subDomain: { type: 'day' },
    range: 20,
    date: {
      locale: 'ja',
      timezone: 'Asia/Tokyo',
      start: start,
    },
    scale: {
      color: {
        scheme: 'OrRd',
        type: 'linear',
        domain: [0, 3150],
      },
    },
  }, [[Tooltip, { enabled: true, placement: 'auto' }], [Legend, { enabled: true, width: 1000 }]]);

最後に

内部的には popper を使っているので https://popper.js.org/docs/v2/constructors/#options のオプションが全部使えます