Skip to content

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

Open
@MrFarhan

Description

@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

Activity

SHIVA-6699

SHIVA-6699 commented on Mar 11, 2024

@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

dkkazmierczak commented on Jun 7, 2024

@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.

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @MrFarhan@dkkazmierczak@SHIVA-6699

        Issue actions

          It would be great if we can add text inside the bubble in bubble chart. · Issue #1194 · reactchartjs/react-chartjs-2