How to make chart responsive when sidebar hide and unhide

[asep]

How to make chart responsive when side bar hide and unhide?
i use reactjs typescript

[Swetha Babu]

Hi asep,

Greetings from Syncfision. 

We can achieve your requirement by calling the refresh method while closing and opening the sidebar menu.  Please find the below code snippet for the same

<AccumulationChartComponent  id='acccharts' ref={chart => this.accchartInstance = chart}></AccumulationChartComponent>

<ChartComponent id='charts' ref={chart => this.chartInstance = chart}> </ChartComponent> 

//close the sidebar 

    closeClick() { 

        this.chartInstance.refresh(); 

        this.accchartInstance.refresh(); 

    } 

    //open the sidebar 

    openClick() { 

        this.chartInstance.refresh(); 

         this.accchartInstance.refresh(); 

    } 

Kindly revert us if you have any concerns.

Thanks, 

Swetha

[asep]

its work for me, thank you so much

[Durga Gopalakrishnan]

Hi Asep,

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.

Regards,

Durga G

[Chedva Neuman]

Hi,

I have similar issue,

how i did it in react hooks?

thanks!

[Durga Gopalakrishnan]

Hi Chedva,

We suggest you to follow below snippet to re-render the chart and accumulation chart using refresh method while working with react hooks. 

<AccumulationChartComponent  id='acccharts'></AccumulationChartComponent>

<ChartComponent id='charts'> </ChartComponent>

  //close the sidebar

    closeClick() {

       var chartObj = document.getElementById("charts").ej2_instances[0];

       var accObj = document.getElementById("acccharts").ej2_instances[0];

       chartObj.refresh();

       accObj.refresh();

    }

    //open the sidebar

   openClick() {     

        var chartObj = document.getElementById("charts").ej2_instances[0];

        //...

       chartObj.refresh();

       //.....

   }

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.