ChartJS v2 custom tooltip for rLabel

Question

I have a ChartJS (v2) bubble chart with three dimensions: x, y, and r (radius of the bubble).

Following this answer , I have this code for customizing the tooltip:

tooltips: {
  callbacks: {
    label: function (tooltipItem, data) {
      var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
      return datasetLabel + ' : ' + tooltipItem.rLabel + '% has price of ' + tooltipItem.yLabel + ' USD';
    }
  }
}

It almost works except that tooltipItem.rLabel is displayed as undefined . If I input tooltipItem.xLabel the tooltip displays correctly with the value of x . However, I want to display the value of r .

Does anyone know a solution for this?

Answer 1

The rLabel value is not a property of tooltipItem that's why it gives undefined. I access that value from the data object.

  tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        rLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r;
                        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                        return datasetLabel + ' : ' + rLabel + '% har pris på ca. ' + tooltipItem.yLabel + ' kr.';
                    }
                }
            }

Below is the working code for the same.

var data = {
        datasets: [
            {
                label: 'First Dataset',
                data: [
                    {
                        x: 20,
                        y: 30,
                        r: 15
                    },
                    {
                        x: 40,
                        y: 10,
                        r: 10
                    }
                ],
                backgroundColor:"#FF6384",
                hoverBackgroundColor: "#FF6384",
            }
        ]
    };
    var myBubbleChart = new Chart(ctx,{
        type: 'bubble',
        data: data,
        options: {
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        rLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r;
                        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                        return datasetLabel + ' : ' + rLabel + '% har pris på ca. ' + tooltipItem.yLabel + ' kr.';
                    }
                }
            }
        }
    });

Answer 2

After trying for hours, turns out in my case, I needed to add var before rLabel ...

Otherwise, it just kept alerting me there was a js error in developer console...

In my case :

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      var rLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r;
      var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
      return datasetLabel + ' : ' + rLabel + '% har pris på ca. ' + tooltipItem.yLabel + ' kr.';
    }
  }
}

Still, thanks very very much for the answer from Sanjay Dutt !

Answer 3

this may help in solving the build error.

 label: function(tooltipItem, data) {
        let radiusArr:any;
        radiusArr = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        let rLabel = radiusArr.r;
        let datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
        return rLabel + ' xxx are ' + datasetLabel;
    },