ChartJS 2で2つのY軸を1つのツールチップに結合することはできますか？

Question

「foo」と「bar」というラベルの付いた2つのY軸があるとします。これらの軸は、同じ間隔に沿った点に対応する。最後の12週間の週とフォアとバーの集計。理想的には、折れ線グラフに沿ってこれらのポイントの1つをマウスオーバーすると、ツールチップはfooとbarの両方について問題の週のデータを表示します。これは、複数のY軸を持たない場合の動作です。実際には、個々のポイントをマウスオーバーすると、その特定のポイントのデータだけが表示されます。

が

const CHART_OPTIONS = { 
    scales: 
    { 
    xAxes: [{ 
     ticks: { 
     display: false, 
     }, 
    }], 
    yAxes: [ 
     { 
     type: 'linear', 
     id: 'y-axis-0', 
     display: false, 
     position: 'left', 
     }, 
     { 
     type: 'linear', 
     id: 'y-axis-1', 
     display: false, 
     position: 'right', 
     }, 
    ], 
    }, 
}; 

チャートデータは、それぞれy-axis-0とy-axis-1のyAxisID指定：明確にするために

が、これは私のチャートのオプションがどのように見えるかです。

2つのY軸を持つチャートを見たことのない人のために、I've prepared a simple example。

これはChart.js 2で行うことができますか？

Answer 1

参照：

Chartjs Docs: Tooltip Configuration - Interaction Modes

モード：指数 - 同じインデックスにある項目を検索します。交差設定が真である場合、 最初の交差項目は、 データのインデックスを決定するために使用されます。交差falseの場合は、最も近い項目を使用して のインデックスを決定します。

ツールチップ設定を含むようにグラフオプションを更新します。 mode

tooltips : { 
    mode : 'index' 
}, 

indexに更新されたオプションは次のようになります設定してください。

const CHART_OPTIONS = { 
    tooltips : { 
    mode : 'index' 
    }, 
    scales: 
    { 
    xAxes: [{ 
     ticks: { 
     display: false, 
     }, 
    }], 
    yAxes: [ 
     { 
     type: 'linear', 
     id: 'y-axis-0', 
     display: false, 
     position: 'left', 
     }, 
     { 
     type: 'linear', 
     id: 'y-axis-1', 
     display: false, 
     position: 'right', 
     }, 
    ], 
    }, 
}; 

Check updated sample which include tooltips mode set to index