NotFoundError: Failed to execute 'removeChild' on 'Node'

[diegocgaona]

Expected Behaviour

Chart rendered

Actual Behaviour

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Steps to Reproduce:

When I try to access a page with a chart, it occurs (not always, but almost always) I'm using the last version (from yarn), with the react wrapper in a project with Reac-Admin.

Some of my code:

import React, { useRef } from "react";
import ReactFrappeChart from "react-frappe-charts";
import useStyles from "../layout/BasicFormStyles"

export function SimpleChart(props) {
  const chartRef = useRef();
  const classes = useStyles(props);
  const { mylabels, myvalues, tooltipXpre, tooltipYpre, chartType, chartTitle, hide } = props

 return (
    <div className={classes.chartMarginTop} >
      <ReactFrappeChart
        title={chartTitle}
        ref={chartRef}
        type={chartType}
        colors={["#EFC44F"]}
        axisOptions={{ xAxisMode: "tick", yAxisMode: "tick", xIsSeries: 1 }}
        tooltipOptions={{
          formatTooltipX: (d) => `${tooltipXpre} ${d}`,
          formatTooltipY: (d) => `${tooltipYpre}${d}`
        }}
        lineOptions={{
          regionFill: 1 // default: 0
        }}
        height={250}
        data={{
          labels: mylabels,
          datasets: [{ values: myvalues }],
        }}
      />

  </div>
  );

}

In the page (it's inside Box and Cards from material-ui or tabs from React-Admin)

                    <SimpleChart
                        chartTitle="Faturamento R$"
                        mylabels={ chartDataThisYear.chartlabels }
                        myvalues={ chartDataThisYear.chartvalues }                        
                        tooltipXpre={"Data: "}
                        tooltipYpre={"R$"} 
                        hide={hideChart} />

I saw one old issue about it, but to me still ocurring. And I say this PR https://github.com/frappe/charts/pull/347 which seems related.

NOTE: Add a GIF/Screenshot if required.

Frappé Charts version: Codepen / Codesandbox:

[archfz]

This seems to be to some extent a react-frappe-charts issue as well. See https://github.com/sheshbabu/react-frappe-charts/issues/34

But the issue is that even with the patch in that issue this reproduces sometimes. So maybe we need a fix in frappe as well.

[k1r0s]

im using frappe-charts@1.6.2 and facing this as well

[k1r0s]

would be nice to check if the svg is indeed child of the container