Resize Label Text Based On Bubble Size

[rrozema12]

Hello, is there any way to only have the label display without the value, and dynamically change font size based on the size of the circle?

[jmsv23]

right now it's not possible the font-size it's based on the general config valueFont and labelFont objects, the display of the value it's not optional as well, but you can check this lines on the library https://github.com/weknowinc/react-bubble-chart-d3/blob/771fb21d7089622215583c73f0898828d8e1b64a/src/react-bubble-chart-d3.js#L122

https://github.com/weknowinc/react-bubble-chart-d3/blob/771fb21d7089622215583c73f0898828d8e1b64a/src/react-bubble-chart-d3.js#L141

and check if you can add the necessary props to achive what you want and made a PR to the repo

[PotLid]

For the first question, option for hiding value text or hiding name text or hiding them both, you can achieve these by passing boolean type props to react-bubble-component.

with that passed prop, you can wrap following snippet with conditional statement, whether you want to append these texts at the moment bubbles get rendered.

Or you can set the style attributes which handle visual aspect of its selecting elements ( such as opacity, display or visibility ) in the following code snippet sections.

For the second question,

As you can see in this snippet, you can customize the style of texts inside circle the way you want. For your question that change the size based on size of the circle. You can use radius value of the node to decide the size of fonts.

For example .style("font-size", function(d) {return ( any kinds of font size determine algorithm you want to achieve using "d.r" ) }).

Hope that this helps.