NotFoundError: Failed to execute 'removeChild' on 'Node'
Author: diegocgaonaCreated Nov 18, 2021Updated Mar 6, 2025
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:
Source: frappe/charts