[Chartjs]-Chart.js bubble chart changing dataset labels

by

7👍

Yes! It is possible.

To achieve that, you can use the following tooltip­‘s label callback function :

tooltips: {
   callbacks: {
      label: function(t, d) {
         return d.datasets[t.datasetIndex].label + 
                ': (Day:' + t.xLabel + ', Total:' + t.yLabel + ')';
      }
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var chart = new Chart(ctx, {
   type: 'bubble',
   data: {
      datasets: [{
         label: 'Bubble',
         data: [{
            x: 5,
            y: 55,
            r: 27.5
         }],
         backgroundColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(t, d) {
               return d.datasets[t.datasetIndex].label + 
                      ': (Day:' + t.xLabel + ', Total:' + t.yLabel + ')';
            }
         }
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

1👍

The previous answer doesn’t work as of Chart.JS V3 because of these changes:
https://github.com/chartjs/Chart.js/blob/master/docs/migration/v3-migration.md
image showing breaking changes between v2 and v3 from https://github.com/chartjs/Chart.js/blob/master/docs/migration/v3-migration.md

The following code works in 4.1.1:

var chart = new Chart(ctx, {
type: 'bubble',
data: {
    datasets: [{
        label: 'Bubble',
        data: [{
            x: 5,
            y: 55,
            r: 27.5
        }],
        backgroundColor: 'rgba(0, 119, 290, 0.6)'
    }]
},
options: {
    plugins: {
        tooltip: {
            callbacks: {
                label: function(item) {
                    return item.raw.r
                }
            }
        }
    }
}
});
<script src="https://npmcdn.com/chart.js@latest/dist/chart.umd.js"></script>
<canvas id="ctx"></canvas>

Leave a comment