Why do i need to setTimeOut after setting attribute to my div element(chartNode),that belongs under gridstack, which will then change it's css styling, more specifically it's position on the x & y axis in the gridstack, otherwise it will proceed to execute the domToImage.toPng() before the new CSS styling has taken effect.

Question

How do I replace setTimeOut with a more appropriate event handler that waits for the new attribute to be set and new css to be applied before executing domToImage.ToPng?

Code

 let node = document.getElementsByClassName('view-container view-grid-' + view_id[1])[0];
                    // const data = await convertToPng(doc,node,doc_width,doc_height,doc_wh_ratio);

                    let chartNode =  node.querySelectorAll('[gs-id="view1111|mod15"]')[0];
                    chartNode.setAttribute('gs-x',0);
                    chartNode.setAttribute('gs-y',0);
                    console.log(chartNodes);
                    setTimeout(async function () {
                        let dataUrl = await (domtoimage.toPng(chartNode));
                        console.log(dataUrl);
                    }, 1000);