I try use am5charts inside a chrome extension, content script and is inside a iframe, React.
I try to use useRef() to pass to am5charts the htmlElement.
const chartRef = useRef<HTMLDivElement>();
useEffect(() => {
am5.ready(function () {
const chartDoc = chartRef.current;
const root = am5.Root.new(chartDoc);
chartRef is atached to a div in the return.
tried too const chartDoc = chartRef.current as HTMLDivElement;
inside of am5charts is checking if what i pass on am5.Root.new(chartDoc)
is instanceof HtmlElement but is React FiberNode object...
screenshot from console debugging
This worked, maybe little bit hacky.
const chartRef = useRef<HTMLDivElement>();
useEffect(() => {
const chartDoc = chartRef.current;
if (chartDoc.childNodes.length > 0) {
return;
}
const chartDiv = document.createElement('div');
chartDiv.style.height = '275px';
chartDoc.appendChild(chartDiv);
const root = am5.Root.new(chartDiv);