Contents
- Annotations
- Columns
- CommonSeriesOptions
- Crosshair
- 3D chart
- Canvas rendering
- Indicators
- Legend
- primaryXAxis
- primaryYAxis
- Axes
- Rows
- Series
- marker
- TrendLines
- StripLines
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 202419 minutes to read
This article describes the API migration process of Chart component from Essential® JS 1 to Essential® JS 2.
Annotations
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| rotation of annotation |
Property:Annotations.Angle
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
.Angle(270).Add();
})
|
Not applicable |
| annotations |
Property:Annotations.Content
</br>
|
Property:Annotations.Content
</br>
@Html.EJS().Chart("container")
.Annotations(an => {
an.Content(ViewBag.content).Add();
})
|
| coordinate unit for annotation |
Property:Annotations.CoordinateUnit
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.CoordinateUnit(CoordinateUnit.Pixels).Add();
})
)
|
Property:Annotations.CoordinateUnits
</br>
@Html.EJS().Chart("container")
.Annotations(an => {
an.CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point).Add();
})
|
| horizontalAlignment for annotation |
Property:Annotations.HorizontalAlignment
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.HorizontalAlignment(HorizontalAlignment.Left).Add();
})
)
|
Property:Annotations.HorizontalAlignment
</br>
@Html.EJS().Chart("container")
.Annotations(an => {
an.HorizontalAlignment(Syncfusion.EJ2.Charts.Position.Near).Add();
})
|
| margin for annotation |
Property:Annotations.Margin
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.Margin(mr=>mr.Right(40)).Add();
})
)
|
Not applicable |
| Opacity for annotation |
Property:Annotations.Opacity
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.Opacity(0.2).Add();
})
)
|
Not applicable |
| Region for annotation with respect to chart or series |
Property:Annotations.Region
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.Region(Region.Series).Add();
})
)
|
Property:Annotations.Region
</br>
@Html.EJS().Chart("container")
.Annotations(an => {
an.Region(Region.Series).Add();
})
|
| verticalAlignment for annotation |
Property:Annotations.VerticalAlignment
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.VerticalAlignment(VerticalAlignment.Middle).Add();
})
)
|
Property:Annotations.VerticalAlignment
</br>
@Html.EJS().Chart("container")
.Annotations(an => {
an.VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Add();
})
|
| Visibility of annotations |
Property:Annotations.Visible
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.Visible(true).Add();
})
)
|
Not applicable |
| X offset for annotation |
Property:Annotations.X
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.X(170).Add();
})
)
|
Property:Annotations.X
</br>
@Html.EJS().Chart("container")
.Annotations(an => {
an.X("170").Add();
})
|
| X axis name in which annotation to be rendered |
Property:Annotations.XAxisName
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.XAxisName("xAxis").Add();
})
)
|
Property:Annotations.XAxisName
</br>
@Html.EJS().Chart("container")
.Annotations(an => {
an.XAxisName("xAxis").Add();
})
|
| Y offset for annotation |
Property:Annotations.Y
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.Y("50").Add();
})
)
|
Property:Annotations.Y
</br>
@Html.EJS().Chart("container")
.Annotations(an => {
an.Y("50").Add();
})
|
| Y axis name in which annotation to be rendered |
Property:Annotations.YAxisName
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(an => {
an.YAxisName("yAxis").Add();
})
)
|
Property:Annotations.YAxisName
</br>
@Html.EJS().Chart("container")
.Annotations(an => {
an.YAxisName("yAxis").Add();
})
|
Columns
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Columns in chart |
Property:ColumnDefinitions
</br>
@(Html.EJ().Chart("chartContainer")
.ColumnDefinitions()
|
Property:Columns
</br>
@Html.EJS().Chart("container")
.Columns()
|
| unit |
Property:ColumnDefinitions.Unit
</br>
@(Html.EJ().Chart("chartContainer")
.ColumnDefinitions(cdn =>
{
cdn.Unit("percentage").Add();
})
</div>
|
Not applicable |
| width of columns in chart |
Property:ColumnDefinitions.ColumnWidth
</br>
@(Html.EJ().Chart("chartContainer")
.ColumnDefinitions(cdn =>
{
cdn.ColumnWidth(50).Add();
})
|
Property:Columns.Width
</br>
@Html.EJS().Chart("container")
.Columns(columns =>
{
columns.width("50%").Add();
})
|
| Line customization |
Property:LineColor, LineWidth
</br>
@(Html.EJ().Chart("chartContainer")
.ColumnDefinitions(cdn =>
{
cdn.ColumnWidth(50).LineColor('red').LineWidth(2).Add();
})
)
|
Property:Columns.Border
</br>
@Html.EJS().Chart("container")
.Columns(columns =>
{
columns.Width("50%").Border(br => br.Width("2").Color("red")).Add();
})
|
CommonSeriesOptions
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| commonSeriesOptions |
Property:CommonSeriesOptions
</br>
@(Html.EJ().Chart("chartContainer")
.CommonSeriesOptions()
|
Not applicable |
Crosshair
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| crosshair |
Property:Crosshair.Visible
</br>
@(Html.EJ().Chart("chartContainer")
.Crosshair(crosshair=>crosshair.Visible(true))
|
Property:Crosshair.Enable
</br>
@Html.EJS().Chart("container")
.Crosshair(cr=>cr.Enable(true))
|
| trackballTooltipSettings |
Property:TrackballTooltipSettings
</br>
@(Html.EJ().Chart("chartContainer")
.Crosshair(crosshair => crosshair.TrackballTooltipSettings(tr => tr.Border(br => br.Width(2)))
</div>
|
Not applicable |
| marker |
Property:Marker
</br>
@(Html.EJ().Chart("chartContainer")
.Crosshair(crosshair => crosshair.Marker(mr => mr.Border(br => br.Width(2)))
|
Not applicable |
| crosshair line style |
Property:Line
</br>
@(Html.EJ().Chart("chartContainer")
.Crosshair(crosshair => crosshair.Line(line=>line.Color("grey").Width(2)))
|
Property:Line
</br>
@Html.EJS().Chart("container")
.Crosshair(crosshair => crosshair.Line(line => line.Border(br => br.Width(2).Color("grey")))
|
| type |
Property:Type
</br>
@(Html.EJ().Chart("chartContainer")
.Crosshair(crosshair => crosshair.Type("trackball"))
|
Not applicable |
3D chart
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| 3d chart |
Property:Enable3D
</br>
@(Html.EJ().Chart("chartContainer")
.Enable3D(true)
)
|
Not applicable |
| Rotation of 3d chart |
Property:EnableRotation
</br>
@(Html.EJ().Chart("chartContainer")
.EnableRotation(true)
)
</div>
|
Not applicable |
| depth |
Property:Depth
</br>
@(Html.EJ().Chart("chartContainer")
.Depth(120)
)
|
Not applicable |
Canvas rendering
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| canvas rendering |
Property:EnableCanvasRendering
</br>
@(Html.EJ().Chart("chartContainer")
.EnableCanvasRendering(true)
)
|
Not applicable |
Indicators
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Type of Indicator |
Property:Type
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind
.Type(ChartIndicatorType.AccumulationDistribution).Add();
})
)
|
Property:Type
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.Type(Syncfusion.EJ2.Charts.TechnicalIndicators.AccumulationDistribution).Add();})
|
| Period for indicator |
Property:Period
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind
.Period(3).Add();
})
)
</div>
|
Property:Period
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.Period(3).Add();})
|
| %K value in stochastic indicator |
Property:KPeriod
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind
.KPeriod(14).Add();
})
)
|
Property:KPeriod
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.KPeriod("14").Add();})
|
| %D value in stochastic indicator |
Property:DPeriod
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind
.DPeriod("3").Add();
})
)
|
Property:DPeriod
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.DPeriod("3").Add();})
|
| Shows overSold/overBought values | Not Applicable |
Property:ShowZones
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.ShowZones(true).Add();})
|
| Overbought value for RSI and stochastic indicator | Not Applicable |
Property:OverBought
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.OverBought("80").Add();})
|
| Oversold value for RSI and stochastic indicator | Not Applicable |
Property:OverSold
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.OverSold("20").Add();})
|
| Standard deviation for Bollingerbands |
Property:StandardDeviations
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind
.StandardDeviations("2").Add();
})
)
|
Property:StandardDeviation
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.StandardDeviation("2").Add();})
|
| Field for indicator |
Property:Field
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind
.Field("Close").Add();
})
)
|
Property:Field
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).Add();})
|
| Slow period for MACD indicator |
Property:ShortPeriod
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind
.ShortPeriod("12").Add();
})
)
|
Property:slowPeriod
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.slowPeriod("12").Add();})
|
| Fast period for MACD indicator |
Property:LongPeriod
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind
.LongPeriod("26").Add();
})
)
|
Property:FastPeriod
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.FastPeriod("26").Add();})
|
| Line style for MACD indicator |
Property:MacdLine
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind
.MacdLine(ma => ma.Width("2").Fill("red")).Add();
})
)
|
Property:MacdLine
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.MacdLine(ma => ma.Width("2").Fill("red")).Add();})
|
| Type of MACD indicator |
Property:Type
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.Type(ChartIndicatorType.MACD).Add();
})
)
|
Property:MacdType
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.MacdType(Syncfusion.EJ2.Charts.MacdType.Both).Add();})
|
| Color of the positive bars in Macd indicators | Not Applicable |
Property:MacdPositiveColor
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.MacdPositiveColor("red").Add();})
|
| Color of the negative bars in Macd indicators | Not Applicable |
Property:MacdNegativeColor
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.MacdNegativeColor("red").Add();})
|
| Color for Bollinger bands | Not Applicable |
Property:BandColor
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.BandColor("red").Add();})
|
| Appearance of upper line in indicator |
Property:UpperLine
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.UpperLine(up => up.Fill("red").Width("2")).Add();
})
)
|
Property:UpperLine
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.UpperLine(up => up.Fill("red").Width("2")).Add();})
|
| Appearance of lower line in indicator |
Property:LowerLine
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.LowerLine(lo => lo.Fill("red").Width("2")).Add();
})
)
|
Property:LowerLine
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.LowerLine(lo => lo.Fill("red").Width("2")).Add();})
|
| Appearance of period line in indicator |
Property:PeriodLine
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.PeriodLine(pl => pl.Fill("red").Width("2")).Add();
})
)
|
Property:PeriodLine
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.PeriodLine(pl => pl.Fill("red").Width("2")).Add();})
|
| Name of the series for which indicator has to be drawn |
Property:SeriesName
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.SeriesName("series1").Add();
})
)
|
Property:SeriesName
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.SeriesName("series1")).Add();})
|
| Options to customize the histogram in MACD indicator |
Property:Histogram
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind. Histogram().Add();
})
)
|
Not Applicable |
| Enabling animation |
Property:EnableAnimation
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind. enableAnimation(true).Add();
})
)
|
Property:Animation.Enable
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.Animation(an => an.Enable(true)).Add();})
|
| Animation duration |
Property:AnimationDuration
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind. animationDuration("3000").Add();
})
)
|
Property:Animation.Duration
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.Animation(an => an.Duration("3000")).Add();})
|
| Tooltip |
Property:Tooltip.Visible
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.Tooltip(tp => tp.Visible(true)).Add();
})
)
|
Not Applicable |
| Trigger value of MACD indicator |
Property:Trigger
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.Trigger("14").Add();
})
)
|
Not Applicable |
| Fill color for indicator |
Property:Fill
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.Fill("red").Add();
})
)
|
Property:Fill
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.Fill("red").Add();})
|
| Width for indicator |
Property:Width
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.Width("2").Add();
})
)
|
Property:Width
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.Width("2").Add();})
|
| xAxis Name of indicator |
Property:XAxisName
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.XAxisName("").Add();
})
)
|
Property:XAxisName
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.XAxisName("").Add();})
|
| yAxis Name of indicator |
Property:YAxisName
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.YAxisName("").Add();
})
)
|
Property:YAxisName
</br>
@Html.EJS().Chart("container").Indicators(id =>{id.YAxisName("").Add();})
|
| Visibility of indicator |
Property:Visibility
</br>
@(Html.EJ().Chart("chartContainer")
.Indicators(ind => { ind.Visibility(true).Add();
})
)
|
Not Applicable |
Legend
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Default legend |
Property:Legend.Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Visible(true))
)
|
Property:LegendSettings.Visible
</br>
</br>
@Html.EJS().Chart("container").LegendSettings(legend => legend.Visible(true))
|
| Legend height |
Property:Size.Height
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Size(sz => sz.Height("50"))))
|
Property:Height
</br>
</br>
@Html.EJS().Chart("container").LegendSettings(legend => legend.Height("50"))
|
| Legend width |
Property:Size.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Size(sz => sz.Width("50"))))
|
Property:Width
</br>
</br>
@Html.EJS().Chart("container").LegendSettings(legend => legend.Width("50"))
|
| Legend location in chart |
Property:Location
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Location(loc => loc.X("3").Y("45"))))
|
Property:Location
</br>
</br>
@Html.EJS().Chart("container").LegendSettings(le => le.Location(loc => loc.X("3").Y("45")))
|
| Legend position in chart |
Property:Position
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Position(LegendPosition.Top)))
|
Property:Position
</br>
</br>
@Html.EJS().Chart("container").LegendSettings(le => le.Position(Syncfusion.EJ2.Charts.LegendPosition.Top))
|
| Legend padding | Not applicable |
Property:Padding
</br>
</br>
@Html.EJS().Chart("container").LegendSettings(le => le.Padding("8"))
|
| Legend alignment |
Property:Alignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Alignment(Syncfusion.JavaScript.DataVisualization.TextAlignment.Far)))
|
Property:Alignment
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(le => le.Alignment(Syncfusion.EJ2.Charts.Alignment.Far))
|
| Text style for legend |
Property:Font
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Font(font=>font.FontFamily("Segoe UI").FontStyle(ChartFontStyle.Italic)
.FontWeight(ChartFontWeight.Bold).Size("12px"))))
|
Property:Font
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(le => le.Font(ViewBag.font))
|
| Shape height of legend |
Property:ItemStyle.Height
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.ItemStyle(item=>item.Height(13))))
|
Property:ShapeHeight
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(le => le.ShapeHeight(20))
|
| Shape width of legend |
Property:ItemStyle.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.ItemStyle(item=>item.Width("20"))))
|
Property:ShapeWidth
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(le => le.ShapeWidth("20"))
|
| Shape border of legend |
Property:ItemStyle.Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.ItemStyle(item=>item.Border(br=>br.Width(1).Color("#FF0000")))))
|
Not Applicable |
| Shape padding of legend |
Property:ItemPadding
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.ItemPadding(15)))
|
Property:ShapePadding
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(le => le.ShapePadding("20"))
|
| Background of legend |
Property:Background
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Background("transparent")))
|
Property:Backgorund
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(le => le.Backgorund("transparent"))
|
| Opacity of legend |
Property:Opacity
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Opacity("0.3")))
|
Property:Opacity
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(le => le.Opacity("0.3"))
|
| Toggle visibility of series while legend click |
Property:ToggleSeriesVisibility
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.ToggleSeriesVisibility(true)))
|
Property:ToggleVisibility
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(le => le.ToggleVisibility(true))
|
| Title for legend |
Property:Title
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Title()))
|
Not applicable |
| Text Overflow for legend |
Property:TextOverflow
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.TextOverflow(TextOverflow.Trim)))
|
Property:TextStyle.TextOverFlow
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(le => le.TextStyle(tx => tx.TextOverFlow("Trim")))
|
| Text width for legend while setting text overflow |
Property:TextWidth
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.TextWidth("3")))
|
Not applicable |
| Scroll bar for legend |
Property:EnableScrollBar
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.EnableScrollBar(true)))
|
Not applicable |
| Row count for legend |
Property:RowCount
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.RowCount("2")))
|
Not applicable |
| Column count for legend |
Property:ColumnCount
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.ColumnCount("2")))
|
Not applicable |
| Color for legend items |
Property:Fill
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(lg=>lg.Fill("red")))
|
Not applicable |
primaryXAxis
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Alternate grid band |
Property:AlternateGridBand
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.AlternateGridBand(alt => alt.even(e => e.Fill("red")))))
|
Not applicable |
| Axis line cross value |
Property:CrossesAt
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.CrossesAt(0)))
|
Property:CrossesAt
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.CrossesAt(0)))
|
| Axis name with which the axis line has to be crossed |
Property:CrossesInAxis
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.CrossesInAxis("")))
|
Property:CrossesInAxis
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.CrossesInAxis(""))
|
| Axis elements placed with axis line |
Property:ShowNextToAxisLine
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.ShowNextToAxisLine(true)))
|
Property:PlaceNextToAxisLine
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.PlaceNextToAxisLine(true))
|
| Axis line style |
Property:AxisLine.Color
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.AxisLine(al => al.Color("red"))))
|
Property:LineStyle.Color
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LineStyle(ls => ls.Color("black")))
|
| Axis line dashArray |
Property:AxisLine.DashArray
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.AxisLine(al => al.DashArray("10,5"))))
|
Property:LineStyle.DashArray
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LineStyle(ls => ls.DashArray("10,5")))
|
| Offset for axis |
Property:AxisLine.Offset
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.AxisLine(al => al.Offset("10"))))
|
Property:PlotOffset
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LineStyle(ls => ls.PlotOffset("10")))
|
| Visible of an axis |
Property:AxisLine.Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.AxisLine(al => al.Visible(false))))
|
Property:Visible
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LineStyle(ls => ls.Visible(false)))
|
| Width of an axis |
Property:AxisLine.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.AxisLine(al => al.Width("2"))))
|
Property:LineStyle.Width
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LineStyle(ls => ls.Width("2")))
|
| Column index of an axis |
Property:ColumnIndex
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.ColumnIndex("2"))))
|
Property:ColumnIndex
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.ColumnIndex("2")))
|
| Span of an axis to place horizontally or vertically |
Property:ColumnSpan
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.ColumnSpan("2"))))
|
Property:Span
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.Span("2")))
|
| Crosshair label of an axis |
Property:CrossHairLabel.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.CrossHairLabel(cr => cr.Visible(true))))
|
Property:CrossHairTooltip.Enable
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.CrossHairLabel(cr => cr.Enable(true)))
|
| Crosshair label color of an axis | Not applicable |
Property:CrossHairTooltip.Fill
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.CrossHairLabel(cr => cr.Fill("red")))
|
| Crosshair label text style | Not applicable |
Property:CrossHairTooltip.TextStyle
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.CrossHairLabel(cr => cr.TextStyle()))
|
| Desired interval count for primaryXAxis |
Property:DesiredIntervals
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.DesiredIntervals("4")))
|
Property:DesiredIntervals
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.DesiredIntervals("4"))
|
| Edges primaryXAxis |
Property:EdgeLabelPlacement
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.EdgeLabelPlacement("none")))
|
Property:EdgeLabelPlacement
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.EdgeLabelPlacement("none"))
|
| Enables trim for axis labels |
Property:EnableTrim
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.EnableTrim(true)))
|
Property:EnableTrim
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.EnableTrim(true))
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property:EnableAutoIntervalOnZooming
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.EnableAutoIntervalOnZooming(true)))
|
Property:EnableAutoIntervalOnZooming
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.EnableAutoIntervalOnZooming(true))
|
| Title style for primaryXAxis |
Property:Font
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.Font()))
|
Property:TitleStyle
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.TitleStyle())
|
| Indexed for category axis |
Property:IsIndexed
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.IsIndexed(true)))
|
Property:IsIndexed
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.IsIndexed(true))
|
| Interval type for date time axis |
Property:IntervalType
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.IntervalType("Auto")))
|
Property:IntervalType
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.IntervalType("Auto"))
|
| Inversed axis |
Property:IsInversed
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.IsInversed(true)))
|
Property:IsInversed
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.IsInversed(true))
|
| Custom label format |
Property:LabelFormat
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.LabelFormat('{value}K')))
|
Property:LabelFormat
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LabelFormat('{value}K'))
|
| labelIntersectAction |
Property:LabelIntersectAction
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.LabelIntersectAction("trim")))
|
Property:LabelIntersectAction
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LabelIntersectAction("Trim"))
|
| labelPosition |
Property:LabelPosition
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.LabelPosition("inside")))
|
Property:LabelPosition
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LabelPosition("Inside"))
|
| labelPlacement for category axis |
Property:LabelPlacement
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.LabelPlacemen("onTicks")))
|
Property:LabelPlacement
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LabelPlacemen("onTicks"))
|
| Axis label alignment |
Property:Alignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.Alignment("center")))
|
Not Applicable |
| Rotation of axis labels |
Property:LabelRotation
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.LabelRotation("45")))
|
Property:LabelRotation
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LabelRotation("45"))
|
| Log base value for logarithmic axis |
Property:LogBase
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.LogBase("10")))
|
Property:LogBase
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LogBase("10"))
|
| Major grid line visible |
Property:MajorGridLines.visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.Visible(true))))
|
Not Applicable |
| Width of MajorGridLines |
Property:MajorGridLines.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.Width("2"))))
|
Property:MajorGridLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.Width("2")))
|
| Color of MajorGridLines |
Property:MajorGridLines.Color
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.Color("black"))))
|
Property:MajorGridLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.Color("black")))
|
| DashArray of MajorGridLines |
Property:MajorGridLines.DashArray
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.DashArray("10,2"))))
|
Property:MajorGridLines.DashArray
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.DashArray("10,2")))
|
| Opacity of major grid line |
Property:MajorGridLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.Opacity("0.5"))))
|
Not Applicable |
| Major Tick line |
Property:MajorTickLines.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorTickLines(mtl => mtl.Visible(true))))
|
Not Applicable |
| Width of MajorTickLines |
Property:MajorTickLines.Width
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorTickLines(mtl => mtl.Width("2"))))
|
Property:MajorTickLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.Width("2")))
|
| Height of MajorTickLines |
Property:MajorTickLines.Size
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorTickLines(mtl => mtl.Size("2"))))
|
Property:MajorTickLines.Height
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.Height("2")))
|
| Color of MajorTickLines |
Property:MajorTickLines.Color
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorTickLines(mtl => mtl.Color("black"))))
|
Property:MajorTickLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MajorGridLines(mgl => mgl.Color("black")))
|
| Opacity of major Tick line |
Property:MajorTickLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MajorTickLines(mtl => mtl.Opacity("0.5"))))
|
Not Applicable |
| maximum labels of primaryXAxis |
Property:MaximumLabels
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MaximumLabels("5")))
|
Property:MaximumLabels
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MaximumLabels("5"))
|
| maximum labels width of primaryXAxis to trim |
Property:MaximumLabelWidth
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MaximumLabelWidth("40")))
|
Property:MaximumLabelWidth
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MaximumLabelWidth("40"))
|
| minor grid line |
Property:MinorGridLines.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorGridLines(mi => mi.Visible(true))))
|
Not Applicable |
| Width of minorGridLines |
Property:MinorGridLines.Width
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorGridLines(mi => mi.Width("2"))))
|
Property:MinorGridLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MinorGridLines(mi => mi.Width("2")))
|
| Color of minorGridLines |
Property:MinorGridLines.Color
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorGridLines(mi => mi.Color("black"))))
|
Property:MinorGridLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MinorGridLines(mi => mi.Color("black")))
|
| DashArray of minorGridLines |
Property:MinorGridLines.DashArray
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorGridLines(mi => mi.DashArray("10,5"))))
|
Property:MinorGridLines.DashArray
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MinorGridLines(mi => mi.DashArray("10,5")))
|
| Opacity of minor grid line |
Property:MinorGridLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorGridLines(mi => mi.Opacity("0.5"))))
|
Not Applicable |
| minor Tick line |
Property:MinorTickLines.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorTickLines(mit => mit.Visible(true))))
|
Not Applicable |
| Width of minorTickLines |
Property:MinorTickLines.Width
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorTickLines(mit => mit.Width("2"))))
|
Property:MinorTickLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MinorTickLines(mi => mi.Width("2")))
|
| Height of minorTickLines |
Property:MinorTickLines.Size
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorTickLines(mit => mit.Size("2"))))
|
Property:MinorTickLines.Height
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MinorTickLines(mi => mi.Height("2")))
|
| Color of minorTickLines | Property:MinorTickLines.Color </br> </br> (Html.EJ().Chart("chartContainer") .PrimaryXAxis(px=>px.MinorTickLines(mit => mit.Color("black")))) </code> |
Property:MinorTickLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MinorTickLines(mi => mi.Color("black")))
|
| Opacity of minor Tick line |
Property:MinorTickLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorTickLines(mit => mit.Opacity("0.5"))))
|
Not Applicable |
| Minor ticks per interval of primaryXAxis |
Property:MinorTicksPerInterval
</br>
</br>
Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MinorTicksPerInterval("4"))
|
Property:MinorTicksPerInterval
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MinorTicksPerInterval("4"))
|
| name of the primaryXAxis |
Property:Name
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.Name("primaryXAxis")))
|
Property:Name
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.Name("primaryXAxis"))
|
| Orientation of primaryXAxis |
Property:Orientation
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.Orientation("Horizontal")))
|
Not Applicable |
| Plot offset for primaryXAxis |
Property:PlotOffset
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.PlotOffset("0")))
|
Property:PlotOffset
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.PlotOffset("0"))
|
| minimum for primaryXAxis |
Property:Range.Minimum
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.Range(r => r.Minimum("10"))))
|
Property:Minimum
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.Minimum("10"))
|
| maximum for primaryXAxis |
Property:Range.Maximum
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.Range(r => r.Maximum("23"))))
|
Property:Maximum
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.Maximum("23"))
|
| interval for primaryXAxis |
Property:Range.Interval
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.Range(r => r.Interval("2"))))
|
Property:Interval
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.Interval("2"))
|
| RangePadding for primaryXAxis |
Property:RangePadding
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.RangePadding("none")))
|
Property:RangePadding
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.RangePadding("none"))
|
| Rounding Places in primaryXAxis |
Property:RoundingPlaces
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.RoundingPlaces("3")))
|
Property:LabelFormat
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.LabelFormat("n3"))
|
| ScrollBar settings of primaryXAxis |
Property:ScrollbarSettings
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.ScrollbarSettings()))
|
Not Applicable |
| TickPosition in primaryXAxis |
Property:TickLinesPosition
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.TickLinesPosition("Inside")))
|
Property:TickPosition
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.TickPosition("Inside")))
|
| valueType of primaryXAxis |
Property:ValueType
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.ValueType("DateTime")))
|
Property:ValueType
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.ValueType("DateTime"))
|
| visible of primaryXAxis |
Property:Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.Visible(true)))
|
Property:Visible
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.Visible(true))
|
| zoomFactor of primaryXAxis |
Property:ZoomFactor
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.ZoomFactor("0.3")))
|
Property:ZoomFactor
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.ZoomFactor("0.3"))
|
| zoomPosition of primaryXAxis |
Property:ZoomPosition
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.ZoomPosition("0.3")))
|
Property:ZoomPosition
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.ZoomPosition("0.3"))
|
| labelBorder of primaryXAxis |
Property:LabelBorder
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.LabelBorder(lb => lb.Color("red").Width("2"))))
|
Property:Border
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.Border(b => b.Color("red").Width("2")))
|
| title of primaryXAxis |
Property:Title.Text
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.Title(t => t.Text("Chart Title"))))
|
Property:Title
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.Title("Chart Title")
|
| StripLine of primaryXAxis |
Property:StripLine
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.StripLine()))
|
Property:StripLines
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.StripLines())
|
| Multilevel labels of primaryXAxis |
Property:MultiLevelLabels
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px=>px.MultiLevelLabels)))
|
Property:MultiLevelLabels
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryXAxis(px=>px.MultiLevelLabels())
|
| skeleton for an axes | Not Applicable |
Property:Skeleton
</br>
</br>
@Html.EJS().Chart("container")
.Axes(ax=>ax.Skeleton('yMd'))
|
| skeleton type for an axes | Not Applicable |
Property:SkeletonType
</br>
</br>
@Html.EJS().Chart("container")
.Axes(ax=>ax.SkeletonType("DateTime"))
|
primaryYAxis
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Alternate grid band |
Property:AlternateGridBand
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryYAxis(px=>px.AlternateGridBand(alt => alt.even(e => e.Fill("red")))))
|
Not applicable |
| Axis line cross value |
Property:CrossesAt
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryYAxis(px=>px.CrossesAt(0)))
|
Property:CrossesAt
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryYAxis(px=>px.CrossesAt(0)))
|
| Axis name with which the axis line has to be crossed |
Property:CrossesInAxis
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryYAxis(px=>px.CrossesInAxis("")))
|
Property:CrossesInAxis
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryYAxis(px=>px.CrossesInAxis(""))
|
| Axis elements placed with axis line |
Property:ShowNextToAxisLine
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryYAxis(px=>px.ShowNextToAxisLine(true)))
|
Property:PlaceNextToAxisLine
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.PlaceNextToAxisLine(true))
|
| Axis line style |
Property:AxisLine.Color
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.AxisLine(al => al.Color("red"))))
|
Property:LineStyle.Color
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LineStyle(ls => ls.Color("black")))
|
| Axis line dashArray |
Property:AxisLine.DashArray
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.AxisLine(al => al.DashArray("10,5"))))
|
Property:LineStyle.DashArray
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LineStyle(ls => ls.DashArray("10,5")))
|
| Offset for axis |
Property:AxisLine.Offset
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.AxisLine(al => al.Offset("10"))))
|
Property:PlotOffset
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LineStyle(ls => ls.PlotOffset("10")))
|
| Visible of an axis |
Property:AxisLine.Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.AxisLine(al => al.Visible(false))))
|
Property:Visible
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LineStyle(ls => ls.Visible(false)))
|
| Width of an axis |
Property:AxisLine.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.AxisLine(al => al.Width("2"))))
|
Property:LineStyle.Width
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LineStyle(ls => ls.Width("2")))
|
| Column index of an axis |
Property:ColumnIndex
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.ColumnIndex("2"))))
|
Property:ColumnIndex
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.ColumnIndex("2")))
|
| Span of an axis to place horizontally or vertically |
Property:ColumnSpan
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.ColumnSpan("2"))))
|
Property:Span
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.Span("2")))
|
| Crosshair label of an axis |
Property:CrossHairLabel.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.CrossHairLabel(cr => cr.Visible(true))))
|
Property:CrossHairTooltip.Enable
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.CrossHairLabel(cr => cr.Enable(true)))
|
| Crosshair label color of an axis | Not applicable |
Property:CrossHairTooltip.Fill
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.CrossHairLabel(cr => cr.Fill("red")))
|
| Crosshair label text style | Not applicable |
Property:CrossHairTooltip.TextStyle
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.CrossHairLabel(cr => cr.TextStyle()))
|
| Desired interval count for primaryYAxis |
Property:DesiredIntervals
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.DesiredIntervals("4")))
|
Property:DesiredIntervals
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.DesiredIntervals("4"))
|
| Edges primaryYAxis |
Property:EdgeLabelPlacement
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.EdgeLabelPlacement("none")))
|
Property:EdgeLabelPlacement
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.EdgeLabelPlacement("none"))
|
| Enables trim for axis labels |
Property:EnableTrim
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.EnableTrim(true)))
|
Property:EnableTrim
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.EnableTrim(true))
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property:EnableAutoIntervalOnZooming
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.EnableAutoIntervalOnZooming(true)))
|
Property:EnableAutoIntervalOnZooming
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.EnableAutoIntervalOnZooming(true))
|
| Title style for primaryYAxis |
Property:Font
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.Font()))
|
Property:TitleStyle
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.TitleStyle())
|
| Indexed for category axis |
Property:IsIndexed
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.IsIndexed(true)))
|
Property:IsIndexed
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.IsIndexed(true))
|
| Interval type for date time axis |
Property:IntervalType
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.IntervalType("Auto")))
|
Property:IntervalType
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.IntervalType("Auto"))
|
| Inversed axis |
Property:IsInversed
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.IsInversed(true)))
|
Property:IsInversed
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.IsInversed(true))
|
| Custom label format |
Property:LabelFormat
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.LabelFormat('{value}K')))
|
Property:LabelFormat
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LabelFormat('{value}K'))
|
| labelIntersectAction |
Property:LabelIntersectAction
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.LabelIntersectAction("trim")))
|
Property:LabelIntersectAction
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LabelIntersectAction("Trim"))
|
| labelPosition |
Property:LabelPosition
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.LabelPosition("inside")))
|
Property:LabelPosition
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LabelPosition("Inside"))
|
| labelPlacement for category axis |
Property:LabelPlacement
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.LabelPlacemen("onTicks")))
|
Property:LabelPlacement
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LabelPlacemen("onTicks"))
|
| Axis label alignment |
Property:Alignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.Alignment("center")))
|
Not Applicable |
| Rotation of axis labels |
Property:LabelRotation
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.LabelRotation("45")))
|
Property:LabelRotation
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LabelRotation("45"))
|
| Log base value for logarithmic axis |
Property:LogBase
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.LogBase("10")))
|
Property:LogBase
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LogBase("10"))
|
| Major grid line visible |
Property:MajorGridLines.visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.Visible(true))))
|
Not Applicable |
| Width of MajorGridLines |
Property:MajorGridLines.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.Width("2"))))
|
Property:MajorGridLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.Width("2")))
|
| Color of MajorGridLines |
Property:MajorGridLines.Color
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.Color("black"))))
|
Property:MajorGridLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.Color("black")))
|
| DashArray of MajorGridLines |
Property:MajorGridLines.DashArray
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.DashArray("10,2"))))
|
Property:MajorGridLines.DashArray
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.DashArray("10,2")))
|
| Opacity of major grid line |
Property:MajorGridLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.Opacity("0.5"))))
|
Not Applicable |
| Major Tick line |
Property:MajorTickLines.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorTickLines(mtl => mtl.Visible(true))))
|
Not Applicable |
| Width of MajorTickLines |
Property:MajorTickLines.Width
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorTickLines(mtl => mtl.Width("2"))))
|
Property:MajorTickLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.Width("2")))
|
| Height of MajorTickLines |
Property:MajorTickLines.Size
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorTickLines(mtl => mtl.Size("2"))))
|
Property:MajorTickLines.Height
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.Height("2")))
|
| Color of MajorTickLines |
Property:MajorTickLines.Color
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorTickLines(mtl => mtl.Color("black"))))
|
Property:MajorTickLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MajorGridLines(mgl => mgl.Color("black")))
|
| Opacity of major Tick line |
Property:MajorTickLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MajorTickLines(mtl => mtl.Opacity("0.5"))))
|
Not Applicable |
| maximum labels of primaryYAxis |
Property:MaximumLabels
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MaximumLabels("5")))
|
Property:MaximumLabels
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MaximumLabels("5"))
|
| maximum labels width of primaryYAxis to trim |
Property:MaximumLabelWidth
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MaximumLabelWidth("40")))
|
Property:MaximumLabelWidth
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MaximumLabelWidth("40"))
|
| minor grid line |
Property:MinorGridLines.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorGridLines(mi => mi.Visible(true))))
|
Not Applicable |
| Width of minorGridLines |
Property:MinorGridLines.Width
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorGridLines(mi => mi.Width("2"))))
|
Property:MinorGridLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MinorGridLines(mi => mi.Width("2")))
|
| Color of minorGridLines |
Property:MinorGridLines.Color
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorGridLines(mi => mi.Color("black"))))
|
Property:MinorGridLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MinorGridLines(mi => mi.Color("black")))
|
| DashArray of minorGridLines |
Property:MinorGridLines.DashArray
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorGridLines(mi => mi.DashArray("10,5"))))
|
Property:MinorGridLines.DashArray
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MinorGridLines(mi => mi.DashArray("10,5")))
|
| Opacity of minor grid line |
Property:MinorGridLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorGridLines(mi => mi.Opacity("0.5"))))
|
Not Applicable |
| minor Tick line |
Property:MinorTickLines.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorTickLines(mit => mit.Visible(true))))
|
Not Applicable |
| Width of minorTickLines |
Property:MinorTickLines.Width
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorTickLines(mit => mit.Width("2"))))
|
Property:MinorTickLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MinorTickLines(mi => mi.Width("2")))
|
| Height of minorTickLines |
Property:MinorTickLines.Size
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorTickLines(mit => mit.Size("2"))))
|
Property:MinorTickLines.Height
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MinorTickLines(mi => mi.Height("2")))
|
| Color of minorTickLines | Property:MinorTickLines.Color </br> </br> (Html.EJ().Chart("chartContainer") .primaryYAxis(px=>px.MinorTickLines(mit => mit.Color("black")))) </code> |
Property:MinorTickLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MinorTickLines(mi => mi.Color("black")))
|
| Opacity of minor Tick line |
Property:MinorTickLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorTickLines(mit => mit.Opacity("0.5"))))
|
Not Applicable |
| Minor ticks per interval of primaryYAxis |
Property:MinorTicksPerInterval
</br>
</br>
Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.MinorTicksPerInterval("4"))
|
Property:MinorTicksPerInterval
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.MinorTicksPerInterval("4"))
|
| name of the primaryYAxis |
Property:Name
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.Name("primaryYAxis")))
|
Property:Name
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.Name("primaryYAxis"))
|
| Orientation of primaryYAxis |
Property:Orientation
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.Orientation("Horizontal")))
|
Not Applicable |
| Plot offset for primaryYAxis |
Property:PlotOffset
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.PlotOffset("0")))
|
Property:PlotOffset
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.PlotOffset("0"))
|
| minimum for primaryYAxis |
Property:Range.Minimum
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.Range(r => r.Minimum("10"))))
|
Property:Minimum
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.Minimum("10"))
|
| maximum for primaryYAxis |
Property:Range.Maximum
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.Range(r => r.Maximum("23"))))
|
Property:Maximum
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.Maximum("23"))
|
| interval for primaryYAxis |
Property:Range.Interval
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.Range(r => r.Interval("2"))))
|
Property:Interval
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.Interval("2"))
|
| RangePadding for primaryYAxis |
Property:RangePadding
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.RangePadding("none")))
|
Property:RangePadding
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.RangePadding("none"))
|
| Rounding Places in primaryYAxis |
Property:RoundingPlaces
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.RoundingPlaces("3")))
|
Property:LabelFormat
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.LabelFormat("n3"))
|
| ScrollBar settings of primaryYAxis |
Property:ScrollbarSettings
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.ScrollbarSettings()))
|
Not Applicable |
| TickPosition in primaryYAxis |
Property:TickLinesPosition
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.TickLinesPosition("Inside")))
|
Property:TickPosition
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.TickPosition("Inside")))
|
| valueType of primaryYAxis |
Property:ValueType
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.ValueType("DateTime")))
|
Property:ValueType
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.ValueType("DateTime"))
|
| visible of primaryYAxis |
Property:Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.Visible(true)))
|
Property:Visible
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.Visible(true))
|
| zoomFactor of primaryYAxis |
Property:ZoomFactor
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.ZoomFactor("0.3")))
|
Property:ZoomFactor
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.ZoomFactor("0.3"))
|
| zoomPosition of primaryYAxis |
Property:ZoomPosition
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.ZoomPosition("0.3")))
|
Property:ZoomPosition
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.ZoomPosition("0.3"))
|
| labelBorder of primaryYAxis |
Property:LabelBorder
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.LabelBorder(lb => lb.Color("red").Width("2"))))
|
Property:Border
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.Border(b => b.Color("red").Width("2")))
|
| title of primaryYAxis |
Property:Title.Text
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.Title(t => t.Text("Chart Title"))))
|
Property:Title
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.Title("Chart Title")
|
| StripLine of primaryYAxis |
Property:StripLine
</br>
</br>
(Html.EJ().Chart("chartContainer")
.primaryYAxis(px=>px.StripLine()))
|
Property:StripLines
</br>
</br>
@Html.EJS().Chart("container")
.primaryYAxis(px=>px.StripLines())
|
| Multilevel labels of primaryYAxis |
Property:MultiLevelLabels
</br>
</br>
(Html.EJ().Chart("chartContainer")
.PrimaryYAxis(px=>px.MultiLevelLabels)))
|
Property:MultiLevelLabels
</br>
</br>
@Html.EJS().Chart("container")
.PrimaryYAxis(px=>px.MultiLevelLabels())
|
| skeleton for an axes | Not Applicable |
Property:Skeleton
</br>
</br>
@Html.EJS().Chart("container")
.Axes(ax=>ax.Skeleton('yMd'))
|
| skeleton type for an axes | Not Applicable |
Property:SkeletonType
</br>
</br>
@Html.EJS().Chart("container")
.Axes(ax=>ax.SkeletonType("DateTime"))
|
Axes
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Alternate grid band |
Property:AlternateGridBand
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.AlternateGridBand(alt => alt.even(e => e.Fill("red")))))
|
Not applicable |
| Axis line cross value |
Property:CrossesAt
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.CrossesAt(0)))
|
Property:CrossesAt
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.CrossesAt(0)))
|
| Axis name with which the axis line has to be crossed |
Property:CrossesInAxis
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.CrossesInAxis("")))
|
Property:CrossesInAxis
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.CrossesInAxis(""))
|
| Axis elements placed with axis line |
Property:ShowNextToAxisLine
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.ShowNextToAxisLine(true)))
|
Property:PlaceNextToAxisLine
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.PlaceNextToAxisLine(true))
|
| Axis line style |
Property:AxisLine.Color
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.AxisLine(al => al.Color("red"))))
|
Property:LineStyle.Color
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LineStyle(ls => ls.Color("black")))
|
| Axis line dashArray |
Property:AxisLine.DashArray
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.AxisLine(al => al.DashArray("10,5"))))
|
Property:LineStyle.DashArray
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LineStyle(ls => ls.DashArray("10,5")))
|
| Offset for axis |
Property:AxisLine.Offset
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.AxisLine(al => al.Offset("10"))))
|
Property:PlotOffset
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LineStyle(ls => ls.PlotOffset("10")))
|
| Visible of an axis |
Property:AxisLine.Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.AxisLine(al => al.Visible(false))))
|
Property:Visible
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LineStyle(ls => ls.Visible(false)))
|
| Width of an axis |
Property:AxisLine.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.AxisLine(al => al.Width("2"))))
|
Property:LineStyle.Width
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LineStyle(ls => ls.Width("2")))
|
| Column index of an axis |
Property:ColumnIndex
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.ColumnIndex("2"))))
|
Property:ColumnIndex
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.ColumnIndex("2")))
|
| Span of an axis to place horizontally or vertically |
Property:ColumnSpan
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.ColumnSpan("2"))))
|
Property:Span
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.Span("2")))
|
| Crosshair label of an axis |
Property:CrossHairLabel.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.CrossHairLabel(cr => cr.Visible(true))))
|
Property:CrossHairTooltip.Enable
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.CrossHairLabel(cr => cr.Enable(true)))
|
| Crosshair label color of an axis | Not applicable |
Property:CrossHairTooltip.Fill
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.CrossHairLabel(cr => cr.Fill("red")))
|
| Crosshair label text style | Not applicable |
Property:CrossHairTooltip.TextStyle
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.CrossHairLabel(cr => cr.TextStyle()))
|
| Desired interval count for Axes |
Property:DesiredIntervals
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.DesiredIntervals("4")))
|
Property:DesiredIntervals
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.DesiredIntervals("4"))
|
| Edges Axes |
Property:EdgeLabelPlacement
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.EdgeLabelPlacement("none")))
|
Property:EdgeLabelPlacement
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.EdgeLabelPlacement("none"))
|
| Enables trim for axis labels |
Property:EnableTrim
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.EnableTrim(true)))
|
Property:EnableTrim
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.EnableTrim(true))
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property:EnableAutoIntervalOnZooming
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.EnableAutoIntervalOnZooming(true)))
|
Property:EnableAutoIntervalOnZooming
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.EnableAutoIntervalOnZooming(true))
|
| Title style for Axes |
Property:Font
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.Font()))
|
Property:TitleStyle
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.TitleStyle())
|
| Indexed for category axis |
Property:IsIndexed
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.IsIndexed(true)))
|
Property:IsIndexed
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.IsIndexed(true))
|
| Interval type for date time axis |
Property:IntervalType
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.IntervalType("Auto")))
|
Property:IntervalType
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.IntervalType("Auto"))
|
| Inversed axis |
Property:IsInversed
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.IsInversed(true)))
|
Property:IsInversed
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.IsInversed(true))
|
| Custom label format |
Property:LabelFormat
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.LabelFormat('{value}K')))
|
Property:LabelFormat
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LabelFormat('{value}K'))
|
| labelIntersectAction |
Property:LabelIntersectAction
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.LabelIntersectAction("trim")))
|
Property:LabelIntersectAction
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LabelIntersectAction("Trim"))
|
| labelPosition |
Property:LabelPosition
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.LabelPosition("inside")))
|
Property:LabelPosition
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LabelPosition("Inside"))
|
| labelPlacement for category axis |
Property:LabelPlacement
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.LabelPlacemen("onTicks")))
|
Property:LabelPlacement
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LabelPlacemen("onTicks"))
|
| Axis label alignment |
Property:Alignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.Alignment("center")))
|
Not Applicable |
| Rotation of axis labels |
Property:LabelRotation
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.LabelRotation("45")))
|
Property:LabelRotation
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LabelRotation("45"))
|
| Log base value for logarithmic axis |
Property:LogBase
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.LogBase("10")))
|
Property:LogBase
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LogBase("10"))
|
| Major grid line visible |
Property:MajorGridLines.visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorGridLines(mgl => mgl.Visible(true))))
|
Not Applicable |
| Width of MajorGridLines |
Property:MajorGridLines.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorGridLines(mgl => mgl.Width("2"))))
|
Property:MajorGridLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MajorGridLines(mgl => mgl.Width("2")))
|
| Color of MajorGridLines |
Property:MajorGridLines.Color
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorGridLines(mgl => mgl.Color("black"))))
|
Property:MajorGridLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MajorGridLines(mgl => mgl.Color("black")))
|
| DashArray of MajorGridLines |
Property:MajorGridLines.DashArray
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorGridLines(mgl => mgl.DashArray("10,2"))))
|
Property:MajorGridLines.DashArray
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MajorGridLines(mgl => mgl.DashArray("10,2")))
|
| Opacity of major grid line |
Property:MajorGridLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorGridLines(mgl => mgl.Opacity("0.5"))))
|
Not Applicable |
| Major Tick line |
Property:MajorTickLines.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorTickLines(mtl => mtl.Visible(true))))
|
Not Applicable |
| Width of MajorTickLines |
Property:MajorTickLines.Width
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorTickLines(mtl => mtl.Width("2"))))
|
Property:MajorTickLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MajorGridLines(mgl => mgl.Width("2")))
|
| Height of MajorTickLines |
Property:MajorTickLines.Size
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorTickLines(mtl => mtl.Size("2"))))
|
Property:MajorTickLines.Height
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MajorGridLines(mgl => mgl.Height("2")))
|
| Color of MajorTickLines |
Property:MajorTickLines.Color
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorTickLines(mtl => mtl.Color("black"))))
|
Property:MajorTickLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MajorGridLines(mgl => mgl.Color("black")))
|
| Opacity of major Tick line |
Property:MajorTickLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MajorTickLines(mtl => mtl.Opacity("0.5"))))
|
Not Applicable |
| maximum labels of Axes |
Property:MaximumLabels
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MaximumLabels("5")))
|
Property:MaximumLabels
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MaximumLabels("5"))
|
| maximum labels width of Axes to trim |
Property:MaximumLabelWidth
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MaximumLabelWidth("40")))
|
Property:MaximumLabelWidth
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MaximumLabelWidth("40"))
|
| minor grid line |
Property:MinorGridLines.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorGridLines(mi => mi.Visible(true))))
|
Not Applicable |
| Width of minorGridLines |
Property:MinorGridLines.Width
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorGridLines(mi => mi.Width("2"))))
|
Property:MinorGridLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MinorGridLines(mi => mi.Width("2")))
|
| Color of minorGridLines |
Property:MinorGridLines.Color
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorGridLines(mi => mi.Color("black"))))
|
Property:MinorGridLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MinorGridLines(mi => mi.Color("black")))
|
| DashArray of minorGridLines |
Property:MinorGridLines.DashArray
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorGridLines(mi => mi.DashArray("10,5"))))
|
Property:MinorGridLines.DashArray
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MinorGridLines(mi => mi.DashArray("10,5")))
|
| Opacity of minor grid line |
Property:MinorGridLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorGridLines(mi => mi.Opacity("0.5"))))
|
Not Applicable |
| minor Tick line |
Property:MinorTickLines.Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorTickLines(mit => mit.Visible(true))))
|
Not Applicable |
| Width of minorTickLines |
Property:MinorTickLines.Width
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorTickLines(mit => mit.Width("2"))))
|
Property:MinorTickLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MinorTickLines(mi => mi.Width("2")))
|
| Height of minorTickLines |
Property:MinorTickLines.Size
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorTickLines(mit => mit.Size("2"))))
|
Property:MinorTickLines.Height
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MinorTickLines(mi => mi.Height("2")))
|
| Color of minorTickLines | Property:MinorTickLines.Color </br> </br> (Html.EJ().Chart("chartContainer") .Axes(px=>px.MinorTickLines(mit => mit.Color("black")))) </code> |
Property:MinorTickLines.Color
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MinorTickLines(mi => mi.Color("black")))
|
| Opacity of minor Tick line |
Property:MinorTickLines.Opacity
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorTickLines(mit => mit.Opacity("0.5"))))
|
Not Applicable |
| Minor ticks per interval of Axes |
Property:MinorTicksPerInterval
</br>
</br>
Html.EJ().Chart("chartContainer")
.Axes(px=>px.MinorTicksPerInterval("4"))
|
Property:MinorTicksPerInterval
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MinorTicksPerInterval("4"))
|
| name of the Axes |
Property:Name
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.Name("Axes")))
|
Property:Name
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.Name("Axes"))
|
| Orientation of Axes |
Property:Orientation
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.Orientation("Horizontal")))
|
Not Applicable |
| Plot offset for Axes |
Property:PlotOffset
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.PlotOffset("0")))
|
Property:PlotOffset
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.PlotOffset("0"))
|
| minimum for Axes |
Property:Range.Minimum
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.Range(r => r.Minimum("10"))))
|
Property:Minimum
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.Minimum("10"))
|
| maximum for Axes |
Property:Range.Maximum
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.Range(r => r.Maximum("23"))))
|
Property:Maximum
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.Maximum("23"))
|
| interval for Axes |
Property:Range.Interval
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.Range(r => r.Interval("2"))))
|
Property:Interval
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.Interval("2"))
|
| RangePadding for Axes |
Property:RangePadding
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.RangePadding("none")))
|
Property:RangePadding
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.RangePadding("none"))
|
| Rounding Places in Axes |
Property:RoundingPlaces
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.RoundingPlaces("3")))
|
Property:LabelFormat
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.LabelFormat("n3"))
|
| ScrollBar settings of Axes |
Property:ScrollbarSettings
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.ScrollbarSettings()))
|
Not Applicable |
| TickPosition in Axes |
Property:TickLinesPosition
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.TickLinesPosition("Inside")))
|
Property:TickPosition
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.TickPosition("Inside")))
|
| valueType of Axes |
Property:ValueType
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.ValueType("DateTime")))
|
Property:ValueType
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.ValueType("DateTime"))
|
| visible of Axes |
Property:Visible
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.Visible(true)))
|
Property:Visible
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.Visible(true))
|
| zoomFactor of Axes |
Property:ZoomFactor
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.ZoomFactor("0.3")))
|
Property:ZoomFactor
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.ZoomFactor("0.3"))
|
| zoomPosition of Axes |
Property:ZoomPosition
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.ZoomPosition("0.3")))
|
Property:ZoomPosition
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.ZoomPosition("0.3"))
|
| labelBorder of Axes |
Property:LabelBorder
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Axes(px=>px.LabelBorder(lb => lb.Color("red").Width("2"))))
|
Property:Border
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.Border(b => b.Color("red").Width("2")))
|
| title of Axes |
Property:Title.Text
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.Title(t => t.Text("Chart Title"))))
|
Property:Title
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.Title("Chart Title")
|
| StripLine of Axes |
Property:StripLine
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.StripLine()))
|
Property:StripLines
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.StripLines())
|
| Multilevel labels of Axes |
Property:MultiLevelLabels
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Axes(px=>px.MultiLevelLabels)))
|
Property:MultiLevelLabels
</br>
</br>
@Html.EJS().Chart("container")
.Axes(px=>px.MultiLevelLabels())
|
| skeleton for an axes | Not Applicable |
Property:Skeleton
</br>
</br>
@Html.EJS().Chart("container")
.Axes(ax=>ax.Skeleton('yMd'))
|
| skeleton type for an axes | Not Applicable |
Property:SkeletonType
</br>
</br>
@Html.EJS().Chart("container")
.Axes(ax=>ax.SkeletonType("DateTime"))
|
Rows
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| rows in chart |
Property:RowDefinitions
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.RowDefinitions().Add();)
|
Property:Rows
</br>
</br>
@Html.EJS().Chart("container")
.Rows().Add();
|
| unit |
Property:Unit
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.RowDefinitions(r => r.Unit("percentage")).Add();)
|
Not Applicable |
| height of rows in chart |
Property:RowHeight
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.RowDefinitions(r => r.owHeight("50")).Add();)
|
Property:Height
</br>
</br>
@Html.EJS().Chart("container")
.Rows(r => r.Height("300")).Add();
|
| Line customization |
Property:lineColor, lineWidth
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.RowDefinitions(r => r.owHeight("50").LineColor("brown").LineWidth("2")).Add();)
|
Property:Border
</br>
</br>
@Html.EJS().Chart("container")
.Rows({r => r.Border(b => b.Width("2").Color("brown")).Height("300")).Add();});
chart.appendTo('#chart');
|
Series
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| BearFillColor |
Property:BearFillColor
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.BearFillColor("red").Add();
})
|
Property:BearFillColor
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.BearFillColor("red").Add();
})
|
| Border |
Property:Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Border(br => br.Color("red").Width("2").DashArray("10,5")).Add();
})
|
Property:Border
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Border(br => br.Color("red").Width("2").DashArray("10,5")).Add();
})
|
| BoxPlotMode |
Property:BoxPlotMode
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.BoxPlotMode("inclusive").Add();
})
|
Property:BoxPlotMode
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.BoxPlotMode("inclusive").Add();
})
|
| Minimum radius of Bubble series |
Property:BubbleOptions.MinRadius
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.BubbleOptions(b => b.MinRadius("2")).Add();
})
|
Property:MinRadius
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.BubbleOptions(b => b.MinRadius("2")).Add();
})
|
| Maximum radius of Bubble series |
Property:BubbleOptions.MaxRadius
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.BubbleOptions(b => b.MaxRadius("10")).Add();
})
|
Property:MaxRadius
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.BubbleOptions(b => b.MaxRadius("10")).Add();
})
|
| bullFillColor |
Property:BullFillColor
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.BullFillColor("red").Add();
})
|
Property:BullFillColor
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.BullFillColor("red").Add();
})
|
| Cardinal spline tension for spline series |
Property:CardinalSplineTension
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.CardinalSplineTension("0.5").Add();
})
|
Property:CardinalSplineTension
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.CardinalSplineTension("0.5").Add();
})
|
| Column Width for rectangle series |
Property:ColumnWidth
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.ColumnWidth("0.5").Add();
})
|
Property:ColumnWidth
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.ColumnWidth("0.5").Add();
})
|
| Column spacing for rectangle series |
Property:ColumnSpacing
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.ColumnSpacing("0.5").Add();
})
|
Property:ColumnSpacing
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.ColumnSpacing("0.5").Add();
})
|
| Topleft radius for rectangle series |
Property:CornerRadius.TopLeft
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.CornerRadius(c => c.TopLeft(0)).Add();
})
|
Property:CornerRadius.TopLeft
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.CornerRadius(c => c.TopLeft(0)).Add();
})
|
| topRight radius for rectangle series |
Property:CornerRadius.TopRight
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.CornerRadius(c => c.TopRight(0)).Add();
})
|
Property:CornerRadius.TopRight
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.CornerRadius(c => c.TopRight(0)).Add();
})
|
| bottomRight radius for rectangle series |
Property:CornerRadius.BottomRight
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.CornerRadius(c => c.BottomRight(0)).Add();
})
|
Property:CornerRadius.BottomRight
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.CornerRadius(c => c.BottomRight(0)).Add();
})
|
| bottomLeft radius for rectangle series |
Property:CornerRadius.BottomLeft
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.CornerRadius(c => c.BottomLeft(0)).Add();
})
|
Property:CornerRadius.BottomLeft
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.CornerRadius(c => c.BottomLeft(0)).Add();
})
|
| DashArray property |
Property:DashArray
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.DashArray("10,5").Add();
})
|
Property:DashArray
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.DashArray("10,5").Add();
})
|
| DataSource for series |
Property:DataSource
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.DataSource().Add();
})
|
Property:DataSource
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.DataSource().Add();
})
|
| Draw type for Polar series |
Property:DrawType
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.DrawType("Line").Add();
})
|
Property:DrawType
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.DrawType("Line").Add();
})
|
| EmptyPointSettings for series |
Property:EmptyPointSettings.Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.EmptyPointSettings(e => e.Visible(false)).Add();
})
|
Not Applicable |
| Empty Point Display mode |
Property:EmptyPointSettings.DisplayMode
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.EmptyPointSettings(e => e.DisplayMode("Average")).Add();
})
|
Property:EmptyPointSettings.DisplayMode
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.EmptyPointSettings(e => e.DisplayMode("Average")).Add();
})
|
| Empty Point color |
Property:EmptyPointSettings.Color
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Color("red").Add();
})
|
Property:EmptyPointSettings.Fill
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Fill("red").Add();
})
|
| Empty Point Border |
Property:EmptyPointSettings.Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.EmptyPointSettings(e => e.Border(b => b.Color("red").Width("2"))).Add();
})
|
Property:EmptyPointSettings.Border
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.EmptyPointSettings(e => e.Border(b => b.Color("red").Width("2"))).Add();
})
|
| Enable animation for series |
Property:EnableAnimation
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.EnableAnimation(true).Add();
})
|
Property:Animation.Enable
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Animation(a => a.Enable(false)).Add();
})
|
| Animation duration for series |
Property:AnimationDuration
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.AnimationDuration("1000").Add();
})
|
Property:Animation.Duration
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Animation(a => a.Duration("1000")).Add();
})
|
| Animation delay for series | Not Applicable |
Property:Animation.Delay
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Animation(a => a.Delay("100")).Add();
})
|
| Drag settings for series |
Property:DragSettings
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.DragSettings(d => d.Mode("X")).Add();
})
|
Not Applicable |
| Errorbar settings for series |
Property:ErrorBarSettings
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.ErrorBarSettings().Add();
})
|
Property:ErrorBarSettings
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.ErrorBarSettings().Add();
})
|
| Closed series |
Property:IsClosed
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.IsClosed(true).Add();
})
|
Property:IsClosed
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.IsClosed(true).Add();
})
|
| Stacking Property for series |
Property:IsStacking
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.IsStacking(true).Add();
})
|
Not Applicable |
| Line cap for series |
Property:LineCap
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.LineCap("butt").Add();
})
|
Not Applicable |
| Line join for series |
Property:LineJoin
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.LineJoin("round").Add();
})
|
Not Applicable |
| Opacity for series |
Property:Opacity
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Opacity("0.7").Add();
})
|
Property:Opacity
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Opacity("0.7").Add();
})
|
| Outlier settings of series |
Property:OutLierSettings
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.OutLierSettings(out => out.Shape("rectangle").Size(s => s.Height("30").Width("20"))).Add();
})
|
Not Applicable |
| Palette |
Property:Palette
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Palette("ColorFieldName").Add();
})
|
Property:PointColorMapping
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.PointColorMapping("color").Add();
})
|
| Positive fill for waterfall series |
Property:PositiveFill
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.PositiveFill("red").Add();
})
|
Property:PositiveFill
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.PositiveFill("red").Add();
})
|
| Show average value in box and whisker series |
Property:ShowMedian
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.ShowMedian(true).Add();
})
|
Property:ShowMedian
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.ShowMedian(true).Add();
})
|
| To group the series of stacking collection. |
Property:StackingGroup
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.StackingGroup("group").Add();
})
|
Property:StackingGroup
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.StackingGroup("group").Add();
})
|
| Specifies the type of the series to render in chart. |
Property:Type
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Type(SeriesType.Line).Add();
})
|
Property:Type
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Add();
})
|
| Defines the visibility of the series. |
Property:Visibility
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Visibility(true).Add();
})
|
Property:Visible
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Visible(true).Add();
})
|
| Enables or disables the visibility of legend item. |
Property:VisibleOnLegend
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.VisibleOnLegend(true).Add();
})
|
Property:ToggleVisibility
</br>
</br>
@Html.EJS().Chart("container")
.LegendSettings(l => l.ToggleVisibility(true))
})
|
| Specifies the different types of spline curve. |
Property:SplineType
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.SplineType('Natural').Add();
})
|
Property:SplineType
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.SplineType('Natural').Add();
})
|
| Specifies the name of the x-axis that has to be associated with this series. Add an axis instance with this name to axes collection. |
Property:XAxisName
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.XAxisName('secondaryXAxis').Add();
})
|
Property:XAxisName
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.XAxisName('secondaryXAxis').Add();
})
|
| Name of the property in the datasource that contains x value for the series. |
Property:XName
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.XName("x").Add();
})
|
Property:XName
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.XName("x").Add();
})
|
| Specifies the name of the y-axis that has to be associated with this series. Add an axis instance with this name to axes collection. |
Property:YAxisName
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.YAxisName("secondaryYAxis").Add();
})
|
Property:YAxisName
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.YAxisName("secondaryYAxis").Add();
})
|
| Name of the property in the datasource that contains y value for the series. |
Property:YName
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.YName("Y").Add();
})
|
Property:YName
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.YName("Y").Add();
})
|
| Name of the property in the datasource that contains high value for the series. |
Property:High
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.High("y").Add();
})
|
Property:High
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.High("y").Add();
})
|
| Name of the property in the datasource that contains low value for the series. |
Property:Low
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Low("y").Add();
})
|
Property:Low
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Low("y").Add();
})
|
| Name of the property in the datasource that contains close value for the series. |
Property:Close
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Close("y").Add();
})
|
Property:Close
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Close("y").Add();
})
|
| Name of the property in the datasource that contains open value for the series. |
Property:Open
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Open("y").Add();
})
|
Property:Open
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Open("y").Add();
})
|
| Option to add trendlines to chart. |
Property:TrendLines
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines().Add();
})
|
Property:TrendLines
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines().Add();
})
|
| Options for customizing the appearance of the series or data point while highlighting. |
Property:HighlightSettings
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.HighlightSettings().Add();
})
|
Not applicable. |
| Options for customizing the appearance of the series/data point on selection. |
Property:SelectionSettings
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.SelectionSettings().Add();
})
|
Not applicable. |
marker
| visibility of marker |
Property:Marker.Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.Visible(true)).Add();
})
|
Property:Visible
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.Visible(true)).Add();
})
|
| Fill for marker |
Property:Fill
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.Fill("red")).Add();
})
|
Property:Fill
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.Fill("red")).Add();
})
|
| Opacity for marker |
Property:Opacity
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.Opacity("0.5")).Add();
})
|
Property:Opacity
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.Opacity("0.5")).Add();
})
|
| Shape of marker |
Property:Shape
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.Shape("Cirlce")).Add();
})
|
Property:Shape
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.Shape("Cirlce")).Add();
})
|
| ImageUrl of marker |
Property:ImageUrl
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.ImageUrl("")).Add();
})
|
Property:ImageUrl
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.ImageUrl("")).Add();
})
|
| Border of marker |
Property:Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.Border(b => b.Color("red").Width("2"))).Add();
})
|
Property:Border
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.IBorder(b => b.Color("red").Width("2"))).Add();
})
|
| Height of marker |
Property:Size.Height
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.Size(s => s.Height("30"))).Add();
})
|
Property:Height
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.Height("30")).Add();
})
|
| Width of marker |
Property:Size.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.Size(s => s.Width("30"))).Add();
})
|
Property:Width
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.Width("30")).Add();
})
|
| DataLabelSettings of marker |
Property:Marker.DataLabel
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.Size(s => s.DataLabel())).Add();
})
|
Property:Marker.DataLabel
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel()).Add();
})
|
| Visibility of dataLabel |
Property:DataLabel.Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Visible(true))).Add();
}))
|
Property:DataLabel.Visible
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Visible(true)))).Add();
})
|
| Text mapping name of dataLabel |
Property:DataLabel.TextMappingName
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.TextMappingName())).Add();
}))
|
Property:DataLabel.Name
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Name()))).Add();
})
|
| Fill color of data label |
Property:DataLabel.Fill
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Fill("red"))).Add();
})
|
Property:DataLabel.Fill
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Fill("red"))).Add();
})
|
| Opacity of data label |
Property:DataLabel.Opacity
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Opacity("0.5"))).Add();
})
|
Property:DataLabel.Opacity
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Opacity("0.5"))).Add();
})
|
| Text position of data label |
Property:DataLabel.TextPosition
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.TextPosition("middle"))).Add();
})
|
Property:DataLabel.Position
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.TextPosition("middle"))).Add();
})
|
| Alignment of data label |
Property:DataLabel.VerticalAlignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.VerticalAlignment("near"))).Add();
})
|
Property:DataLabel.Alignment
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Alignment("near"))).Add();
})
|
| Border of data label |
Property:DataLabel.Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Border(b => b.Color("blue").Width("2")))).Add();
})
|
Property:DataLabel.Border
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Border(b => b.Color("blue").Width("2")))).Add();
})
|
| Offset for data label |
Property:DataLabel.Offset
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Offset(off => off.X("5").Y("6")))).Add();
})
|
Not Applicable |
| Margin of data label |
Property:DataLabel.Margin
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Margin(m => m.Top("10").Bottom("10").Left("10").Right("10"))
.Add();})
|
Property:DataLabel.Margin
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Margin(m => m.Top("10").Bottom("10").Left("10").Right("10"))
.Add();})
|
| Font of data label |
Property:DataLabel.Font
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Font(f => f.FontFamily('SegoeUI').FontStyle('italic').FOntWeight("600").Opacity("0.5")
.Add();})
|
Property:DataLabel.Font
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Font(f => f.FontFamily('SegoeUI').FontStyle('italic').FOntWeight("600").Opacity("0.5")
.Add();})
|
| HTML template in dataLabel |
Property:DataLabel.Template
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Template('
|
Property:DataLabel.Template
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Template('
|
| Rounded corner radius X | Not Applicable |
Property:dataLabel.Rx
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Rx("5").Add();})
|
| Rounded corner radius Y | Not Applicable |
Property:dataLabel.Ry
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Ry("10").Add();})
|
| Maximum Label width for data label |
Property:DataLabel.MaximumLabelWidth
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.MaximumLabelWidth("20").Add();})
|
Not Applicable |
| Enable wrapping of text for data label |
Property:DataLabel.EnableWrap
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.EnableWrap(true)).Add();})
|
Not Applicable |
| To show contrast color for data label |
Property:DataLabel.ShowContrastColor
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.ShowContrastColor(true)).Add();})
|
Not Applicable |
| To show edge label for data label |
Property:DataLabel.ShowEdgeLabels
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.ShowEdgeLabels(true)).Add();})
|
Not Applicable |
TrendLines
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Trendlines settings |
Property:Series.TrendLines
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines().Add();})
|
Property:Series.TrendLines
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines().Add();})
|
| Visibility of trendline |
Property:TrendLines.Visibility
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.Visibility('visible')).Add();})
|
Not applicable |
| Type of trendLine |
Property:TrendLines.Type
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.Type(TrendlineType.Linear)).Add();}))
|
Property:TrendLines.Type
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.Type(Syncfusion.EJ2.Charts.TrendlineTypes.Linear)).Add();})
|
| Name of trendLine |
Property:TrendLines.Name
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.Name("TrendLines")).Add();}))
|
Property:TrendLines.Name
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.Name("TrendLines")).Add();}))
|
| Period of trendLine |
Property:TrendLines.Period
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.Period("45")).Add();}))
|
Property:TrendLines.Period
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.Period("45")).Add();}))
|
| Polynomial order for Polynomial type trendLines |
Property:TrendLines.PolynomialOrder
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.PolynomialOrder("3")).Add();}))
|
Property:TrendLines.PolynomialOrder
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.PolynomialOrder("3")).Add();}))
|
| Backward forecost for trendLines |
Property:TrendLines.Backwardforecast
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.Backwardforecast("3")).Add();}))
|
Property:TrendLines.Backwardforecast
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.Backwardforecast("3")).Add();}))
|
| Forward forecost for trendLines |
Property:TrendLines.ForwardForecast
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.ForwardForecast("3")).Add();}))
|
Property:TrendLines.ForwardForecast
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.ForwardForecast("3")).Add();}))
|
| Fill for trendLines |
Property:TrendLines.Fill
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.Fill("red")).Add();}))
|
Property:TrendLines.Fill
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.Fill("red")).Add();}))
|
| Width for trendLines |
Property:TrendLines.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.Width("2")).Add();}))
|
Property:TrendLines.Width
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.Width("2")).Add();}))
|
| Intercept value for trendLines |
Property:TrendLines.Intercept
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.Intercept("2")).Add();}))
|
Property:TrendLines.Intercept
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.Intercept("2")).Add();}))
|
| Legend shape for trendLines | Not Applicable |
Property:TrendLines.LegendShape
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.LegendShape("Rectangle")).Add();}))
|
| Animation settings for trendLines | Not Applicable |
Property:TrendLines.Animation
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.Animation(a => a.Enable(true))).Add();}))
|
| Marker settings for trendLines | Not Applicable |
Property:TrendLines.Marker
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.Marker(m => m.Visible(true))).Add();}))
|
| Tooltip for trendLines |
Property:TrendLines.Tooltip
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.Tooltip()).Add();}))
|
Property:TrendLines.EnableTooltip
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.TrendLines(tr => tr.EnableTooltip(true)).Add();}))
|
| DashArray for trendLines |
Property:TrendLines.DashArray
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.DashArray("10,5")).Add();}))
|
Not Applicable. |
| Visible on legend for trendLines |
Property:TrendLines.VisibleOnLegend
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(sr => {
sr.TrendLines(tr => tr.VisibleOnLegend(true)).Add();}))
|
Not Applicable. |
StripLines
</tr> </table> ## Multilevel Labels| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Default behaviour for striplines |
Property:PrimaryXAxis.StripLines
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.Visible(true))))
</td>
|
Property:PrimaryXAxis.StripLines
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.Visible(true))))
|
| border for stripline |
Property:StripLines.BorderColor
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.BorderColor("pink"))))
|
Property:stripLines.Border
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.Border(b => b.Color("pink").WIdth("2"))))
|
| Background color for stripline |
Property:StripLines.Color
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.Color("pink"))))
|
Property:StripLines.Corder
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.Color("pink")))
|
| Start value for stripline |
Property:StripLines.Start
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.Start("10"))))
|
Property:StripLines.Start
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.Start("10"))))
|
| End value for stripline |
Property:StripLines.End
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.End("20"))))
|
Property:StripLines.End
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.End("10"))))
|
| StartfromAxis for stripline |
Property:StripLines.StartFromAxis
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.StartFromAxis(true))))
|
Property:StripLines.StartFromAxis
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.StartFromAxis(true))))
|
| Text in stripline |
Property:StripLines.Text
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.Text("text"))))
|
Property:StripLines.Text
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.Text("text"))))
|
| Text alignment in stripline |
Property:StripLines.TextAlignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.TextAlignment("far"))))
|
Property:stripLines.HorizontalAlignment
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.HorizontalAlignment("middle"))))
|
| Vertical Text alignment in stripline | Not Applicable |
Property:StripLines.VerticalAlignment
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.VerticalAlignment("far"))))
|
| Size of stripline |
Property:StripLines.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.Width("10"))))
|
Property:StripLines.Size
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.Size("10"))))
|
| ZIndex of stripline |
Property:StripLines.ZIndex
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.ZIndex("Behind"))))
|
Property:stripLines.size
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.ZIndex("Behind"))))
|
| Font style of stripline |
Property:StripLines.FontStyle
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.StripLines(st => st.FontStyle())))
|
Property:StripLines.TextStyle
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.StripLines(st => st.FontStyle())))
|
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Default behaviour for multilevelLabels |
Property:PrimaryXAxis.MultilevelLabels
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.MultilevelLabels()))
|
Property:PrimaryXAxis.MultilevelLabels
</br>
</br>
@Html.EJS().Chart("container")
PrimaryXAxis(px => px.MultilevelLabels()))
|
| Text alignment for multilevelLabels |
Property:MultiLevelLabels.TextAlignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.TextAlignment("Near"))))
|
Property:MultilevelLabels.Alignment
</br>
</br>
@Html.EJ().Chart("container")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Alignment("Near"))))
|
| Text overflow for multilevelLabels |
Property:multiLevelLabels.TextOverFlow
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.TextOverFlow("Trim"))))
|
Property:MultiLevelLabels.OverFlow
</br>
</br>
@Html.EJ().Chart("container")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.OverFlow("Trim"))))
|
| Border for multilevelLabels |
Property:multiLevelLabels.Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Border(b => b.Width("2").Color("red")))))
|
Property:MultiLevelLabels.Border
</br>
</br>
@Html.EJ().Chart("container")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Border(b => b.Width("2").Color("red")))))
|
| Start value for label |
Property:MultiLevelLabels.Start
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Start("45"))))
|
Property:MultiLevelLabels.Categories.Start
</br>
</br>
@Html.EJ().Chart("container")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Categories(c => c.Start("45"))))
|
| End value for label |
Property:MultiLevelLabels.End
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.End("50"))))
|
Property:MultiLevelLabels.Categories.End
</br>
</br>
@Html.EJ().Chart("container")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Categories(c => c.End("50"))))
|
| Text for label |
Property:MultiLevelLabels.Text
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Text("start"))))
|
Property:MultiLevelLabels.Categories.Text
</br>
</br>
@Html.EJ().Chart("container")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Categories(c => c.Text("start"))))
|
| maximum text width for label |
Property:MultiLevelLabels.MaximumTextWidth
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.MaximumTextWidth("20"))))
|
Property:MultiLevelLabels.Categories.MaximumTextWidth
</br>
</br>
@Html.EJ().Chart("container")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Categories(c => c.MaximumTextWidth("20"))))
|
| level of labels |
Property:MultiLevelLabels.Level
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PrimaryXAxis(px => px.MultilevelLabels(m => m.Level("2"))))
|
Not applicable |
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| animation for series |
Property:Animate
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Animate())
|
Not applicable |
| Redraw for chart |
Property:Redraw
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Redraw())
|
Property:Refresh
</br>
</br>
@Html.EJ().Chart("container")
.Refresh()
|
| Export |
Property:Export()
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Export())
|
Property:Export()
</br>
</br>
@Html.EJ().Chart("container")
.Export()
|
Property:Print()
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Print())
|
Property:Print()
</br>
</br>
@Html.EJ().Chart("container")
.Print()
|
|
| AddSeries | Not Applicable |
Property:AddSeries()
</br>
</br>
@Html.EJ().Chart("container")
.AddSeries()
|
| RemoveSeries | Not Applicable |
Property:RemoveSeries()
</br>
</br>
@Html.EJ().Chart("container")
.RemoveSeries()
|
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Fires on annotation click |
Property:AnnotationClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AnnotationClick())
|
Not applicable |
| Fires after animation |
Property:AnimationComplete
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AnimationComplete())
|
Property:AnimationComplete()
</br>
</br>
@Html.EJ().Chart("container")
.AnimationComplete()
|
| Fires on axis label click |
Property:AxisLabelClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AxisLabelClick())
|
Not applicable |
| Fires before axis label render |
Property:AxisLabelRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AxisLabelRendering())
|
Property:AxisLabelRender()
</br>
</br>
@Html.EJ().Chart("container")
.AxisLabelRender()
|
| Fires on axis label mouseMove |
Property:AxisLabelMouseMove
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AxisLabelMouseMove())
|
Not applicable |
| Fires on axis label initialize |
Property:AxisLabelInitialize
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AxisLabelInitialize())
|
Not applicable |
| Fires before axis range calculation |
Property:AxesRangeCalculate
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AxesRangeCalculate());
|
Property:AxisRangeCalculated()
</br>
</br>
@Html.EJ().Chart("container")
.AxisRangeCalculated()
|
| Fires on axis title rendering |
Property:AxisTitleRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AxisTitleRendering())
|
Not applicable |
| Fires on after chart resize | Property:AfterResize </br> </br> @(Html.EJ().Chart("chartContainer") .AfterResize()) </code> | Not applicable |
| Fires on before chart resize |
Property:BeforeResize
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.BeforeResize())
|
Property:Resized
</br>
</br>
@Html.EJ().Chart("container")
.Resized()
|
| Fires on chart click |
Property:ChartClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartClick())
|
Property:ChartMouseClick
</br>
</br>
@Html.EJ().Chart("container")
.ChartMouseClick()
|
| Fires on chart mouse move |
Property:ChartMouseMove
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartMouseMove())
|
Property:ChartMouseMove
</br>
</br>
@Html.EJ().Chart("container")
.ChartMouseMove()
|
| Fires on chart mouse leave |
Property:ChartMouseLeave
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartMouseLeave())
|
Property:ChartMouseLeave
</br>
</br>
@Html.EJ().Chart("container")
.ChartMouseLeave()
|
| Fires on before chart double click |
Property:ChartDoubleClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartDoubleClick())
|
Not applicable |
| Fires on chart mouse up | Not Applicable |
Property:ChartmouseUp
</br>
</br>
@Html.EJ().Chart("container")
.ChartmouseUp()
|
| Fires on chart mouse down | Not Applicable |
Property:ChartmouseDown
</br>
</br>
@Html.EJ().Chart("container")
.ChartmouseDown()
|
| Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area |
Property:ChartAreaBoundsCalculate
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartAreaBoundsCalculate())
|
Not applicable |
| Fires when the dragging is started |
Property:DragStart
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.DragStart())
|
Not applicable |
| Fires while dragging |
Property:Dragging
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Dragging())
|
Not applicable |
| Fires when the dragging is completed |
Property:DragEnd
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.DragEnd())
|
Property:DragComplete
</br>
</br>
@Html.EJ().Chart("container")
.DragComplete()
|
| Fires when chart is destroyed completely. |
Property:Destroy
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Destroy())
|
Not applicable |
| Fires after chart is created. |
Property:Create
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Create())
|
Property:Loaded
</br>
</br>
@Html.EJ().Chart("container")
.Loaded()
|
| Fires before rendering the data labels. |
Property:DisplayTextRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.DisplayTextRendering())
|
Property:TextRender
</br>
</br>
@Html.EJ().Chart("container")
.TextRender()
|
| Fires, when error bar is rendering. |
Property:ErrorBarRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ErrorBarRendering())
|
Not applicable |
| Fires during the calculation of legend bounds. |
Property:LegendBoundsCalculate
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.LegendBoundsCalculate())
|
Not applicable |
| Fires on clicking the legend item. |
Property:LegendItemClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.LegendItemClick())
|
Not applicable |
| Fires when moving mouse over legend item |
Property:LegendItemMouseMove
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.LegendItemMouseMove())
|
Not applicable |
| Fires before rendering the legend item. |
Property:LegendItemRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.LegendItemRendering()
|
Property:LegendRender
</br>
</br>
@Html.EJ().Chart("container")
.LegendRender()
|
| Fires before loading the chart. |
Property:Load
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Load()
|
Property:Load
</br>
</br>
@Html.EJ().Chart("container")
.Load()
|
| Fires, when multi level labels are rendering. |
Property:MultiLevelLabelRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.MultiLevelLabelRendering()
|
Property:AxisMultiLabelRender
</br>
</br>
@Html.EJ().Chart("container")
.AxisMultiLabelRender()
|
| Fires on clicking a point in chart. |
Property:PointRegionClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PointRegionClick()
|
Property:PointClick
</br>
</br>
@Html.EJ().Chart("container")
.PointClick()
|
| Fires when mouse is moved over a point. |
Property:PointRegionMouseMove
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PointRegionMouseMove())
|
Property:PointMove
</br>
</br>
@Html.EJ().Chart("container")
.PointMove()
|
| Fires before rendering chart. |
Property:PreRender
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PreRender())
|
Not applicable |
| Fires when point render. | Not Applicable |
Property:PointRender
</br>
</br>
@Html.EJ().Chart("container")
.PointRender()
|
| Fires after selected the data in chart. |
Property:RangeSelected
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.RangeSelected())
|
Not applicable |
| Fires after selecting a series. |
Property:SeriesRegionClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SeriesRegionClick())
|
Not applicable |
| Fires before rendering a series. |
Property:SeriesRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SeriesRendering())
|
Property:SeriesRender
</br>
</br>
@Html.EJ().Chart("container")
.SeriesRender()
|
| Fires before rendering the marker symbols. |
Property:SymbolRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SymbolRendering())
|
Not applicable |
| Fires before rendering the trendline |
Property:TrendlineRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.TrendlineRendering())
|
Not applicable |
| Fires before rendering the Chart title. |
Property:TitleRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.TitleRendering())
|
Not applicable |
| Fires before rendering the Chart sub title. |
Property:SubTitleRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SubTitleRendering())
|
Not applicable |
| Fires before rendering the tooltip. |
Property:ToolTipInitialize
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ToolTipInitialize())
|
Property:TooltipRender
</br>
</br>
@Html.EJ().Chart("container")
.TooltipRender()
|
| Fires before rendering crosshair tooltip in axis |
Property:TrackAxisToolTip
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.TrackAxisToolTip())
|
Not applicable |
| Fires before rendering trackball tooltip. |
Property:TrackToolTip
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.TrackToolTip())
|
Not applicable |
| Event triggered when scroll starts. |
Property:ScrollStart
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ScrollStart())
|
Property:ScrollStart
</br>
</br>
@Html.EJ().Chart("container")
.ScrollStart()
|
| Event triggered when scroll ends. |
Property:ScrollEnd
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ScrollEnd())
|
Property:ScrollEnd
</br>
</br>
@Html.EJ().Chart("container")
.ScrollEnd()
|
| Event triggered when scroll changes. |
Property:ScrollChange
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ScrollChange())
|
Property:ScrollChange </br> </br> @Html.EJ().Chart("container") .ScrollChange() </code> |
| Fires while performing rectangle zooming in chart. |
Property:ZoomComplete
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ZoomComplete())
|
Property:ZoomComplete
</br>
</br>
@Html.EJ().Chart("container")
.ZoomComplete()
|
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| selected data index |
Property:SelectedDataPointIndexes:
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SelectedDataPointIndexes(s => s.SeriesIndex("0").PointIndex("1")))
|
Property:SelectedDataIndexes
</br>
</br>
@Html.EJ().Chart("container")
.SelectedDataPointIndexes(s => s.SeriesIndex("0").PointIndex("1"))
|
| sideBySideSeriesPlacement for column based series |
Property:SideBySideSeriesPlacement:
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SideBySideSeriesPlacement(true)
|
Property:SideBySidePlacement
</br>
</br>
@Html.EJ().Chart("container")
.SideBySidePlacement(true)
|
| ZoomSettings |
Property:Zooming:
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Zooming(z => z.Enable(true).EnablePinch(true).EnableScrollBar(true)))
|
Property:ZoomSettings
</br>
</br>
@Html.EJ().Chart("container")
.ZoomSettings(z => z.Enable(true).EnablePinch(true).EnableScrollBar(true)))
|
| Background color of the chart |
Property:Background
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Background('transparent')
|
Property:Background
</br>
</br>
@Html.EJ().Chart("container")
.Background('transparent')
|
| URL of the image to be used as chart background. |
Property:BackGroundImageUrl
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.BackGroundImageUrl("")
|
Not Applicable |
| Customizing border of the chart |
Property:Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Border(b => b.Color("red").Width("2")))
|
Property:Border
</br>
</br>
@Html.EJ().Chart("container")
.Border(b => b.Color("red").Width("2")))
|
| This provides options for customizing export settings |
Property:ExportSettings
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ExportSettings(e => e.FileName("chart").Angle("45")))
|
Property:Export()
</br>
</br>
@Html.EJ().Chart("container")
.Export(e => e.FileName("chart").Angle("45")))
|
| ChartArea customization |
Property:ChartArea
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartArea(c => c.Background("transparent").Border(b => b.Opacity("0.3").Color("red").Width("2"))))
|
Property:ChartArea
</br>
</br>
@Html.EJ().Chart("container")
.ChartArea(c => c.Background("transparent").Border(b => b.Opacity("0.3").Color("red").Width("2"))))
|