Nivo: custom legend text in BarChart

[benzitohhh]

Hi there,

Nivo is amazing! Thanks for all the great work.

Is there a way to set custom legend text in BarChart?

In https://github.com/plouc/nivo/blob/master/packages/nivo-bar/src/Bar.js
it seems like text either comes directly from keys or indexes.

What we really need is a way to pass in some function
i.e.

        legends={
          [
            {
              "dataFrom": () => {
                    // returns array of { label: xxx, fill: yyy } objects
              }
              "anchor": "bottom-right",
              "direction": "column",
            }
          ]
        }

Any ideas really appreciated!

[rascati]

Is there an example of how to set custom legend text? I can't find anything for it. Thanks!

[CallumHemsley]

@plouc is this possible now?

[oscargws]

Does this feature not exist? Or is it just not documented.

[wyze]

It's likely not documented, but you can manually set the data property of the legend item, and it has a label property you can use.

[4-life]

@wyze Can you provide an example please?

[wyze]

It looks like it requires a custom layer to replicate the legend. Which is apparently what I have been doing in my project. See an example here: https://codesandbox.io/s/nivo-bar-example-nf86t

We could add a check for a label property where it computes the legend data (https://github.com/plouc/nivo/blob/441383999dad1c9697ef6f4bc89b1c19b4505153/packages/bar/src/compute/legends.js) and use that if it is present, that way you don't need a custom layer component.

[agustingabiola]

Hi @wyze I was trying to implement your example and found two issues with it (I'm using typescript)
1) @nivo/legends module definition is not complete you can bypass the compile error by adding something like:

declare module '@nivo/legends' {
  import * as NivoLegends from '@nivo/legends';

  export class BoxLegendSvg extends React.Component<LegendProps> {}
}

2) https://github.com/plouc/nivo/blob/master/packages/legends/src/svg/LegendSvgItem.js#L141 at that line it is trying to use what it retrieves from @nivo/core and in my case it is always undefined, like it cannot get it from anywhere and cannot find a solution. When I inspect the properties received before rendering the LegendItem I see that the theme property is there and with all the info.

[wyze]

1. I have a fix for that in #802.
2. Can you share an example on CodeSandbox of how it isn't working?

[agustingabiola]

@wyze Many thanks for the prompt reply. Unfortunately when I try to reproduce on sandbox it doesn't fail (https://codesandbox.io/embed/nivo-bar-example-jquhc?theme=dark). All I can track is that when it tries to get the theme from the LegendSvgItem it is always undefined.

Looking into existing issues: https://github.com/plouc/nivo/issues/603 maybe it is related to that. I will try downgrading @nivo/bar

[wyze]

I was going to suggest making sure you were on the latest versions of all the packages.

[agustingabiola]

I downgraded and worked but looking more closely I had some old dependencies for @nivo/line upgrading all the packages dependencies worked. Thanks a lot for your insight and help.

[HugoLiconV]

It looks like it requires a custom layer to replicate the legend. Which is apparently what I have been doing in my project. See an example here: https://codesandbox.io/s/nivo-bar-example-nf86t

We could add a check for a label property where it computes the legend data (https://github.com/plouc/nivo/blob/441383999dad1c9697ef6f4bc89b1c19b4505153/packages/bar/src/compute/legends.js) and use that if it is present, that way you don't need a custom layer component.

this worked for me! I just have a question, in your example, you're setting the color to black, is there a way to use the default colors for the legends?

[RanjithNair]

Is there any way to do this yet?

[wyze]

@HugoLiconV It should use legends.text.fill from the theme prop.

[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!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[ariel-upstream]

Is that solution should work at v0.63? I'm doing as described in the example but the labels don't change
I'm using the ResponsivBar with typescript and getting an error when trying to add the
layers={["grid", "axes", "bars", "markers", BarLegend]} prop to the bar.

the error:
TS2769: No overload matches this call.   Overload 2 of 2, '(props: BarSvgProps, context: any): ResponsiveBar', gave the following error.     Type '"grid"' is not assignable to type 'Layer'.   Overload 2 of 2, '(props: BarSvgProps, context: any): ResponsiveBar', gave the following error.     Type '"axes"' is not assignable to type 'Layer'.   Overload 2 of 2, '(props: BarSvgProps, context: any): ResponsiveBar', gave the following error.     Type '"bars"' is not assignable to type 'Layer'.   Overload 2 of 2, '(props: BarSvgProps, context: any): ResponsiveBar', gave the following error.     Type '"markers"' is not assignable to type 'Layer'.

[wyze]

The types are not 100%. Depending on your TS version, you could try layers={["grid", "axes", "bars", "markers", BarLegend] as const}.