Chart can render to its container size. You can set the size via inline or CSS as demonstrated below.
<script src="~/financial-data.js"></script>
<div class="control-section">
<div id="control-container" >
@(Html.EJS().StockChart("container").Title("AAPL Stock Price").Width("650").Height("350")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.Render())
<script>
var data = window.chartData;
</script>
}using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
public partial class StockChartController : Controller
{
public IActionResult Default()
{
return View();
}
}
}You can also set size for chart directly through width and
heightproperties.
In Pixel
You can set the size of chart in pixel as demonstrated below.
<script src="~/financial-data.js"></script>
@Html.EJS().StockChart("container").Title("AAPL Stock Price").Width("650px").Height("350px")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.Render()
<script>
var data = window.chartData;
</script>using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
public partial class StockChartController : Controller
{
public IActionResult Default()
{
return View();
}
}
}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.
<script src="~/financial-data.js"></script>
@(Html.EJS().StockChart("container").Title("AAPL Stock Price").Width("80%").Height("90%")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.Render())
<script>
var data = window.chartData;
</script>using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
public partial class StockChartController : Controller
{
public IActionResult Default()
{
return View();
}
}
}Note: When you do not specify the size, it takes
450pxas the height and window size as its width.