Question

Is there any way to add labels to the individual bubbles in a Chart.js bubble chart without resorting to displaying tooltips at all times?

Background

The chart data is for visualizing our project backlog. Additional details, i.e. Project Name, about each project are in a table.

We previously used google charts, and just included the row number from the table on the bubble so you could match things up.

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

I've reviewed the following related questions, but the solution they suggested requires having tooltips display at all times. I've got a lot more information in the tooltips and displaying them all the time would significantly clutter the chart.

• Can individual bubbles in a chartjs bubble chart have labels?
• How to show tooltips always on Chart.js 2

Question

Is there any way to add labels to the individual bubbles in a Chart.js bubble chart without resorting to displaying tooltips at all times?

Background

The chart data is for visualizing our project backlog. Additional details, i.e. Project Name, about each project are in a table.

We previously used google charts, and just included the row number from the table on the bubble so you could match things up.

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

I've reviewed the following related questions, but the solution they suggested requires having tooltips display at all times. I've got a lot more information in the tooltips and displaying them all the time would significantly clutter the chart.

• Can individual bubbles in a chartjs bubble chart have labels?
• How to show tooltips always on Chart.js 2

• javascript
• charts
• chart.js

2 Answers 2

Chart.js doesn't support this directly, but Evert Timberg was very helpful in providing an example Chart.js plugin does exactly this.

From Chart.js Data Labeling 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 in "#22" as the text to render, we get this.

For anyone who is looking for a bit more fresh answer and for the ones that are using React.

I was looking for a solution and I found this plugin chartjs-plugin-datalabels, link here: link. Example of the bubbles chart here: link

Installation

npm install chartjs-plugin-datalabels --save

Import

import ChartDataLabels from 'chartjs-plugin-datalabels';

Register it below just like other plugins

Chart.register(ChartDataLabels);

And here is my example:

<Chart
  type='bubble'
  data={{
    datasets: [
      {
        label: 'Test',
        data: data,
        borderColor: '#5572f7',
        backgroundColor: 'rgba(42, 73, 213, 0.4) ',
        type: 'bubble',
      },
    ],
  }}
  options={{
    //...
    plugins: {
      //...
      datalabels: {
        color: '#fff',
        font: {
          weight: 'bold',
          size: 14,
        },
        formatter: function (value, index) {
          return index.dataIndex + 1;
        },
      },
    },
  }}
/>;

So in options -> plugins -> datalabels -> formatter you can return the label that you want. And you have also option to choose a color, font weight, font size etc.