Chartjsマウスポインタをあわせたときの縦軸に線を引く設定

how to

必要な設定

graph.vue

import { crosshairPlugin } from '../common/crosshairPlugin'

// Chart.js の設定を初期化
ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  PointElement,
  CategoryScale,
  LinearScale,
  Filler,
  crosshairPlugin,　　　　//今回必要なのはこいつ
)

common配下にpluginを作成（正直場所はどこでもいい）

common/crosshairPulugins.ts

import { type Plugin } from "chart.js";

/**
 * クロスヘアプラグイン
 * マウスオーバー時に、X軸とY軸に沿った線を描画するプラグイン
 * @param {Object} options - オプション
 * @param {Object} options.line - 線の設定
 * @param {string} options.line.color - 線の色
 * @param {number} options.line.width - 線の太さ
 * @param {Array} options.line.dashPattern - 破線のパターン
 * @param {Object} options.sync - 同期設定
 * @param {boolean} options.sync.enabled - 複数のチャート間で同期する場合に使用
 * @param {Object} options.xLine - X軸に沿った線の設定
 * @param {boolean} options.xLine.enabled - X軸に沿った線を描画するかどうか
 * @param {Object} options.yLine - Y軸に沿った線の設定
 * @param {boolean} options.yLine.enabled - Y軸に沿った線を描画するかどうか
 * @returns {Object} プラグイン
 * 
 */
export const crosshairPlugin: Plugin = {
  id: "crosshair",
  defaults: {
    line: {
      color: "rgba(0, 0, 0, 1)",
      width: 1,
      dashPattern: [5, 5],
    },
    sync: {
      enabled: true, // 複数のチャート間で同期する場合に使用
    },
    xLine: {
      enabled: false,
    },
    yLine: {
      enabled: true,
    },
  },
  afterDraw: (chart, _, options) => {
    // getActiveElements() メソッドを使用して、アクティブな要素を取得
    const activeElements = chart.getActiveElements();
    if (!activeElements.length) return;
    const activePoint = activeElements[0];
    const { ctx } = chart;
    const { top, bottom } = chart.chartArea;
    const x = activePoint.element.x;

    // Y軸の線を描画
    if (options.yLine.enabled) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x, top);
        ctx.lineTo(x, bottom);
        ctx.lineWidth = options.line.width;
        ctx.strokeStyle = options.line.color;
        ctx.setLineDash(options.line.dashPattern);
        ctx.stroke();
        ctx.restore();
      }
  },
};