[Feature]: Way to compose the Legend labels?

[nicostombros]

What problem does this feature solve?

It would be great to be able to pass children into Legend component such that we can create our own labels. At the moment, I use Legend like the following

<Legend
   categories={data.map((d) => d.name)}
   colors={data.map((d) => d.color)}
   className='h-auto flex flex-col'
/>

However, there are cases where I'd want to greatly customise the Legend labels. For instance, I'd like to be able to include icons for each of my labels, or to use a Tailwind gradient as the label color. Example of how this might work from a dev standpoint is:

<Legend
   className='h-auto flex flex-col'
>
  {data.map(d => (
    <LegendLabel color="green" className="...">{d.icon}{d.title}</LegendLabel>
  ))}
</Legend>

If this is actually possible then please let me know, as I couldn't find documentation for that.

What does the proposed API look like?

No response

[abdelkd]

<Legend
   className='h-auto flex flex-col'
>
  {({ data }) => (
    data.map(d => (
      <LegendLabel color="green" className="...">{d.icon}{d.title}</LegendLabel>
    ))}
  )}
</Legend>

I think this might be a good API or a renderItem prop that would give item as an argument. something like this

<Legend
   className='h-auto flex flex-col'
   categories={categories}
   colors={colors}
   renderItem={(item) => <LegendLabel color="green" className="...">{d.icon}{d.title}</LegendLabel>}
/>

[ctwillie]

+1

[severinlandolt]

Interesting idea, will be taking a look at it for one of our next releases.

[abdelkd]

@severinlandolt I would love to work on it once it's decided to be implemented

[severinlandolt]

@abdelkd Sounds cool, I would definitely go down the suggested the route of using an optional render prop. Happy to have working on a PR :)

[abdelkd]

@severinlandolt I've added a renderItem prop which takes a function that has two parameters name and Circle, the latter is a component that renders the circle found in legend, so users can manipulate text without loosing circle if it's wanted. do you have other things to sugges?

[severinlandolt]

Thanks, will be taking a look at it for v3.16 :)