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();
        }
    }
}

See Also