Chart can render to its container size. You can set the size via inline or CSS as demonstrated below.
<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price" width="650" height="350">
<e-stockchart-series-collection>
<e-stockchart-series type='Candle' xName="x"> </e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
</div>
<script src="~/financial-data.js"></script>
<script>
var data = chartData;
function stockload(args) {
args.stockChart.series[0].dataSource = data;
}
</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.
<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price" width="650px" height="350px">
<e-stockchart-series-collection>
<e-stockchart-series type='Candle' xName="x"> </e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
<script src="~financial-data.js"></script>
<script>
var data = chartData;
function stockload(args) {
args.stockChart.series[0].dataSource = data;
}
</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.
<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price" width="80%" height="90%">
<e-stockchart-series-collection>
<e-stockchart-series type='Candle' xName="x"> </e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
<script src="~/financial-data.js"></script>
<script>
var data = chartData;
function stockload(args) {
args.stockChart.series[0].dataSource = data;
}
</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.