We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Spacing around chart


I am wondering how you remove ALL space around the chart. The chart I created is a Doughnut type, but even with the legend turned off, the chart only takes up about 50% of its area.
When I inspect the elements, the element in question seems to be "savingsChart_svg_SvgRect" and the actual graph is "savingsChart_svg_SeriesCollection".
Is there anyway to make the chart take up full space? I've already set the width to 100% and isResponsive is true.


1 Reply

SK Saravana Kumar Kanagavel Syncfusion Team September 16, 2016 10:12 AM UTC

Hi Joshua, 
Thanks for contacting Syncfusion Support. 
We have analyzed your query and created a sample based on your requirement. And we would like to inform that pie and doughnut chart rendering based on its calculation of proportional ratio by specified height and width to the chart. So if you wish to remove the space on around the chart, then please refer the code example below. 
            elementSpacing: 0,   // you can remove the space by based on specified value 
            margin: { left: 0, right: 0, top: 0, bottom: 0 }, 
            doughnutSize: 1,  
            size: { height: "500", width: "500" } //You should set the same size for height and width 
In the above code, we have removed the space on around the chart by using above API’s and also you should specify the doughnut size as 1. 
And you can find the sample from the below location. 
Now, doughnut chart has been rendered without spacing. 
Please fin the outputs of the sample below 
Please let us know if you have concern. 
Saravana Kumar K 

Live Chat Icon For mobile
Up arrow icon