Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
MrFarhan opened this issue Sep 20, 2023 · 2 comments
Open
1 task

Comments

@MrFarhan
Copy link

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
Copy link

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
Copy link

dkkazmierczak commented Jun 7, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants