It would be great if we can add text inside the bubble in bubble chart.

[MrFarhan]

Would you like to work on this feature?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

Trying to add text inside the bubble same like this:

https://camo.githubusercontent.com/36e4135ac47b58f69aac98d9aced2f26b3adc157bb398117e39e79c747ea9739/687474703a2f2f692e696d6775722e636f6d2f4f514564674f572e676966

Describe the solution you'd like

A way to add text like a label field could be added by which a text is provided for bubble

Describe alternatives you've considered

No response

Documentation, Adoption, Migration Strategy

No response

[SHIVA-6699]

i want insert text inside of the Doughnut is it possible <Doughnut data={data} style={{ width: "400px", height: "400px" }} options={{ cutout: "80%", plugins: { title: { text: "Actual", }, }, }} >

      </Doughnut>

[dkkazmierczak]

I was looking for a solution and I found this plugin chartjs-plugin-datalabels - 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.