Legend not rendering for ResponsiveLine chart

[JMPiechowiak]

Hey, legend is not rendering for my ResponsiveLine chart component. I even set an anchor to center becouse I was suspecting that maybe it doesn't fit in a div, but still nothing. Here is my chart:

and here is the code:

<ResponsiveLine
        data={data}
        margin={{
          "top": 50,
          "right": 60,
          "bottom": 60,
          "left": 60
        }}
        xScale={{
          "type": "point"
        }}
        yScale={{
          "type": "linear",
          "stacked": true,
          "min": "auto",
          "max": "auto"
        }}
        axisTop={null}
        axisRight={null}
        axisBottom={{
          "orient": "bottom",
          "tickSize": 5,
          "tickPadding": 5,
          "tickRotation": 35,
          "legend": t(this.state.mode),
          "legendOffset": 52,
          "legendPosition": "center"
        }}
        axisLeft={{
          "orient": "left",
          "tickSize": 5,
          "tickPadding": 5,
          "tickRotation": 0,
          "legend": t('value'),
          "legendOffset": -40,
          "legendPosition": "center"
        }}
        dotSize={10}
        dotColor="inherit:darker(0.3)"
        dotBorderWidth={2}
        dotBorderColor="#ffffff"
        enableDotLabel={true}
        dotLabel="y"
        dotLabelYOffset={-12}
        animate={true}
        motionStiffness={90}
        motionDamping={15}
        legends={[
          {
            "anchor": "center",
            "direction": "column",
            "justify": false,
            "translateX": 0,
            "translateY": 0,
            "itemsSpacing": 0,
            "itemDirection": "left-to-right",
            "itemWidth": 80,
            "itemHeight": 20,
            "itemOpacity": 0.75,
            "symbolSize": 12,
            "symbolShape": "circle",
            "symbolBorderColor": "rgba(0, 0, 0, .5)",
            "effects": [
              {
                "on": "hover",
                "style": {
                  "itemBackground": "rgba(0, 0, 0, .03)",
                  "itemOpacity": 1
                }
              }
            ]
          }
        ]}
      />

[plouc]

@JMPiechowiak, can you please setup a running example on codesandbox please? It's been very useful to solve several issue. Thank you

[plouc]

I'm closing this issue due to lack of response, feel free to comment if you can setup an example.

[JMPiechowiak]

Actually after seting up an example on codesandbox legeds seem to appear normally with exact same code. What I've noticed is that in my project legeds do not display to any of the charts not only Line. Is there some way to use @nivo/legends directly? Without 'legends' props of the chart?

[plouc]

@JMPiechowiak, yes you can, but honestly, if you want to handle legends outside of the charts, you'd better use html. Also, as the package was designed to be used internally by others nivo components, you'll have to look at the code to see how it can be used. Might be a stupid question, but are you sure you used the same versions on codesandbox?

[JMPiechowiak]

Okay I figured this out. The problem was i was importing ResponsiveLine from "nivo" not from "@nivo/line". Now everything seems to work perfectly.

This import statement was not obvious to be honest. I thought that nivo library contains everything.

[plouc]

I'm glad you solved your problem. nivo is the old (deprecated) all-in-one package. You don't want to import ~40 components with all their dependencies while you only use one :)

[ghost]

legends, defs, fill properties also don't work locally in <ResponsiveChoropleth />. though import { ResponsiveChoropleth } from "@nivo/geo"; . my problem solved when i updated my @nivo/bar from "^0.50.0" to "^0.80.0" version.