Search results

Axis Types in ASP.NET MVC Stock Chart control

08 Apr 2021 / 1 minute to read

DateTime Axis

Date time axis uses date time scale and displays the date time values as axis labels in the specified format and set the valueType of axis to DateTime.

razor
datetime.cs
Copied to clipboard
<script src="~/financial-data.js"></script>

            @(Html.EJS().StockChart("container").Title("AAPL Stock Price").IndicatorType(new List<Object>() { }).ExportType(new List<Object>() { }).TrendlineType(new List<Object>() { })
                     .PrimaryXAxis(xaxis =>xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime))
                                                                .Series(sr =>
                                                                {
                                                                    sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
                                                                })
                                                                .Render())

    <script>
        var data = window.chartData;
    </script>
Copied to clipboard
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();
        }
    }
}

Logarithmic Axis

Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106) and set the valueType of axis to Lograthmic.

razor
log.cs
Copied to clipboard
<script src="~/financial-data.js"></script>

            @(Html.EJS().StockChart("container").Title("AAPL Stock Price")
                  .PrimaryXAxis(xaxis =>xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime))
                  .PrimaryYAxis(yaxis =>yaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Logarithmic))
                                                                .Series(sr =>
                                                                {
                                                                    sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").YName("volume").Add();
                                                                })
                                                                .Render())

    <script>
        var data = window.chartData;    
    </script>
Copied to clipboard
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