Chart Dimensions

19 Dec 20229 minutes to read

Size for Container

Chart can render to its container size. You can set the size via inline or CSS as demonstrated below.

<ejs-chart id="container" title="Inflation - Consumer Price" width="650" height="350">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
            </e-series>
        </e-series-collection>
    </ejs-chart>
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 }, 
                new ColumnChartData { x= "GBR", yValue= 27 }, 
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 26 },
                new ColumnChartData { x= "AUS", yValue= 26 },
                new ColumnChartData { x= "IND", yValue= 26 },
                new ColumnChartData { x= "DEN", yValue= 26 },
                new ColumnChartData { x= "MEX", yValue= 26 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

Size for Chart

You can also set size for chart directly through width and height properties.

In Pixel

You can set the size of chart in pixel as demonstrated below.

<ejs-chart id="container" title="Inflation - Consumer Price" width="650px" height="350px">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
            </e-series>
        </e-series-collection>
    </ejs-chart>
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 }, 
                new ColumnChartData { x= "GBR", yValue= 27 }, 
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 26 },
                new ColumnChartData { x= "AUS", yValue= 26 },
                new ColumnChartData { x= "IND", yValue= 26 },
                new ColumnChartData { x= "DEN", yValue= 26 },
                new ColumnChartData { x= "MEX", yValue= 26 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

In Percentage

By setting value in percentage, chart gets its dimension with respect to its container. For example, when the height is ‘50%’, chart renders to half of the container height.

<ejs-chart id="container" title="Inflation - Consumer Price" width="80%" height="90%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
            </e-series>
        </e-series-collection>
    </ejs-chart>
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 }, 
                new ColumnChartData { x= "GBR", yValue= 27 }, 
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 26 },
                new ColumnChartData { x= "AUS", yValue= 26 },
                new ColumnChartData { x= "IND", yValue= 26 },
                new ColumnChartData { x= "DEN", yValue= 26 },
                new ColumnChartData { x= "MEX", yValue= 26 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

NOTE

 When you do not specify the size, it takes 450px as the height and window size as its width.