General question about pie chart (sunburst) labeling

[godsamit]

Hello, I am trying to create a pie chart with elastic, and I'm having trouble trying to label the slices.

I'm following the example here. More specifically, for the layers prop:

layers={[
          {
            groupByRollup: (d: Datum) => d.sitc1,
            nodeLabel: (d: Datum) => productLookup[d].name,
          },
        ]}

The d in groupByRollup gives me the full entry for the data, but the d in nodeLabel only gives me the count for the data. There's no example for the productLookup object/function.

My question is, what if I have a dataset where 2 entries have the same count? How do I reliably get the label?

[godsamit]

After looking at the source code, I was able to figure it out. But the storybook page can definitely be clearer...

I assigned the count to the groupByRollup so I'm getting count at nodeLabel. If I put a distinct id for groupByRollup, it works fine.

[nickofthyme]

Hey @godsamit,

Yeah that example is not great since the productLookup and mock.pie data are hidden.

You are correct, the groupByRollup function callback provides the data row as the first argument. The Datum is used to represent a single data row, this type is deceiving on the nodeLabel and should not be there.

The nodeLabel prop is of type LabelAccessor which is passed a generic PrimitiveValue (i.e. string | number | null).

elastic-charts/packages/charts/src/utils/common.tsx

Line 451 in 0bb3ab1

export type LabelAccessor<T = PrimitiveValue> = (value: T) => string;

In the case of nodeLabel the value is the value returned from groupByRollup, not the value from the valueAccessor like you were thinking.

I created a codesandbox of that example, with a few tweaks, with all the data so you you can see it better. Unfortunately codesandbox is having issues loading types but you can still play with it.

---

PS - Apologies for the lack of documentation it's been on our backlog for a while now.

[nickofthyme]

the storybook page can definitely be clearer

Most definitely. Your best bet for now is to pull down the repo and run the storybook locally that way you can jump around or console.log values to see what is happening and have full typescript intellisense.