Nivo: Customize legend labels in Stream component

[ingro]

Hello, I've read the docs for Stream and Legend but did not find anything regarding how to customize legend labels.

I've a situation like this:

const data = [
  {
    JD: 10500,
    PC: 6700,
    date: '2018-09'
  },
  {
    JD: 7860,
    PC: 5430,
    date: '2018-08'
  }
];

const sellers = [
  {
    id: 'JD',
    name: 'John Dorian'
  },
  {
    id: 'PC',
    name: 'Percival Cox'
  }
];

const keys = sellers.map(s => s.id);

There is a way to display the name of each seller inside the legend instead of their id apart from mapping the data array and change it to use seller's name as keys instead of their id?

[kapso]

@ingro Did this ever get solved?

Data set part is really confusing for this library. I think there should be a way to separate out keys/id from label. Use keys/id for data, but use label for display - tooltip, legend etc.

[lukejagodzinski]

I agree with that. It's ridiculous to base legend labels on keys in data. For example for the Bar chart I have data in the following format:

[
  {
    "date": "2019-01-01",
    "withSomething": 123,
    "withoutSomething": 23
  },
  {
    "date": "2019-01-01",
    "withSomething": 453,
    "withoutSomething": 53
  }
]

Now in the legend, I just would like to display some other name than withSomething like for example With Something. Right now, from what I see there is no option to do so. And just mapping my array of data into label format makes no sense.

I would like to propose solution for that where the keys property can be an object:

<ResponsiveBar
  keys={{
    "withSomething": "With Something",
    "withoutSomething": "Without Something"
  }})
/>

or just introduce new component property

<ResponsiveBar
  whatEverPropertyName={{
    "withSomething": "With Something",
    "withoutSomething": "Without Something"
  }})
/>

[plouc]

I decided to use keys for legends for the sake of simplicity, I don't see why it's ridiculous as it's totally fine to have a key named 'With Something'. And if your data storage doesn't allow to use such keys, you can easily map the data prior to passing it to the chart:

const mapped = useMemo(() => data.map(d => ({
    ...d,
    'With Something': d.withSomething,
    'Without Something': d.withoutSomething,
})), [data])

useMemo is optional, but it should be used to prevent unnecessary renderings.

That being said, I admit it could be nice to override the labels/legends… but using a simple mapping can be limiting, for example you won't be able to compute those depending on the values, maybe the lib could support a get(Label|Legend) property which receive the whole datum.

[lukejagodzinski]

@plouc as I agree that such a label is valid property name I don't agree that it's a good pattern to just map all data values. Moreover, I would expect to just retrieve data from my API endpoint and use data in such format in the graph library.

Your idea about being able to compute label/legend using function is very nice. It would definitely be much more flexible!

[WeHateNick]

@plouc I think a pattern like get(label|legend) is necessary.

For instance, I have am using a very large dataset with two letter states for keys like so:

const data = [
  nv: '300',
  al: '200',
  az: '700',
...
]

const keys = ['nv', 'al', 'az',]

Now if I want my labels to show as "Nevada, Alabama, Arizona" it's not as simple as just mapping over my keys that I pass into the keys prop of BarChart. I would now have to change the keys of my _whole_ dataset in data so that they match keys. This is untenable for very large datasets and seems like a really bad pattern to be manipulating my actual dataset for something that is purely presentational.

[DominicTobias]

There should also be a differentiation between keys and labels for translation purposes. I would have expected that we would have a legend option like dataKey:

legends={[
  {
    dataKey: 'label',
  },
]}

or

legends={[
  {
    dataKey: item => translate(item.id),
  },
]}

[macrozone]

is there any solution for this? There is no problem to specify the tooltip legend with sliceTooltip. There you can simply translate serieId, but that's not possible for the legend

[SurealCereal]

It seems that LegendProps supports labels: https://github.com/plouc/nivo/blob/a98a072c4fe5339457d26f396d032dfc302187bc/packages/legends/index.d.ts#L63

Yet in Stream the property is simply ignored, and the id is used instead: https://github.com/plouc/nivo/blob/a98a072c4fe5339457d26f396d032dfc302187bc/packages/stream/src/Stream.js#L179

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[alan-wint]

Definitely not stale. Customization of labels is needed. A function for getting the label would be good.