javascript - Chart.js bubble chart changing dataset labels - Stack Overflow

admin管理员组

文章数量:1332344

Is it possible to change the dataset labels that show up in the tooltip for a bubble chart.js chart?

As it stands right now, the dataset is based off the x,y,r values, but I'd like to inject some additional content, so that instead of reading (5,55,27.5) it reads something like: (Day:5, Total:55). I'd like to leave off the radius of 27.5 in the tooltip.

Is it possible to change the dataset labels that show up in the tooltip for a bubble chart.js chart?

As it stands right now, the dataset is based off the x,y,r values, but I'd like to inject some additional content, so that instead of reading (5,55,27.5) it reads something like: (Day:5, Total:55). I'd like to leave off the radius of 27.5 in the tooltip.

• javascript
• ruby-on-rails
• chart.js

Share Improve this question Follow asked Jul 22, 2017 at 1:34 Godzilla74Godzilla74 2,51233 gold badges3333 silver badges7272 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

The previous answer doesn't work as of Chart.JS V3 because of these changes: https://github./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./chart.js@latest/dist/chart.umd.js"></script>
<canvas id="ctx"></canvas>

本文标签： javascriptChartjs bubble chart changing dataset labelsStack Overflow