Chart.js - add text / label to bubble chart elements without using tooltips?

Question

Question

Is there a way to add labels to individual bubbles in Chart.js chart diagrams without having to display tooltips?

Background

These diagrams are intended to visualize the lag of our project. Additional information i.e. The name of the project, about each project are in the table.

Earlier we used Google charts, and simply included the row number from the table on the bubble so that you could fit together.

With Chart.js, I only get bubbles and tooltips.

I looked at the following related questions, but the solution they proposed requires pop-ups at all times. I have a lot more information in the tips, and displaying them all the time significantly clutters the chart.

• Can individual bubbles in a bubble chart have labels?
• As always show tips on Chart.js 2

Answer 1

Chart.js does not directly support this, but Evert Timberg has been very helpful in providing an example. The Chart.js plugin does just that.

From Chart.js Data Binding Example

// Define a plugin to provide data labels Chart.plugins.register({ afterDatasetsDraw: function(chartInstance, easing) { // To only draw at the end of animation, check for easing === 1 var ctx = chartInstance.chart.ctx; chartInstance.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach(function(element, index) { // Draw the text in black, with the specified font ctx.fillStyle = 'rgb(0, 0, 0)'; var fontSize = 16; var fontStyle = 'normal'; var fontFamily = 'Helvetica Neue'; ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); // Just naively convert to string for now // <---- ADJUST TO DESIRED TEXT ---> var dataString = dataset.data[index].toString(); // Make sure alignment settings are correct ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; var padding = 5; var position = element.tooltipPosition(); ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding); }); } }); } }); 

For example, if I just passed "# 22" as the text to render, we get this.