The 'Data Visualization' like Linear Gauge, Circular Gauge and Charts in my page are getting shrink after I make my window size smaller or bigger

[CHOO WAI PAN]

This is how my page looks like before I make my window size any smaller or bigger. The image below is what the page looks like after I make the window size bigger.

[Nishanthi Panner Selvam]

Choo,

Greetings from Syncfusion.

We have analyzed your query based on that we have created spline , column chart and guages inside our dashBoardLayout. As we are unable to determine which dashboard layout you are using in your application. Chart and guages are rendered properly as per behavior whenever we resize the window and panel.

When you are placing the Circular Gauge and Linear Gauge component within the panel of dashboard layout component, we need to set the gauges with “height” and “width” properties as “100%”.

In the “created” and “resizeStop” events of the Dashboard layout, we need to call the “refresh” method of the gauges and chart to set proper size. Please find the code snippet below for your reference.

Code-snippet:

    function onCreated(args) {

        let chart = document.getElementById("linechart").ej2_instances[0]

        chart.refresh();

        let spline = document.getElementById("spline").ej2_instances[0]

        spline.refresh();

        let lineargaugeObj = document.getElementById("linear").ej2_instances[0]

        lineargaugeObj.refresh();

        let circulargaugeObj = document.getElementById("circular").ej2_instances[0]

        circulargaugeObj.refresh();

    }

    function onPanelResize(args) {

        var dashboardObject = document.getElementById("editableLayout").ej2_instances[0];

        if (args.element && args.element.querySelector('.e-panel-container .e-panel-content div')) {

            let chartObj = (args.element.querySelector('.e-panel-container .e-panel-content div')).ej2_instances[0];

            chartObj.refresh();

        }

        var dashboardObject1 = document.getElementById("editableLayout").ej2_instances[0];

        setTimeout(() => {

            if (args.element && args.element.querySelector('.e-panel-container div')) {

                let gaugeObj = (args.element.querySelector('.e-panel-container div')).ej2_instances[0];

                gaugeObj.refresh();

            }

        }, 500);

    }

Screenshot:

Resized chart and Guage	Back to its original state

You can find the sample and video for demonstration from the below link.

Sample for Guage: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CoreSample-1345482756

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/gauge1972410362

If you are still facing the reported issue, please let us know which dashboard layout you are using in your application. Please provide the code snippet for the same. It will be helpful for us to analyze and assist you in the same.

Regards,

Nishanthi

Attachment: Chart_and_guage_4fd2e6bf.zip