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.

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

Tags:

Did you find this information helpful?

Yes

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!

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!

CONTACT US