Interaction Modes

更新日: 2019-12-06

hoverやツールチップをグラフに適用し、インタラクションを定義した場合、いくつかのモードを設定することができます。

モードの詳細は下記で説明します。また、intersectとの関係によって、どのように動作するかを記載します。

point

マウスカーソルが重なっている全てのアイテムを表示します。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'point'
        }
    }
})

デモ

"February"にカーソルを合わせると、AとBのツールチップが表示されます。

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'point'
        }
    }
})

HTML

<canvas id="myChart"></canvas>

nearest

最も近いアイテムを表示します。 "最も近いアイテム"は、アイテム(point、bar)の中心からの距離から算出します。もし同じ距離のアイテムが2つ以上ある場合、もっとも範囲が狭いエリアを使用します。 axis設定を指定すると距離算出で利用する方向を指定することができます。 intersectがtrueの場合、マウスがグラフの項目と重なっている場合のみトリガーされます。コンボチャートで、バーの後ろにポイントが隠れてしまっている場合に、とても便利です。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'nearest'
        }
    }
})

デモ

マウスカーソルに近いアイテムのツールチップを表示します。

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'bar',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'nearest',
            intersect: false,
        }
    }
})

HTML

<canvas id="myChart"></canvas>

single(非推奨)

マウスカーソルが重なっているポイントの最初のアイテムを表示します。 intersectがtrueの場合、nearestと似た挙動になります。

label(非推奨)

indexを参照してください。

index

同じインデックスのアイテムを表示します。 intersectがtrueの場合、マウスカーソルが重なったポイントの最初のアイテムを使ってインデックスを決定します。 intersectがfalseの場合、 X方向に一番近いアイテムを使ってインデックスを決定します。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'index'
        }
    }
})

横棒グラフのようなチャートでindexモードを使うには、Y方向に検索する必要があります。 v2.7.0.から導入されたaxisを使ってyを指定することで、Y方向に検索することができます。

var chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: {
        tooltips: {
            mode: 'index',
            axis: 'y'
        }
    }
})

デモ

カーソルを併せた要素と同じ月の要素を表示します。

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'horizontalBar',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'horizontalBar',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'index',
            axis: 'y'
        }
    }
})

HTML

<canvas id="myChart"></canvas>

x-axis(非推奨)

intersectをfalseにしたindexと似た挙動になります。

dataset

同じデータセット内のアイテムを表示します。 intersectがtrueの場合、マウスカーソルが重なったポイントの最初のアイテムを使ってインデックスを決めます。 intersectがfalseの場合、一番近いアイテムを使ってインデックスを決定します。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'dataset'
        }
    }
})

デモ

カーソルを併せた要素とデータセットの情報を表示します。

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'bar',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'dataset',
        }
    }
})

HTML

<canvas id="myChart"></canvas>

x

マウスカーソル位置を基準として、X座標上の全てのアイテムを表示します。垂直カーソルを実装する場合に便利です。このモードはcartesianチャートの場合のみ適用可能です。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'x'
        }
    }
})

デモ

カーソル合わせた要素のX座標に一致するアイテムの情報を表示します。

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'x',
        }
    }
})

HTML

<canvas id="myChart"></canvas>

y

マウスカーソル位置を基準として、Y座標上の全てのアイテムを表示します。水平カーソルを実装する場合に便利です。このモードはcartesianチャートの場合のみ適用可能です。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'y'
        }
    }
})

デモ

カーソル合わせた要素のY座標に一致するアイテムの情報を表示します。
(例えば"March"の"B"と"July"の"B"等)

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        tooltips: {
            mode: 'x',
        }
    }
})

HTML

<canvas id="myChart"></canvas>

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。