@nivo/line warnings when using Nivo >= 0.87.0 line chart

[DanielDz21]

Describe/explain the bug
Hello everyone, I am trying to update the library and getting the following warnings in the console.

Warning: Failed prop type: The prop `legendOffsetX` is marked as required in `_n`, but its value is `undefined`.
Warning: Failed prop type: The prop `legendOffsetY` is marked as required in `_n`, but its value is `undefined`.
Warning: Failed prop type: The prop `legendOrientation` is marked as required in `_n`, but its value is `undefined`.

To Reproduce
Open the console in the codesandbox to see the warnings.

Expected behavior
No warnings, since the props are not actually required.

Screenshots

Additional context
This theoretically was fixed in the version 0.87.0 - a lot of them were removed from the required props. But it seems that some of them are still required, like legendOffsetX, legendOffsetY, and legendOrientation.

[akabeera]

I'm running into the same issue. Any updates on this? I'm using the with just the required props according to the docs: https://nivo.rocks/line/

                <div className='flex' style={{ height: '500px', width: '700px' }}>
                    {chartData && chartData.data &&
                    <ResponsiveLine
                        data={chartData.data}
                        yFormat=" >-.2f"
                        enablePoints={false}
                    />
                    }
                </div>

I'm using "@nivo/line": "^0.85.1",

[puakehaulani]

i'm running into this issue as well for these three props specifically on a scatterplot on v0.87.0

[billbither]

Same problem here, v0.87.0

<ResponsiveLine
  key={windowWidth}
  data={chartData || []}
  colors={(d) => machineColorMap[d.machineName] || "#1f77b4"}
  markers={markers || []}
  enablePoints={true}
  pointSize={8}
  lineWidth={6}
  isInteractive={true}
  enableSlices="x"
  sliceTooltip={({ slice }) => (
    <CustomTooltip point={slice.points[0]} />
  )}
  useMesh={true}
  xScale={{
    type: "time",
    format: "%Y-%m-%dT%H:%M:%S.%LZ",
    precision: "minute",
  }}
  yScale={{
    type: "linear",
    min: 0,
    max: maxYValue,
    stacked: false,
    reverse: false,
  }}
  axisBottom={getXAxisConfig(chartData)}
  axisLeft={{
    format: (value) => formatTime(value),
  }}
  curve="stepAfter"
  enableGridX={true}
  enableGridY={true}
  margin={{ top: 30, right: 30, bottom: 75, left: 60 }}
  yFormat={(value) => formatTime(value)}
  xFormat={(value) => {
    const date = DateTime.fromJSDate(new Date(value));
    return formatDate(date, timeZone);
  }}
  legends={[
    {
      anchor: "bottom",
      direction: "row",
      justify: false,
      translateX: 0,
      translateY: 75,
      itemsSpacing: 0,
      itemDirection: "left-to-right",
      itemWidth: 120,
      itemHeight: 20,
      itemOpacity: 0.75,
      symbolSize: 12,
      symbolShape: "circle",
      effects: [
        {
          on: "hover",
          style: {
            itemBackground: "rgba(0, 0, 0, .03)",
            itemOpacity: 1,
          },
        },
      ],
      data: Object.entries(uniqueMachines).map(
        ([machineName, color]) => ({
          id: machineName,
          label: machineName,
          color: color,
        })
      ),
    },
  ]}
/>

[feketegy]

Any updates on this? It's still throwing the error in v0.87.0

[KoalaSat]

Hi! Any update on this one?

[EmBeee27]

Same here...

[lee-ht]

I don't understand exactly, but in my case,

<ResponsiveLine
    markers = {[
        {
        legendOffsetX: 0,
        legendOffsetY: 0,
        legendOrientation: "horizontal"
        },
    ]}
/>

specify three options inside the markers, and the warning disappeared