An axis can be positioned in the chart area using [crossesAt] (https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.StockChartStockChartAxis.html#Syncfusion_EJ2_Charts_StockChartStockChartAxis_CrossesAt) and [crossesInAxis] (https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.StockChartStockChartAxis.html#Syncfusion_EJ2_Charts_StockChartStockChartAxis_CrossesInAxis) properties. The [crossesAt] (https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.StockChartStockChartAxis.html#Syncfusion_EJ2_Charts_StockChartStockChartAxis_CrossesAt)
property specifies the values (datetime, numeric, or logarithmic) at which the axis line has to be intersected
with the vertical axis or vice-versa, and the [crossesInAxis] (https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.StockChartStockChartAxis.html#Syncfusion_EJ2_Charts_StockChartStockChartAxis_CrossesInAxis) property specifies the axis name with which the
axis line has to be crossed.
@Html.EJS().StockChart("container").PrimaryXAxis(xaxis =>xaxis.CrossesAt(160))
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
<script src="~/financial-data.js"></script> .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();
}
}
}You can add a title to the axis using titleproperty to provide quick
information to the user about the data plotted in the axis.Title style can be customized using titleStyle property of the axis.
@(Html.EJS().StockChart("container").Title("AAPL Stock Price")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
<script src="~/financial-data.js"></script> .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();
}
}
}You can customize the width, color and size of the minor and major tick lines, using
majorTickLines and
minorTickLines properties in the axis.
@Html.EJS().StockChart("container").Title("AAPL Stock Price")
.PrimaryXAxis(xaxis =>xaxis.MajorTickLines(mg=>mg.Color("blue").Width(5)
).MinorTickLines(mg=>mg.Color("red").Width(0)))
.PrimaryYAxis(yaxis =>yaxis.MajorTickLines(mt=>mt.Color("green").Width(5)
).MinorTickLines(mg=>mg.Color("red").Width(0)))
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.Render()
<script src="~/financial-data.js"></script>
<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();
}
}
}You can customize the width, color and dashArray of the minor and major grid lines,
using majorGridLines and
minorGridLines properties in the axis.
@Html.EJS().StockChart("container").Title("AAPL Stock Price")
.PrimaryXAxis(xaxis =>xaxis.MajorGridLines(mg=>mg.Color("blue").Width(1)
).MinorGridLines(mg=>mg.Color("red").Width(0)))
.PrimaryYAxis(yaxis =>yaxis.MajorGridLines(mt=>mt.Color("green").Width(1)
).MinorGridLines(mg=>mg.Color("red").Width(0)))
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.Render()
<script src="~/financial-data.js"></script>
<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();
}
}
}In addition to primary X and Y axis, we can add n number of axis to the chart. Series can be associated with
this [axis] (https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.StockChartAxis.html), by mapping with axis’s unique name.
<script src="~goog.js"></script>
<script src="~googl.js"></script>
@Html.EJS().StockChart("container").Title("Multiple Series")
.PrimaryXAxis(xaxis =>xaxis.MajorGridLines(mg=>mg.Width(0)).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime))
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).DataSource("data1").XName("x").YName("close").Add();
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).YAxisName("yAxis").DataSource("data2").XName("x").YName("close").Add();
}).Axes(ax =>
{
ax.OpposedPosition(true).RowIndex(0).Name("yAxis").Add();
}
)
.Render()
<script>
var data1 = window.goog;
var data2 = window.googl;
</script>public ActionResult Index()
{
List<MultipleAxesChartData> chartData = new List<MultipleAxesChartData>
{
new MultipleAxesChartData { x = "Sun", y = 35, y1 = 30 },
new MultipleAxesChartData { x = "Mon", y = 40, y1 = 28 },
new MultipleAxesChartData { x = "Tue", y = 80, y1 = 29 },
new MultipleAxesChartData { x = "Wed", y = 70, y1 = 30 },
new MultipleAxesChartData { x = "Thu", y = 65, y1 = 33 },
new MultipleAxesChartData { x = "Fri", y = 55, y1 = 32 },
new MultipleAxesChartData { x = "Sat", y = 50, y1 = 34 }
};
ViewBag.dataSource = chartData;
return View();
}
public class MultipleAxesChartData
{
public string x;
public double y;
public double y1;
}When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property
isInversed to true.
@Html.EJS().StockChart("container").Title("AAPL Stock Price")
.PrimaryXAxis(xaxis =>xaxis.IsInversed(true))..PrimaryYAxis(yaxis =>yaxis.IsInversed(true))
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.Render()
<script src="~/financial-data.js"></script>
<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();
}
}
}To place an axis opposite from its original position, set opposedPosition
property of the axis to true.
@Html.EJS().StockChart("container").Title("AAPL Stock Price")
.PrimaryXAxis(xaxis =>xaxis.OpposedPosition(true))
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
})
.Render()
<script src="~/financial-data.js"></script>
<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();
}
}
}