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

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to customize the chart size?

Platform: jQuery |
Control: ejChart

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.


    size: {
        width: '500',
        height: '500'


The following screenshot displays the Chart in specified size.

Customization of the chart size

Figure: Chart with dimensions 500 X 500

JS Playground sample link: Chart Size

You must log in to leave a comment
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

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile