In this post you’ll learn how to set the label size dynamically according to the available space in a circle pack chart in Retool.

In Rechart making a circle-pack chart is dead-easy.

Let’s consider the Olympics’ athletes dataset and let’s suppose we’d like to represent each country in a circle-pack chart in Retool. The size of each circle should be calculate according to the number of athletes per country.

In Rechart configurator we need to Group-By the datum.country property and set as Size-By using any unique property, such as datum.name.

Next, we can enable the Labels section and specify the property we want to show as label, in this case datum.$sizeValue which is the calculated value during the aggregation.

The next step is to change, in the Labels section, the size, and instead of using a fixed value, let’s calculate something dynamic with javascript, such as:

datum.$sizeValue / 40

The factor we used really depends of the dataset, because the size factor needs to be a number not too big, indeed, 1 is equivalent to 100% .

This is an example on how in Rechart is possible to customize many parts of the chart configuration by using little chunk of javascript.

Happy hacking!