Resize the chart width programmatically

[HT 89]

Hi Syncfusion, as the title stated, is there a way to do that? Thanks a lot for your help.

[Baby Palanidurai]

Hi HT, 

   Thanks for using syncfusion products, 

      We have analyzed your query and your requirement can be achieved by width property in size options. For more information on chart dimensions, kindly find the help document 

Please find the code snippet below to achieve this requirement. 

<ej-chart id="chartcontainer" size.width="600" size.height="450"> </ej-chart> 

Screenshot: 

 

Sample for your reference can be find from below link, 

 http://www.syncfusion.com/downloads/support/forum/137368/ze/sample1375979677 

Please let me know, if you have any queries. 

Thanks, 

Baby. 

[HT 89]

Hi Baby Palanidurai, 

thanks for your fast reply. I know the way you posted. I should have been clearer and I'm really sorry about that. May I ask if there's another way to change the chart width like inside a typescript file? I would like to change the chart width back to 100% when printing it on devices with a small viewport where the chart width is narrower. Thanks a lot. 

[Dharanidharan Dharmasivam]

Hi HT, 

Thanks for your revert. 

We have analyzed your requirement. If you need to set the size of the chart in the typescript file, then your requirement can be achieved with the following code snippet. 

Angular: 

[app.component.ts] 

//Assign the required width to a public variable in typescript file 

public width: string = '400'; 

 

[app.component.html] 

 

//Assign the width to chart in html file 

<ej-chart [size.width]="width"> 

</ej-chart> 

If you need to set the size(width) dynamically to chart, then it can be achieved with below code snippet. 

<button (click)="resizeChart()">Chart Resize</button> 

resizeChart() { 

        var chart = $("#container").ejChart("instance"); 

        chart.model.size.width = window.outerWidth; 

        chart.redraw(); 

      } 

Here, in a button click event, we have changed the size of chart, by assigning the new width and refreshing it. You can change this with respect to your scenario, when the viewport is small, you can refresh the chart with 100% width. 

We have also attached sample for your reference. Find the sample from below link, 

http://www.syncfusion.com/downloads/support/forum/137368/ze/chartSample-558870709  

 

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani. 

[HT 89]

Thanks a lot for your help, Dharanidharan Dharmasivam.

[Dharanidharan Dharmasivam]

Hi HT, 

Thanks for the update. 

Kindly revert us, if you need any further assistance. 

Thanks, 

Dharani.