Tooltips

ツールチップ設定

タイトル設定は名前空間options.tooltipsに渡されます。 グローバルオプションはChart.defaults.global.tooltipsで定義されています。

表示位置モード

以下を指定することができます。

• average
• nearest

averageモードは、ツールチップに表示される項目の平均値の位置にツールチップを表示します。 nearestモードは、ツールチップに表示される項目のうち、最も近い項目の位置にツールチップを表示します。

Chart.Tooltip.positionersに関数を追加することで、新しいモードを追加することができます。

/**
 * Custom positioner
 * @function Chart.Tooltip.positioners.custom
 * @param elements {Chart.Element[]} the tooltip elements
 * @param eventPosition {Point} the position of the event in canvas coordinates
 * @returns {Point} the tooltip position
 */
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

    return {
        x: 0,
        y: 0
    };
}

デモ1

ツールチップの表示位置をモード追加して表示します。 表示位置モードはaberageと同じ処理です。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    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: 'index',
            position: 'customMode',
        }
    }
});
Chart.Tooltip.positioners.customMode = function(elements, eventPosition) {
    // 'average'と同じ処理です。
    // core.tooltip.jsを参照。
    var tooltip = this;
    if (!elements.length) {
      return false;
    }
    var i, len;
    var x = 0;
    var y = 0;
    var count = 0;
    for (i = 0, len = elements.length; i < len; ++i) {
      var el = elements[i];
      if (el && el.hasValue()) {
        var pos = el.tooltipPosition();
        x += pos.x;
        y += pos.y;
        ++count;
      }
    }
    return {
      x: Math.round(x / count),
      y: Math.round(y / count)
    };
}

HTML

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

align

titleAlign、bodyAlign、footerAlignオプションは、 ツールチップボックスのテキスト水平位置を定義します。 以下の値を指定することができます。

• left (default)
• right
• center

これらのオプションはテキストのみに適用されます。 カラーボックスは常に左に揃えられます。

ソートコールバック

ツールチップ項目をソートします。 最低限、Array.prototype.sortに渡すことの出来る関数を用意する必要があります。 この関数は、3番目のパラメータとして、チャートに渡されるデータオブジェクトを受け取ることができます。

デモ2

ソートコールバックを設定し、値が大きい方をツールチップ内の上部に表示します。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    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: 'index',
            itemSort: function(a, b, data) {
                return (b.yLabel - a.yLabel);
            },
        }
    }
});

HTML

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

フィルターコールバック

ツールチップ項目をソートします。 最低限、Array.prototype.filterに渡すことの出来る関数を用意する必要があります。 この関数は、3番目のパラメータとして、チャートに渡されるデータオブジェクトを受け取ることができます。

デモ3

フィルターコールバックを設定し、値が50より大きい項目のツールチップを表示します。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    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: 'index',
            filter: function(a, data) {
                return (a.yLabel > 50);
            },
        }
    }
});

HTML

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

ツールチップコールバック

ツールチップラベル設定は、ツールチップ設定の下にネストする形でcallbackキーを使用して設定します。 ツールチップにはテキストを使用するために、下記表に示したコールバックがあります。 全ての関数においてthisは、Chart.Tooltipコンストラクタから生成されたオブジェクトです。

全ての関数は同じ引数持っています。ツールチップ項目とチャートのデータオブジェクトです。 全ての関数はstringまたは、文字列の配列を返さなければなりません。 文字列の配列は、複数行テキストとして扱われます。

labelコールバック

labelコールバックは特定のデータポイントに表示されるテキストを変更することができます。 データを丸める一般的な例として、小数点以下2桁に丸める例を以下に示します。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65.123, 59.456, 80.789, 81.012, 56.345, 55.678, 40.901],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55.987, 59.654, 70.321, 91.098, 26.765, 25.432, 70.109],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1,
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

HTML

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

labelColorコールバック

例えば、ツールチップの各項目のボックスを赤にするには、以下のように指定します。

ボックスの色を赤、項目の文字を紫色にしています。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    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: {
            callbacks: {
                labelColor: function(tooltipItem, chart) {
                    return {
                        borderColor: 'rgb(255, 0, 0)',
                        backgroundColor: 'rgb(255, 0, 0)'
                    }
                },
                labelTextColor:function(tooltipItem, chart){
                    return '#543453';
                }
            }
        }
    }
});

HTML

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

ツールチップ項目インターフェース

ツールチップコールバックに渡される項目は、以下のインターフェースを実装します。

{
    // ツールチップのラベル
    label: string,

    // ツールチップの値
    value: string,

    // ツールチップのX値(文字列)
    // (非推奨) 代わりに'value'または'label'を使用してください
    xLabel: number | string,

    // ツールチップのY値(文字列)
    // (非推奨) 代わりに'value'または'label'を使用してください
    yLabel: number | string,

    // 項目の元になるデータセットのインデックス。
    datasetIndex: number,

    // データセット内のこの項目のインデックス。
    index: number,

    // マッチしたポイントのX位置。
    x: number,

    // マッチしたポイントのY位置。
    y: number,
}

カスタムツールチップ

カスタムツールチップを使用すると、ツールチップのレンダリングプロセスにフックすることができるので、 独自の方法でツールチップを表示することができます。 通常はoncanvasの代わりにHTMLツールチップを生成します。 カスタムツールチップをグローバルまたは、チャートの設定で有効化するには、以下のように指定します。

独自のツールチップを表示します。
同様の例は、samples/tooltips/line-customTooltips.htmlを参照してください。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Blue", "Red", "Yellow"],
        datasets:[{
            data: [65, 59, 80],
            backgroundColor: [
                "rgb(54, 162, 235)",
                "rgb(255, 99, 132)",
                "rgb(255, 206, 86)",
            ],
        }]
    },
    options: {
        tooltips: {
            // キャンバスのツールチップを無効化します
            enabled: false,
            custom: function(tooltipModel) {
                // ツールチップ要素
                var tooltipEl = document.getElementById('chartjs-tooltip');

                // 最初の表示時に要素を生成。
                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'chartjs-tooltip';
                    tooltipEl.innerHTML = "<table></table>"
                    this._chart.canvas.parentNode.appendChild(tooltipEl);
                }

                // ツールチップが無ければ非表示。
                if (tooltipModel.opacity === 0) {
                    tooltipEl.style.opacity = 0;
                    return;
                }

                // キャレット位置をセット。
                tooltipEl.classList.remove('above', 'below', 'no-transform');
                if (tooltipModel.yAlign) {
                    tooltipEl.classList.add(tooltipModel.yAlign);
                } else {
                    tooltipEl.classList.add('no-transform');
                }

                function getBody(bodyItem) {
                    return bodyItem.lines;
                }

                // テキストをセット。
                if (tooltipModel.body) {
                    var titleLines = tooltipModel.title || [];
                    var bodyLines = tooltipModel.body.map(getBody);

                    var innerHtml = '<thead>';

                    titleLines.forEach(function(title) {
                        innerHtml += '<tr><th>' + title + '</th></tr>';
                    });
                    innerHtml += '</thead><tbody>';

                    bodyLines.forEach(function(body, i) {
                        var colors = tooltipModel.labelColors[i];
                        var style = 'background:' + colors.backgroundColor;
                        style += '; border-color:' + colors.borderColor;
                        style += '; border-width: 2px';
                        var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                        innerHtml += '<tr><td>' + span + body + '</td></tr>';
                    });
                    innerHtml += '</tbody>';

                    var tableRoot = tooltipEl.querySelector('table');
                    tableRoot.innerHTML = innerHtml;
                }
                // `this`はツールチップ全体です。
                var positionY = this._chart.canvas.offsetTop;
                var positionX = this._chart.canvas.offsetLeft;

                // 表示、位置、フォントスタイル指定します。
                tooltipEl.style.opacity = 1;
                tooltipEl.style.left = positionX + tooltipModel.caretX + 'px';
                tooltipEl.style.top = positionY + tooltipModel.caretY + 'px';
                tooltipEl.style.fontFamily = tooltipModel._fontFamily;
                tooltipEl.style.fontSize = tooltipModel.fontSize;
                tooltipEl.style.fontStyle = tooltipModel._fontStyle;
                tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
            }
        }
    }
});

CSS

#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}

HTML

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

ツールチップモデル

ツールチップモデルには、ツールチップを表示するために使用できるパラメータが含まれています。

先の例では、ツールチップモデル(tooltipModel)を使ってカスタムツールチップを生成しています。

{
    // ツールチップに表示する項目です。ツールチップ項目インターフェースを参照して下さい。
    dataPoints: TooltipItem[],

    // 位置
    xPadding: number,
    yPadding: number,
    xAlign: string,
    yAlign: string,

    // XとYはツールチップの左上にあります(？)
    x: number,
    y: number,
    width: number,
    height: number,
    // ツールチップの表示場所
    caretX: number,
    caretY: number,

    // 本文
    // 表示が必要な本文テキスト。
    // 各オブジェクトは3つのパラメータを持っています。
    // before: string[] // 色のボックス(□型のアイコン)の前に表示するテキスト。
    // lines: string[], // 色のボックス(□型のアイコン)と一緒に表示するメインのテキスト。
    // after: string[], // メインテキストの後に表示するテキスト。
    body: object[],
    // タイトルの後、本文の前に表示するテキスト。
    beforeBody: string[],
    // 本文の後、フッターの前に表示するテキスト。
    afterBody: string[],
    bodyFontColor: color,
    _bodyFontFamily: string,
    _bodyFontStyle: string,
    _bodyAlign: string,
    bodyFontSize: number,
    bodySpacing: number,

    // タイトル
    // タイトルテキストの構成。
    title: string[],
    titleFontColor: color,
    _titleFontFamily: string,
    _titleFontStyle: string,
    titleFontSize: number,
    _titleAlign: string,
    titleSpacing: number,
    titleMarginBottom: number,

    // フッター
    // フッターテキストの構成。
    footer: string[],
    footerFontColor: color,
    _footerFontFamily: string,
    _footerFontStyle: string,
    footerFontSize: number,
    _footerAlign: string,
    footerSpacing: number,
    footerMarginTop: number,

    // ツールチップの外観
    caretSize: number,
    caretPadding: number,
    cornerRadius: number,
    backgroundColor: color,

    // body[]内の各項目の表示色。ツールチップ内の色のボックス(□型のアイコン)の色です。
    labelColors: color[],
    labelTextColors: color[], 

    // 透明度0の場合、ツールチップが非表示になります。
    opacity: number,
    legendColorBackground: color,
    displayColors: boolean,
    borderColor: color,
    borderWidth: number
}