Remove white space around chart

[Sarah Riethmüller]

Hi,

I would like to remove the white space around chart so that the chart fills the parent div and the white gap between the both charts is closed and later add a little padding on the right chart. But currently the gap is too big.

Here are my charts : https://imgur.com/a/YKvlnrk

How can I achieve this?

Thanks

Sarah

[Baby Palanidurai]

Hi Sarah, 

Thanks for using syncfusion products, 

 

   We have analyzed your query and the reported scenario is actual behavior for pie charts, pie and doughnut will get placed to the center of the container. We have consider your requirement to move the center of the chart from its default position and added it to our feature request list, this feature will be available in Essential studio volume 4 main release 2018. 

 

As a workaround, we have moved the center of the chart from its default position by setting transform to chart series element’s width in the chart loaded event. Please find the  below code snippet to achieve this requirement, 

 

<div class="grid-container"> 

  <div class="grid1"> 

<ejs-accumulationchart id="chart-container"  (loaded)="loaded($event)"> 

    </ejs-accumulationchart> 

  </div> 

  <div class="grid2"> 

<ejs-accumulationchart id="chart-container1"  (loaded)="loaded1($event)"> 

    </ejs-accumulationchart> 

  </div> 

</div> 

 

public loaded(args: IAccLoadedEventArgs): void { 

   let element = document.getElementById('chart-container_Series_0'); 

   let x = (args.accumulation.availableSize.width - element.getBoundingClientRect().width) / 2; 

   element.setAttribute("transform","translate(" + x + ", 0)"); 

  } 

  public loaded1(args: IAccLoadedEventArgs): void { 

   let element = document.getElementById('chart-container1_Series_0'); 

   let x = (args.accumulation.availableSize.width - element.getBoundingClientRect().width) / 2; 

   element.setAttribute("transform","translate(" + (-x) + ", 0)"); 

  } 

 

Screenshot: 

 

 

 

Sample for your reference can be find from below link, 

https://stackblitz.com/edit/angular-4izfqo?file=src/app/app.component.ts 

  

 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby. 

[Sarah Riethmüller]

Hi.

thanks this worked, but I would like to remove the white space too.

https://imgur.com/a/rG5DxeK

The picture shows that there is a lot of white space around the charts.

I would like to make the charts bigger without making the white space bigger.

How can I achieve this?

Thanks

Sarah

[Dharanidharan Dharmasivam]

Hi Sarah, 

We would like to let you know the default behavior of pie chart. The pie chart diameter calculation is based on minimum of width/height of chart. For example, if you set height as 1000px and  width as 500px for pie chart, then the minimum value will considered, here width of 500px will be account for diameter and pie chart will be rendered. While using semi pie also rendering is based on same scenario, so that’s why remaining half of space will be available in the DOM. To reduce the space in semi pie chart, we have already logged the feature and which will be available in Essential Studio volume 4 main release. 

However, your requirement can be achieved as a workaround. We have prepared sample in which we have rendered the chart with height and width as 300px and set the parent element’s width as 120px(this has to be given manually with respect to your scenario) and then moved the center of the chart from its default position by setting transform to chart series element’s width in the chart loaded event.  

 

Please find the below code snippet to achieve this requirement. 

 

<div class="grid-container"> 

  <div class="grid1" style="width: 120px"> 

<ejs-accumulationchart id="chart-container" (loaded)="loaded($event)" width=300 height=300> 

    </ejs-accumulationchart> 

  </div> 

  <div class="grid2" style="width: 120px"> 

<ejs-accumulationchart id="chart-container1" (loaded)="loaded1($event)" width=300 height=300> 

    </ejs-accumulationchart> 

  </div> 

 

 //... 

 

</div> 

 

public loaded(args: IAccLoadedEventArgs): void { 

   let element = document.getElementById('chart-container_Series_0'); 

   let x = (args.accumulation.availableSize.width - element.getBoundingClientRect().width) / 2; 

   element.setAttribute("transform","translate(" +( -x) + ", 0)"); 

  } 

  public loaded1(args: IAccLoadedEventArgs): void { 

   let element = document.getElementById('chart-container1_Series_0'); 

   let x = (args.accumulation.availableSize.width - element.getBoundingClientRect().width) / 2; 

   element.setAttribute("transform","translate(" + (-x) + ", 0)"); 

    

  } 

 

//... 

 

 

Screenshot: 

 

 

 

Sample for your reference can be find from below link, 

https://stackblitz.com/edit/angular-tn6s5w?file=src/app/app.component.html 

Thanks, 

Dharani. 

[Jason]

"To reduce the space in semi pie chart, we have already logged the feature and which will be available in Essential Studio volume 4 main release."

Did this ever become a feature? If so, can you explain how to use the feature to reduce space around a SEMI PIE chart?

[Swetha Babu]

Hi Jason,

Greetings from Syncfusion.

Minimum of chart width and height will be considered as the pie radius. If the height for the chart container is too high, then the space will occur in case of height. So we suggest to reduce the height or width for the chart based on your requirement and also we suggest you to change center y value or x value to move the pie upper or lower based on the white space rendered.

More information about the pie center can be found here :

https://ej2.syncfusion.com/documentation/accumulation-chart/pie-dough-nut/#pie-center

Please get back to us if you need further assistance.

Regards,

Swetha