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?

score 7 · Accepted Answer · answered Dec 24 '16 at 05:30

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.';
                    }
                }
            }
        }
    });

Thanks! Works like a charm. One small thing rLabel is displayed with 17 decimals. I there a way to limit the number of decimals? — Wessi, Dec 24 '16 at 08:41
@Wessi you can `Math.round(num)` for round the value of num or there is another post on stackoverflow to round number up to two places.http://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places — Sanjay Dutt, Dec 24 '16 at 09:21

score 1 · Answer 2 · edited Sep 19 '18 at 20:52

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 !

score 0 · Answer 3 · answered Apr 15 '19 at 11:36

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;
    },

ChartJS v2 custom tooltip for rLabel

3 Answers3