Legend not rendering for ResponsiveLine chart

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]

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 😃

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