Appearance
28 Feb 20229 minutes to read
Stock Chart Title
Stock Chart can be given a title using Title property, to show the information about the data plotted.
<script src="~/financial-data.js"></script>
@Html.EJS().StockChart("container").Title("AAPL Stock Price")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.TitleStyle(ts => ts.Color("#E27F2D").FontFamily("Arial").FontStyle("italic").FontWeight("regular").Size("20px"))
.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();
}
}
}Title Customizations
The TextStyle property of chart title provides options to customize the Size, Color, FontFamily, FontWeight, FontStyle, Opacity, TextAlignment and TextOverflow.
<script src="~/financial-data.js"></script>
@Html.EJS().StockChart("container").Title("AAPL Stock Price")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.TitleStyle(ts => ts.Color("#E27F2D").FontFamily("Arial").FontStyle("italic").FontWeight("regular").Size("20px").TextOverflow(Syncfusion.EJ2.Charts.TextOverflow.Wrap))
.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();
}
}
}Stock Chart Theme
Changing theme will affect background color,gridlines,tooltip colors and appearance.
Theme property of Stock chart is shipped with several built-in themes such as Material, Fabric, Bootstrap , HighContrastLight, MaterialDark, FabricDark, FabricDark, HighContrast and BootstrapDark.
<script src="~/financial-data.js"></script>
@Html.EJS().StockChart("container").Load("stockload").Title("AAPL Stock Price").Theme(Syncfusion.EJ2.Charts.ChartTheme.HighContrast)
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.Render()
<script>
var data = window.chartData;
function stockload(args) {
args.stockChart.titleStyle = {
size: '20px'
};
}
</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();
}
}
}