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

Question

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

Idona

Answer 1

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.

Idona

The link doesn't work anymore. Your code doens't work for me but I'm getting no errors. The function afterDatasetsDraw is not being called. Do I have to call it bymyself somehow? – Cognition

Answer 2

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.

Presnell