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.
Unfortunately, activation email could not send to your email. Please try again.

How to customize the chart size?

You can customize the width and height of the Chart by using size property of Chart. It has options to specify width and height of the chart. You can also specify chart dimensions in percentage. Refer to Chart Dimensions for more information about different units to specify chart size. The following code example explains how to customize the width and height of the Chart.

JS

 

The following screenshot displays the Chart in specified size.

Figure: Chart with dimensions 500 X 500

JS Playground sample link: Chart Size
Article ID: Published Date: Last Revised Date: Platform: Control:
3894 02/12/2015 08/10/2015 JavaScript ejChart
Did you find this information helpful?
Comments
Grant Clark Sep 08, 2015
Hi there, In this example, the width and height are both set to 500 pixels. However the image width="493" and height="476", and there is still padding inside the image. I understand this is just a screen image snip, but is it possible to get rid of the padding in the first svg container when the chart renders, so that the drawn areas of the chart are exactly the width and height specified? Thanks!
Reply
Anandaraj T [Syncfusion] Sep 09, 2015
Hi Grant, Link to the sample used for taking the screenshot is attached below the image. In that link, you can see that the SVG container takes 500 pixel width and height as specified by inspecting the DOM. By default, there is a padding of 10 pixel inside the SVG container. This can be customized using the margin option in Chart. Margin option has left, right, top and bottom properties to specify the padding between SVG container and left, right, top and bottom sides respectively. Sample for customizing the margin is available in the following JS Playground link http://jsplayground.syncfusion.com/mkpvygh0 Regards, Anandaraj
Grant Clark Oct 05, 2015
Thats great help Anadaraj, thanks very much!
Reply
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.