Maximum update depth exceeded at AxisLinear about react-charts HOT 7 CLOSED

I've noticed this error happening especially when the window is resized or similar changes to the container element take place. Working on a PR.

from react-charts.

I am running into this now when putting my chart inside of a @reach/tabs component. @SiddharthMantri did you have any luck on resolving? I am going to be diving into this today and figured I'd check

from react-charts.

Hi All, Any updates on this? I am facing this error on codesandbox. For the first render it plots properly. But any updates on any files, which result in re render on codesandbox, will result in this error.
https://codesandbox.io/s/react-charts-line-cvpt2

from react-charts.

I'm using a bar chart inside of a resizable box as is shown in the demos.

I've noticed that this error occurs when resizing the element, but particularly when the angle of the horizontal axis labels changes. When the chart is sized so that the labels are initially skewed, you can resize the element without problems as long as the labels remain skewed. As soon as the component becomes wide enough to display the labels horizontally, the maximum call depth error appears.

What has me stumped is that this same label behavior as shown in the chart demo does not cause the error.

Has anyone had any luck sorting out the source of this?

from react-charts.

From my testing, this appears to be related to the number of elements being shown. If I show a limited number of elements, the chart works properly, but then if I update it with a longer list of items, the recursion error appears.

Here's my component:

function StateOverTimeChart({ data, timeInterval }) {
  const grouping = 1000 * timeInterval;

  const series = React.useMemo(
    () => ({
      type: "bar"
    }),
    []
  );

  const chartData = React.useMemo(
    () =>
      _.map(
        _.groupBy(data, item => `${item.JobDefinition}-${item.State}`),
        (jobData, definition) => ({
          label: definition,
          // Due to a bug with react-charts https://github.com/tannerlinsley/react-charts/issues/61 we need to limit
          // the data we are displaying.
          data: _.takeRight(
            _.sortBy(
              _.map(
                _.groupBy(
                  jobData,
                  item => Math.floor(item.CreatedOn / grouping) * grouping
                ),

                (data, grouping) => ({
                  primary: new Date(_.toInteger(grouping)).toLocaleString(),
                  secondary: data.length
                })
              ),
              "primary"
            ),
            40
          )
        })
      ),
    [data, grouping]
  );

  const axes = React.useMemo(
    () => [
      { primary: true, type: "ordinal", position: "bottom" },
      { type: "linear", position: "left", stacked: true }
    ],
    []
  );

  return (
    <div
      style={{
        width: "100%",
        height: "300px"
      }}
    >
      <Chart data={chartData} series={series} axes={axes} tooltip />
    </div>
  );
}

Curiously, changing primary: new Date(_.toInteger(grouping)).toLocaleString(), to primary: _.toInteger(grouping), causes the recursion error to stop as well

from react-charts.

seems like this has to do with label rotation on ordinal axes.
setting maxLabelRotation to 0 mitigates this issue for me (at the expense of overlapping labels if showing many categories without enough space to expand):

	{ primary: true, type: 'ordinal', position: 'bottom', maxLabelRotation: 0 },
	{ position: 'left', type: 'linear', stacked: true }

from react-charts.

Due to a massive overhaul and rewrite of React Charts to TypeScript and a massively upgraded public API, this issue is being bulk closed for triage. The latest version can be tested via the react-charts@beta tag. Documentation is in the process of being upgraded, but thankfully, everything is fully typed now, so you can explore the API that way for now.

If, after testing or playing with the v3 beta, you believe your issue is still not addressed or relevant, feel free to open a new issue.

from react-charts.