plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.24k stars 1.03k forks source link

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

Open DanielDz21 opened 5 months ago

DanielDz21 commented 5 months ago

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 image

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 commented 5 months ago

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 commented 4 months ago

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

billbither commented 3 months ago

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 commented 2 months ago

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

KoalaSat commented 1 month ago

Hi! Any update on this one?