ResponsiveLine strange refresh when updating data

Describe/explain the bug I have a Chart component for the ResponsiveLine which receives some parameters and data series. I’m calculating the ticks accordingly to the length of my series and the dates (for example, dynamically saying like every 7 days, every 2 months, and so on ).

I’m not remounting the component when the data changes. I’m just passing the updates settings to the props, because I wanted it to animate when the data changes.

However, it seems to have a strange behavious when the data length is greater than 40 data points. When it’s less than that, the component refreshes and animate smoothly, but if I pass something like 2 series of 42 and 50 points the animation crashes, the app slows down, the labels start to overlap, like in this example gif:

On the other hand, if I force the component to re-mount the problem does not happen (but then I dont have the animation)

Expected behavior Chart animation occurs normally

Desktop (please complete the following information):

• OS: MacOS 10.15.4
• Browser Chrome, Firefox…
• Version: "@nivo/line": "^0.61.1",

Additional context This is my component

<ResponsiveLine
      data={data as Serie[]}
      margin={{
        top: 20, right: 30, bottom: 80, left: 50,
      }}
      xScale={{
        type: 'time', format: '%Y-%m-%d', precision: 'day', useUTC: false,
      }}
      yScale={{
        type: 'linear', min: 0, max: maxYScale, stacked: false, reverse: false,
      }}
      tooltip={LineTooltip}
      axisBottom={{
        orient: 'bottom',
        renderTick: LineDateTick,
        tickValues: xScaleTickValues,
      }}
      axisLeft={{
        orient: 'left',
        tickSize: 0,
        tickPadding: 15,
        tickRotation: 0,
        tickValues,
        legend: '',
        legendOffset: -40,
        legendPosition: 'middle',
        format: (value): string => formatLeftAxis(value, divisor, unit),
      }}
      colors={{ datum: 'color' }}
      pointSize={5}
      pointColor="#FFFF"
      pointBorderWidth={2}
      pointBorderColor={{ from: 'serieColor' }}
      pointLabelYOffset={-15}
      enableSlices={false}
      useMesh
      onMouseMove={handleMouseMove}
      crosshairType="cross"
      motionStiffness={280}
      legends={enableLegends ? [{
        anchor: 'bottom',
        direction: 'row',
        justify: false,
        translateX: 20,
        translateY: 75,
        itemsSpacing: 0,
        itemDirection: 'left-to-right',
        itemWidth: 190,
        itemHeight: 30,
        itemOpacity: 0.75,
        symbolSize: 12,
        symbolShape: 'circle',
        symbolBorderColor: 'rgba(0, 0, 0, .5)',
      }] : []}
      theme={{
        axis: {
          domain: {
            line: {
              stroke: '#F3F3F3',
              strokeWidth: 1,
            },
          },
        },
        grid: {
          line: {
            stroke: '#FFFF',
            strokeWidth: 1,
          },
        },
      }}
    />

In case it is something not possible to fix, is there any kind of “intro” animation for the chart once it gets mounted?

[asaeed]

My workaround with React Hooks is to have a useEffect to watch for changes to data (whether it’s coming from app state or a prop) and assign to a local state variable, eg:

const [localData, setLocalData] = useState([])

useEffect(() => {
    setLocalData(data)
  }, [data])

return (
      <ResponsiveLine
        data={localData}
        ...

[nigellima]

@plouc Hello. How are you? Do you have any updates on this issue? Or, could you point me to where this issue is possibly present so I could help to fix this?