Adding own lables to datapoint in Bubble Charts

1

Most questions can be found by searching, but not how I can add my own datalabel to datapoints in Bubble charts instead of the necessary radius. It would be nice to be able to add a property like “name:‘Datapoint 123’,”. Its difficult to refer back to the datasett without this.

Have anyone found a workaround to this issue?

2

You can use the Chart.js datalabels plugin to add labels to a bubble chart.

Set a label property on the datapoint object:

          {
            x: 1,
            y: 1,
            r: 2,
            label: 'world',
          },

And enable the plugin:

  options: {
    plugins: {
      datalabels: {
        align: 'top',
        formatter: function (value, context) {
          return value.label || '';
        },
      },
    },
  },

Here’s a full example

bubble chart with data labels
bubble chart with data labels1000×600 34.1 KB

3

Thanks, it work! I see however that if I have several series every serie get the same labels (“budsjett”) on all the series even if I have just added it one of the series. Any ide how to solve this?

{label: ‘Utgangspunkt bidrag’, yAxisID: ‘y1’,data:[" & varUtgStr &“] ,budsjett: [” & varQGAvgRate & “],fill: true, backgroundColor:‘rgba(211, 214, 220, 0.2)’,borderColor:‘rgba(53, 92, 174,1)’},
{label: ‘Rapporter bidrag’, yAxisID: ‘y1’,data:[”& varQGlabels0 &“], fill: false, borderDash: [5, 5], borderColor:‘rgba(53, 92, 174, 1)’},
{label: ‘Utgangspunkt budsjett’, yAxisID: ‘y2’,data:[” & varUtgStrBudsjett &“] ,fill: false, borderColor:‘rgb(255, 99, 132, 1)’},
{label: ‘Rapportert budsjett’, yAxisID: ‘y2’,data:[” & varQGBudsjett &"] , fill: false, borderColor: ‘rgb(255, 99, 132, 1)’, borderDash: [5, 5]}

4

If I’m understanding correctly, you want to display the budsjett property as the label for each datapoint, but you are defining the labels as an array on the dataset instead of the datapoints.

You can fix this either by taking the approach I outlined above, or by adjusting the formatter function to access the budsjett property on the dataset. The context object in the formatter function provides access to the entire chart context, including the current dataset.

That means you could probably do something like this:

options: {
    plugins: {
      datalabels: {
        align: 'top',
        formatter: function (value, context) {
          return context.dataset.budsjett[context.dataIndex] || '';
        },
      },
    },
  },