Chart Dimensions
19 Dec 20228 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.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.Minimum(2)
.Maximum(5).
.Interval(2))
.Title("Olympic Medal Counts - RIO")
.Width("650")
.Height("350")
.Render()
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.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.Minimum(2)
.Maximum(5).
.Interval(2)).
Title("Olympic Medal Counts - RIO").Width("650px").Height("350px").Render()
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.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.Minimum(2)
.Maximum(5).
.Interval(2)).
Title("Olympic Medal Counts - RIO").Width("80%").Height("90%").Render()
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.