I put a ECharts chart into a resizable div, and using a ResizeObserver to listen to the container size to change the chart size. My problem is, it seems the chart is resized by ratio. When the chart becomes larger, the margin in the left and right size also becomes larger. Is there a way to fix the margin size?

Part of the code to build the chart:

import * as echarts from 'echarts';

let traceSetWindowIndex = 0;

function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (document.getElementById(elmnt.id + "-header")) {
        // if present, the header is where you move the DIV from:
        document.getElementById(elmnt.id + "-header").onmousedown = dragMouseDown;
    } else {
        // otherwise, move the DIV from anywhere inside the DIV:
        elmnt.onmousedown = dragMouseDown;
    }

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

function drawEChartsOnTraceSetWindow(traceChartWindow) {
    const windowId = traceChartWindow.id;
    const windowMainChart = document.getElementById(windowId + "-main-chart");
    const windowBottomChart = document.getElementById(windowId + "-bottom-chart");

    const pt_num = 10000000;
    let xValues = new Int32Array(pt_num);
    let yValues = new Float64Array(pt_num);
    // let yValues2 = new Float32Array(pt_num);
    for (let i = 0; i < pt_num; i++) {
        xValues[i] = i;
        yValues[i] = Math.sin(i / 100000);
        // yValues2[i] = -yValues[i];
    }

    let myChart = echarts.init(windowMainChart);
    let option = {
        animation: false,
        // sampling: 'lttb',
        xAxis: {
          type: 'value',
          minorTick: {
            show: true,
          }
        },
        yAxis: {
          type: 'value'
        },
        dataset: {
            dimensions:[
                { name: 'x', type: 'int'}, 
                { name: 'y', type: 'float'}
            ],
            source: [xValues, yValues]
        },
        series: {
            type: 'line',
            // symbol: 'none',
            symbolSize: 2,
            showSymbol: false,
            encode: {
                'y': 'y',
                'x': 'x'
            },
            seriesLayoutBy: 'row'
        }
    };
    myChart.setOption(option);

    const resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
            if (entry.borderBoxSize) {
                myChart.resize();
            }
        }
    });
    resizeObserver.observe(traceChartWindow);
}

function createTraceSetWindow() {
    const windowElemID = "trace-set-window#" + traceSetWindowIndex;
    traceSetWindowIndex += 1;

    const traceSetWindow = document.createElement("div");
    traceSetWindow.classList.add("trace-set-window");
    traceSetWindow.id = windowElemID;

    const windowHeader = document.createElement("div");
    windowHeader.classList.add("trace-set-window-header");
    windowHeader.id = windowElemID + "-header";
    traceSetWindow.appendChild(windowHeader);

    const mainChart = document.createElement("div");
    mainChart.classList.add("trace-set-window-main-chart");
    mainChart.id = windowElemID + "-main-chart";
    traceSetWindow.appendChild(mainChart);

    const sideChart = document.createElement("div");
    sideChart.classList.add("trace-set-window-bottom-chart");
    sideChart.id = windowElemID + "-bottom-chart";
    traceSetWindow.appendChild(sideChart);

    const rightDragger = document.createElement("div");
    rightDragger.classList.add("trace-set-window-right-grabber");
    rightDragger.addEventListener("mousedown", (evt) => {
        let startX = evt.clientX;
        let startWidth = parseInt(document.defaultView.getComputedStyle(traceSetWindow).width, 10);
        function doDrag(e) {
            // Calculate the new width
            const newWidth = startWidth + e.clientX - startX;
            // Apply the new width (with minimum width guard)
            traceSetWindow.style.width = newWidth + 'px';
        }
        function stopDrag() {
            // Remove the event listeners when dragging stops
            document.documentElement.removeEventListener('mousemove', doDrag, false);
            document.documentElement.removeEventListener('mouseup', stopDrag, false);
        }
        document.documentElement.addEventListener('mousemove', doDrag, false);
        document.documentElement.addEventListener('mouseup', stopDrag, false);
    });
    traceSetWindow.appendChild(rightDragger);

    const leftDragger = document.createElement("div");
    leftDragger.classList.add("trace-set-window-left-grabber");
    leftDragger.addEventListener("mousedown", (evt) => {
        let startX = evt.clientX;
        let startLeft = parseInt(document.defaultView.getComputedStyle(traceSetWindow).left, 10);
        let startWidth = parseInt(document.defaultView.getComputedStyle(traceSetWindow).width, 10);
        function doDrag(e) {
            const newWidth = startWidth - e.clientX + startX;
            traceSetWindow.style.width = newWidth + 'px';
            const newLeft = startLeft + e.clientX - startX;
            traceSetWindow.style.left = newLeft + 'px';
        }
        function stopDrag() {
            // Remove the event listeners when dragging stops
            document.documentElement.removeEventListener('mousemove', doDrag, false);
            document.documentElement.removeEventListener('mouseup', stopDrag, false);
        }
        document.documentElement.addEventListener('mousemove', doDrag, false);
        document.documentElement.addEventListener('mouseup', stopDrag, false);
    });
    traceSetWindow.appendChild(leftDragger);

    const bottomDragger = document.createElement("div");
    bottomDragger.classList.add("trace-set-window-bottom-grabber");
    bottomDragger.addEventListener("mousedown", (evt) => {
        let startY = evt.clientY;
        let startHeight = parseInt(document.defaultView.getComputedStyle(traceSetWindow).height, 10);
        function doDrag(e) {
            const newHeight = startHeight + e.clientY - startY;
            traceSetWindow.style.height = newHeight + 'px';
        }
        function stopDrag() {
            // Remove the event listeners when dragging stops
            document.documentElement.removeEventListener('mousemove', doDrag, false);
            document.documentElement.removeEventListener('mouseup', stopDrag, false);
        }
        document.documentElement.addEventListener('mousemove', doDrag, false);
        document.documentElement.addEventListener('mouseup', stopDrag, false);
    });
    traceSetWindow.appendChild(bottomDragger);

    const rightCorner = document.createElement("div");
    rightCorner.classList.add("trace-set-window-right-corner");
    rightCorner.addEventListener("mousedown", (evt) => {
        let startX = evt.clientX;
        let startY = evt.clientY;
        let startWidth = parseInt(document.defaultView.getComputedStyle(traceSetWindow).width, 10);
        let startHeight = parseInt(document.defaultView.getComputedStyle(traceSetWindow).height, 10);
        function doDrag(e) {
            const newWidth = startWidth + e.clientX - startX;
            traceSetWindow.style.width = newWidth + 'px';
            const newHeight = startHeight + e.clientY - startY;
            traceSetWindow.style.height = newHeight + 'px';
        }
        function stopDrag() {
            // Remove the event listeners when dragging stops
            document.documentElement.removeEventListener('mousemove', doDrag, false);
            document.documentElement.removeEventListener('mouseup', stopDrag, false);
        }
        document.documentElement.addEventListener('mousemove', doDrag, false);
        document.documentElement.addEventListener('mouseup', stopDrag, false);
    });
    traceSetWindow.appendChild(rightCorner);

    const leftCorner = document.createElement("div");
    leftCorner.classList.add("trace-set-window-left-corner");
    leftCorner.addEventListener("mousedown", (evt) => {
        let startX = evt.clientX;
        let startY = evt.clientY;
        let startLeft = parseInt(document.defaultView.getComputedStyle(traceSetWindow).left, 10);
        let startWidth = parseInt(document.defaultView.getComputedStyle(traceSetWindow).width, 10);
        let startHeight = parseInt(document.defaultView.getComputedStyle(traceSetWindow).height, 10);
        function doDrag(e) {
            const newWidth = startWidth - e.clientX + startX;
            traceSetWindow.style.width = newWidth + 'px';
            const newLeft = startLeft + e.clientX - startX;
            traceSetWindow.style.left = newLeft + 'px';
            const newHeight = startHeight + e.clientY - startY;
            traceSetWindow.style.height = newHeight + 'px';
        }
        function stopDrag() {
            // Remove the event listeners when dragging stops
            document.documentElement.removeEventListener('mousemove', doDrag, false);
            document.documentElement.removeEventListener('mouseup', stopDrag, false);
        }
        document.documentElement.addEventListener('mousemove', doDrag, false);
        document.documentElement.addEventListener('mouseup', stopDrag, false);
    });
    traceSetWindow.appendChild(leftCorner);

    document.getElementById("traceSetWindowContainer").appendChild(traceSetWindow);
    traceSetWindow.style.top = "30px";
    traceSetWindow.style.left = "30px";

    
    drawEChartsOnTraceSetWindow(traceSetWindow);
    dragElement(traceSetWindow);

}