Axis types

25 Sep 202313 minutes to read

DateTime axis

DateTime axis uses date time scale and displays the date time values as axis labels in the specified format. To use DateTime axis, set the ValueType of axis to DateTime.

<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-primaryxaxis valueType="DateTime">
                </e-stockchart-primaryxaxis>
            </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();
        }
    }
}

DateTimeCategory axis

DateTimeCategory axis in the stock chart is used to display only business days. To use DateTimeCategory axis, set the ValueType of axis to DateTimeCategory.

<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price">
    <e-stockchart-series-collection>
        <e-stockchart-series type='Line' xName="x" yName="y"> </e-stockchart-series>
    </e-stockchart-series-collection>
    <e-stockchart-primaryxaxis valueType="DateTimeCategory">
        <e-majorgridlines width="0"></e-majorgridlines>
        <e-crosshairtooltip enable="true"></e-crosshairtooltip>
    </e-stockchart-primaryxaxis>
    <e-stockchart-crosshairsettings enable="true"></e-stockchart-crosshairsettings>
    <e-stockchart-tooltipsettings enable="true" header="AAPL Stock Price"></e-stockchart-tooltipsettings>
</ejs-stockchart>

<script>

    let datetimeCategoryData = [
        { x: new Date(2021, 1, 11) }, { x: new Date(2021, 1, 12) }, { x: new Date(2021, 1, 13) }, { x: new Date(2021, 1, 14) }, { x: new Date(2021, 1, 15) },
        { x: new Date(2021, 1, 19) }, { x: new Date(2021, 1, 20) }, { x: new Date(2021, 1, 21) }, { x: new Date(2021, 1, 22) }, { x: new Date(2021, 3, 1) },
        { x: new Date(2021, 3, 2) }, { x: new Date(2021, 4, 1) }, { x: new Date(2021, 4, 5) }, { x: new Date(2021, 4, 6) }, { x: new Date(2021, 4, 7) },
        { x: new Date(2021, 4, 11) }, { x: new Date(2021, 4, 13) }, { x: new Date(2021, 4, 15) }, { x: new Date(2021, 4, 16) }, { x: new Date(2021, 4, 17) },
        { x: new Date(2021, 4, 18) }, { x: new Date(2021, 4, 20) }, { x: new Date(2021, 4, 21) }, { x: new Date(2021, 4, 23) }, { x: new Date(2021, 4, 25) },
        { x: new Date(2021, 5, 1) }, { x: new Date(2021, 5, 2) }, { x: new Date(2021, 5, 6) }, { x: new Date(2021, 5, 7) }, { x: new Date(2021, 5, 8) },
        { x: new Date(2021, 5, 11) }, { x: new Date(2021, 5, 15) }, { x: new Date(2021, 5, 18) }, { x: new Date(2021, 5, 20) }, { x: new Date(2021, 5, 25) },
        { x: new Date(2021, 6, 1) }, { x: new Date(2021, 6, 2) }, { x: new Date(2021, 6, 3) }, { x: new Date(2021, 6, 4) }, { x: new Date(2021, 6, 5) },
        { x: new Date(2021, 6, 10) }, { x: new Date(2021, 6, 11) }, { x: new Date(2021, 6, 12) }, { x: new Date(2021, 6, 13) }, { x: new Date(2021, 6, 15) },
        { x: new Date(2021, 6, 16) }, { x: new Date(2021, 6, 17) }, { x: new Date(2021, 6, 18) }, { x: new Date(2021, 6, 19) }, { x: new Date(2021, 6, 20) }
    ]
    function stockload(args) {
        let series2 = [];
        let point2;
        for (var i = 0; i < 46; i++) {
            point2 = {
                x: datetimeCategoryData[i].x,
                y: getRandomInRange(120, 130),
                high: getRandomInRange(88, 92),
                low: getRandomInRange(76, 86),
                open: getRandomInRange(75, 85),
                close: getRandomInRange(85, 90),
                volume: getRandomInRange(660187068, 965935749)
            };
            series2.push(point2);
        }
        args.stockChart.series[0].dataSource = series2;
    }
    function getRandomInRange(min, max) {
        const randomDecimal = Math.random();
        const randomValue = randomDecimal * (max - min) + min;
        return randomValue;
    }

</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 DateTimeCategory()
        {
            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). To use Logarithmic axis, set theValueType of axis to Logarithmic.

<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price">
                <e-stockchart-series-collection>
                    <e-stockchart-series type='Candle' xName="x" yName="volume"> </e-stockchart-series>
                </e-stockchart-series-collection>
                 <e-stockchart-primaryxaxis valueType="DateTime">
                </e-stockchart-primaryxaxis>
                <e-stockchart-primaryyaxis valueType="Logarithmic"></e-stockchart-primaryyaxis>
            </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