This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.
| 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
|
| 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
|
| 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"))
|
| 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"))
|
| 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"))
|
| 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.
|
| 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('Chart ').Add();})
|
Property:DataLabel.Template
</br>
</br>
@Html.EJS().Chart("container")
.Series(sr => {
sr.Marker(mar => mar.DataLabel(d => d.Template('Chart ').Add();})
|
| 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
|
| 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.
|