Axis types
25 Sep 202314 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.
<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();
}
}
}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.
@(Html.EJS().StockChart("container").Load("stockload")
.PrimaryXAxis(xaxis =>xaxis.MajorGridLines(mg=>mg.Width(0)).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTimeCategory)
.CrosshairTooltip(ct=>ct.Enable(true))
).Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).XName("x").YName("y").Add();
})
.Crosshair(cr=>cr.Enable(true))
.Tooltip(tp => tp.Enable(true).Header("AAPL Stock Price")).Title("AAPL Stock Price")
.Render())
<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.
<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();
}
}
}