In this post I’ll show how to customize the label in a Pie chart in Retool using Rechart library.

Usually, the label for each slice can be created using a property from the data-point the slice is representing. So, given this data point:

{name: 'Some label', value:100}

we can easily set as slice label the name property:

The problem relies when we need to do some data manipulation, such as an aggregation, because we want to represent a calculated number. Let’s consider this data-point schema:

{
    "PassengerId": 1,
    "Survived": 0,
    "Pclass": 3,
    "Name": "Braund, Mr. Owen Harris",
    "Sex": "male",
    ...
}

Let’s suppose that we want to create a Pie chart using the value of Survived that in this case can be 0 or 1. We don’t want one slice for each data-point but a slice that represent the accumulated number from an aggregation. For instance, we expected to have two slices representing the quantity of people survived and not-survived from this dataset.

Now, as you can see, the label is inherited from the Survived value is not readable:

We have few options here to solve this issue:

• transform the value of Survived in something more readable
• create a new property based on Survived that will be used as label
• generate a label transformation in the appropriate section of Rechart configurator

I’m going to skip the first two options to show you how to make a label generation with a single line of javascript without touching the original dataset.

The datum.$currentLabel property is a special property that contains the label inherit from the aggregation of the Survived property.

With the following javascript we can easily change the final label:

datum.$currentLabel ? 'People survived' : 'People not survived'

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