DateTime,Numeric and Logarithmic Axis

28 Feb 20225 minutes 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.

<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>
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.

<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>
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