Why this Tooltip callback for ChartJS works and this doesn't

Question

I was trying to make a callback to paint my tooltip. I was trying this code here and it didn't work:

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

Until I found out I need to do it like this:

tooltips: {
    callbacks: {
        labelColor: function(tooltipItem, chart) {
            return {
                backgroundColor : chart.config.data.datasets[tooltipItem.datasetIndex].backgroundColor,
                borderColor : chart.config.data.datasets[tooltipItem.datasetIndex].backgroundColor
            }
        }
    }
}

So the difference is that I tried to access the color like this:

data.datasets[tooltipItem.datasetIndex].backgroundColor

And the correct answer access it like this:

chart.config.data.datasets[tooltipItem.datasetIndex].backgroundColor

I am confused because I already edited the title and legend of my tooltip, acessing my dataset without 'chart.config' .

This works:

tooltips: {
   callbacks: {
       title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
       label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.value + '%'
  }                 
}

So why In one case I can acess the data with data.datasets[tooltipItem.datasetIndex] and the other needs chart.config.data.datasets[tooltipItem.datasetIndex]

Answer 1

your first snippet will also work

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

here your callback function for labelColor has two arguments. second argument chartInstance contains data and other properties you need but your are trying to access data.datasets instead of chartInstance.data.datasets .

check out this example snippet.

 var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45] }] }, // Configuration options go here options: { tooltips: { callbacks: { labelColor: function(tooltipItem, chartInstance) { debugger; return { backgroundColor: chartInstance.data.datasets[tooltipItem.datasetIndex].backgroundColor, borderColor: chartInstance.data.datasets[tooltipItem.datasetIndex].backgroundColor }; }, label: function(tooltipItem, data) { var label = data.datasets[tooltipItem.datasetIndex].label || ''; if (label) { label += ': '; } label += Math.round(tooltipItem.yLabel * 100) / 100; label += ' custom' return label; } } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart"></canvas>