Appearance

28 Feb 20225 minutes to read

Stock Chart Title

Stock Chart can be given a title using title property, to show the information about the data plotted.

<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price">
                <e-stockchart-series-collection>
                    <e-stockchart-series type='Candle' xName="x"> </e-stockchart-series>
                </e-stockchart-series-collection>
                <e-stockchart-titlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" size="20px" color="#E27F2D"></e-stockchart-titlestyle>
            </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();
        }
    }
}

Title Customizations

The textStyle property of chart title provides options to customize the size, color, fontFamily, fontWeight, fontStyle, opacity, textAlignment and textOverflow.

<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price">
                <e-stockchart-series-collection>
                    <e-stockchart-series type='Candle' xName="x"> </e-stockchart-series>
                </e-stockchart-series-collection>
                <e-stockchart-titlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" size="20px" color="#E27F2D" textOverflow="Wrap"></e-stockchart-titlestyle>
            </ejs-stockchart>

    <script src="~/scripts/chart/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();
        }
    }
}

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.

<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price" theme="Highcontrast">
                <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();
        }
    }
}

See Also