Chart.jsのツールチップラベルの色を設定する方法

Question

Chart.jsでは、ツールチップの色を設定できません。「2016年12月」のラベルに凡例の色（青色）と同じ色を付けたいとします。

以下を参照してください。

graphOptions.tooltips = { 
        enabled: true, 
        mode: 'single', 
        displayColors: false, 
        callbacks: { 
         title: function (tooltipItem, data) { 
          if (tooltipItem.length > 0) { 
           return tooltipItem[0].xLabel + ': ' + tooltipItem[0].yLabel +" Scans"; 
          } 
          return ""; 
         }, 
         label: function (tooltipItem, data) { 
          if (data.datasets.length > 0) { 
           return data.datasets[tooltipItem.datasetIndex].label; 
          } 
          return ''; 
         }, 
         labelColor: function (tooltipItem, chartInstace) { 
          if (data.length > 0) { 
           return data[tooltipItem.datasetIndex].backgroundColor; 
          } 
         } 
        } 
       }; 

Answer 1

実は、問題はlabelColorコールバックであなたはのbackgroundColorを返すということです。以下は、上記のコールバックメソッドの正しい戻り値の型です。

function (tooltipItem, chartInstance) { 
       return { 
        borderColor: borderColor, 
        backgroundColor: backgroundColor 
       }; 
      } 

バックグラウンドカラーでは、ラベルの色を割り当てます。 borderColorを残すことができます。

は[サンプル・コード]

labelColor : function(tooltipItem, chartInstance){ 
        return { 
         backgroundColor : data.datasets[tooltipItem.datasetIndex].backgroundColor[0] 
        }; 
       } 

Answer 2

'tooltipItem' 最終 's' を誤った綴り、存在しません。だから、あなたのコードは、あなたがlabelColorコールバック関数にdataと呼ばれるものを定義していない

labelColor : function(tooltipItem, chartInstance){ 
    return { 
     backgroundColor : data.datasets[tooltipItems.datasetIndex].backgroundColor[0] 
    }; 
} 

Answer 3

でなければなりません。 charts.jsのこのコールバックの別の混乱は、labelColorコールバック関数に渡される2番目のパラメータがチャートインスタンスであり、他のchartjsコールバックのようなデータセットではないことです。

とにかく、これはうまくいくはずです。

labelColor: function(tooltipItem, chart) { 
     var dataset = chart.config.data.datasets[tooltipItem.datasetIndex]; 
     return { 
      backgroundColor : dataset.backgroundColor 
     } 
    } 

Answer 4

あなたはこれがこの質問をしばらく頼まれたChartjs 2.7 https://github.com/chartjs/Chart.js/releases/tag/v2.7.0 （フィーチャー＃4199）