This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Type | Property: type@(Html.EJ().Sparkline("container").Type(SparklineType.Column)) |
Property: type@Html.EJS().Sparkline("container").Type(Syncfusion.EJ2.Charts.SparklineType.Area).Render() |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Datasource | Property: dataSource@(Html.EJ().Sparkline("container").DataSource(ViewBag.SparklineData)) |
Property: dataSource@Html.EJS().Sparkline("container").DataSource(ViewBag.datasource).Render() |
Binding X values with datasource | Property: xName@(Html.EJ().Sparkline("container").XName("Month")) |
Property: xName@Html.EJS().Sparkline("container").XName("Month").Render() |
Binding Y values with datasource | Property: yName@(Html.EJ().Sparkline("container").YName("Sales")) |
Property: yName@Html.EJS().Sparkline("container").YName("Sales").Render() |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enable markers | Property: markerSettings.visible@(Html.EJ().Sparkline("container").MarkerSettings(mr => mr.Visible(true))) |
Property: markerSettings.visible@Html.EJS().Sparkline("container").MarkerSettings(ms =>ms.Visible(new string[] {"All"})).Render() |
Color | Property: markerSettings.fill@(Html.EJ().Sparkline("container").MarkerSettings(mr => mr.Fill("red"))) |
Property: markerSettings.fill@Html.EJS().Sparkline("container").MarkerSettings(ms =>ms.Fill("red")).Render() |
Size | Property: markerSettings.width@(Html.EJ().Sparkline("container").MarkerSettings(mr => mr.Width(10))) |
Property: markerSettings.size@Html.EJS().Sparkline("container").MarkerSettings(ms =>ms.Size(10)).Render() |
Opacity | Property: markerSettings.opacity@(Html.EJ().Sparkline("container").MarkerSettings(mr => mr.Opacity(0.5))) |
Property: markerSettings.opacity@Html.EJS().Sparkline("container").MarkerSettings(ms =>ms.Opacity(0.5)).Render() |
Border color | Property: markerSettings.border.color@(Html.EJ().Sparkline("container").MarkerSettings(mr => mr.Border(br=> br.Color("black"))) |
Property: markerSettings.border.color@Html.EJS().Sparkline("container").MarkerSettings(ms =>ms.Border(br=> br.Color("Black"))).Render() |
Border width | Property: markerSettings.border.width@(Html.EJ().Sparkline("container").MarkerSettings(mr => mr.Border(br=> br.Width(1))) |
Property: markerSettings.border.width@Html.EJS().Sparkline("container").MarkerSettings(ms =>ms.Border(br=> br.Width(1))).Render() |
Border opacity | Property: markerSettings.border.opacity@(Html.EJ().Sparkline("container").MarkerSettings(mr => mr.Border(br=> br.Opacity(0.5))) |
Not applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enable data labels | Not applicable | Property: dataLabelSettings.visible@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.Visible(new string[] { "All" })).Render() |
Color | Not applicable | Property: dataLabelSettings.fill@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.Fill("red")).Render() |
Opacity | Not applicable | Property: dataLabelSettings.opacity@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.Opacity(0.5)).Render() |
Border color | Not applicable | Property: dataLabelSettings.border.color@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.Border(ViewBag.border)).Render() ViewBag.border = new {color="red"} |
Border width | Not applicable | Property: dataLabelSettings.border.width@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.Border(ViewBag.border)).Render() ViewBag.border = new {width=2} |
Format | Not applicable | Property: dataLabelSettings.format@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.Format("${xval}: ${yval}")).Render() |
Horizontal Offset | Not applicable | Property: dataLabelSettings.offset.x@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.Offset(ViewBag.offset)).Render() ViewBag.offset = new {x=100} |
Vertical Offset | Not applicable | Property: dataLabelSettings.offset.y@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.Offset(ViewBag.offset)).Render() ViewBag.offset = new {y=100} |
Font color | Not applicable | Property: dataLabelSettings.textStyle.color@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.TextStyle(ViewBag.textStyle)).Render() ViewBag.textStyle = new {color="green"} |
Font family | Not applicable | Property: dataLabelSettings.textStyle.fontFamily@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.TextStyle(ViewBag.textStyle)).Render() ViewBag.textStyle = new {fontFamily="Arial"} |
Font style | Not applicable | Property: dataLabelSettings.textStyle.fontStyle@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.TextStyle(ViewBag.textStyle)).Render() ViewBag.textStyle = new {fontStyle="normal"} |
Font weight | Not applicable | Property: dataLabelSettings.textStyle.fontWeight@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.TextStyle(ViewBag.textStyle)).Render() ViewBag.textStyle = new {fontWeight="bold"} |
Font opacity | Not applicable | Property: dataLabelSettings.textStyle.opacity@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.TextStyle(ViewBag.textStyle)).Render() ViewBag.textStyle = new {opacity=0.5} |
Font size | Not applicable | Property: dataLabelSettings.textStyle.fontSize@Html.EJS().Sparkline("container").DataLabelSettings(dl => dl.TextStyle(ViewBag.textStyle)).Render() ViewBag.textStyle = new {fontSize="12px"} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Color | Property: rangeBandSettings.color@Html.EJ().Sparkline("container").RangeBandSettings(range => range.Color("red")) |
Property: rangeBandSettings.color@Html.EJS().Sparkline("container").RangeBandSettings(rbs => rbs.Color("red")).Render() |
Opacity | Property: rangeBandSettings.opacity<@Html.EJ().Sparkline("container").RangeBandSettings(range => range.Opacity(0.4)) |
Property: rangeBandSettings.opacity@Html.EJS().Sparkline("container").RangeBandSettings(rbs => rbs.Opacity(0.5)).Render() |
Start range | Property: rangeBandSettings.startRange@Html.EJ().Sparkline("container").RangeBandSettings(range => range.StartRange(4)) |
Property: rangeBandSettings.startRange@Html.EJS().Sparkline("container").RangeBandSettings(rbs => rbs.StartRange(5)).Render() |
End range | Property: rangeBandSettings.endRange@Html.EJ().Sparkline("container").RangeBandSettings(range => range.EndRange(30)) |
Property: rangeBandSettings.endRange@Html.EJS().Sparkline("container").RangeBandSettings(rbs => rbs.EndRange(15)).Render() |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
High point color | Property: highPointColor@(Html.EJ().Sparkline("container")HighPointColor("Blue")) |
Property: highPointColor@Html.EJS().Sparkline("container").HighPointColor("red").Render() |
Low point color | Property: lowPointColor@(Html.EJ().Sparkline("container").LowPointColor("Orange")) |
Property: lowPointColor@Html.EJS().Sparkline("container").LowPointColor("blue").Render() |
Negative point color | Property: negativePointColor@(Html.EJ().Sparkline("container").NegativePointColor("Red")) |
Property: negativePointColor@Html.EJS().Sparkline("container").NegativePointColor("green").Render() |
Start point color | Property: startPointColor@(Html.EJ().Sparkline("container").StartPointColor("Green")) |
Property: startPointColor<@Html.EJS().Sparkline("container").StartPointColor("black").Render() |
End point color | Property: endPointColor@(Html.EJ().Sparkline("container").EndPointColor("Green")) |
Property: endPointColor@Html.EJS().Sparkline("container").EndPointColor("orange").Render() |
Tie point color | Property: tiePointColor Not Applicable |
Property: tiePointColor@Html.EJS().Sparkline("container").TiePointColor("grey").Render() |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show axis line | Property: axisSettings.visible@(Html.EJ().Sparkline("container").AxisLineSettings(as => as.Visible(true))) |
Property: axisSettings.lineSettings.visible@Html.EJS().Sparkline("container").AxisSettings(axis => axis.LineSettings(ls => ls.Visible(true))).Render() |
Line color | Property: axisSettings.color@(Html.EJ().Sparkline("container").AxisLineSettings(as => as.Color("#ff14ae"))) |
Property: axisSettings.lineSettings.color@Html.EJS().Sparkline("container").AxisSettings(axis => axis.LineSettings(ls => ls.Color("red"))).Render() |
Line width | Property: axisSettings.width@(Html.EJ().Sparkline("container").AxisLineSettings(as => as.Width(2))) |
Property: axisSettings.lineSettings.width@Html.EJS().Sparkline("container").AxisSettings(axis => axis.LineSettings(ls => ls.Width(2))).Render() |
Dash array | Property: axisSettings.dashArray@(Html.EJ().Sparkline("container").AxisLineSettings(as => as.DashArray("5,3"))) |
Property: axisSettings.lineSettings.dashArray@Html.EJS().Sparkline("container").AxisSettings(axis => axis.LineSettings(ls => ls.DashArray("5,3"))).Render() |
X axis minimum value | Not applicable | Property: axisSettings.minX@Html.EJS().Sparkline("container").AxisSettings(axis => axis.MinX(0)).Render() |
X axis maximum value | Not applicable | Property: axisSettings.maxX@Html.EJS().Sparkline("container").AxisSettings(axis => axis.MaxX(100)).Render() |
Y axis minimum value | Not applicable | Property: axisSettings.minY@Html.EJS().Sparkline("container").AxisSettings(axis => axis.MinY(0)).Render() |
Y axis maximum value | Not applicable | Property: axisSettings.maxY@Html.EJS().Sparkline("container").AxisSettings(axis => axis.MaxY(100)).Render() |
Horizontal axis line position | Not applicable | Property: axisSettings.value@Html.EJS().Sparkline("container").AxisSettings(axis => axis.Value(10))).Render() |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Background color | Property: background@(Html.EJ().Sparkline("container").Background("gray")) |
Property: containerArea.background@Html.EJS().Sparkline("container").ContainerArea(ca => ca.Background("red")).Render() |
Border color | Not applicable | Property: containerArea.border.color@Html.EJS().Sparkline("container").ContainerArea(ca => ca.Border(ViewBag.border)).Render() ViewBag.border = new {color="green"} |
Border width | Not applicable | Property: containerArea.border.width@Html.EJS().Sparkline("container").ContainerArea(ca => ca.Border(ViewBag.border)).Render() ViewBag.border = new {color="green"} |
Series color | Property: fill@(Html.EJ().Sparkline("container").Fill("gray")) |
Property: fill@Html.EJS().Sparkline("container").Fill("green").Render() |
Series opacity | Property: opacity@(Html.EJ().Sparkline("container").Opacity(0.5)) |
Property: opacity@Html.EJS().Sparkline("container").Opacity(0.5).Render() |
Line series width | Property: width@(Html.EJ().Sparkline("container").Width(2)) |
Property: lineWidth@Html.EJS().Sparkline("container").LineWidth(2).Render() |
Series border color | Property: border.color@(Html.EJ().Sparkline("container") .Border(border=>border.Color("green"))) |
Property: border.color@Html.EJS().Sparkline("container").Border(br=>br.Color("red")).Render() |
Series border width | Property: border.width@(Html.EJ().Sparkline("container") .Border(border=>border.Width(2))) |
Property: border.width@Html.EJS().Sparkline("container").Border(br=>br.Width(2)).Render() |
Series palette | Property: palette@(Html.EJ().Sparkline("container").Palette(ViewBag.palettes)) ViewBag.palettes = new string[] { "red", "green", "orange", "blue" }; |
Property: palette@Html.EJS().Sparkline("container").Palette(ViewBag.palettes).Render() ViewBag.palettes = new string[] { "red", "green", "orange", "blue" }; |
Theme | Property: theme@(Html.EJ().Sparkline("container").Theme(SparkTheme.FlatDark)) |
Property: theme@Html.EJS().Sparkline("container").Theme("Material").Render() |
Width | Property: size.width@(Html.EJ().Sparkline("container").Width("300px")) |
Property: width@Html.EJS().Sparkline("container").Width("300px").Render() |
Height | Property: size.height<@(Html.EJ().Sparkline("container").Height("300px")) |
Property: height@Html.EJS().Sparkline("container").Height("300px").Render() |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show tooltip | Property: tooltip.visible@(Html.EJ().Sparkline("container").Tooltip(tooltip => tooltip.Visible(true))) |
Property: tooltipSettings.visible@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.Visible(true)).Render() |
Background | Property: tooltip.fill@(Html.EJ().Sparkline("container").Tooltip(tooltip => tooltip.Fill("red"))) |
Property: tooltipSettings.fill@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.Fill("red")).Render() |
Format | Not applicable | Property: tooltipSettings.format@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.Format("${xval}: ${yval}")).Render() |
Template | Property: tooltip.template@(Html.EJ().Sparkline("container").Tooltip(tooltip => tooltip.Template("tooltip"))) <div id="tooltip"> <div>#point.x#</div> <div>#point.y#</div> </div> |
Property: tooltipSettings.template@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.Template("tooltip")).Render() <div id="tooltip">${x} : ${y}<div> |
Font color | Property: tooltip.font.color@(Html.EJ().Sparkline("container").Tooltip(tooltip => tooltip.Font(font=>font.Color("red")))) |
Property: tooltipSettings.textStyle.color@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.TextStyle(ViewBag.font)).Render() ViewBag.font = new { color="gray"}; |
Font opacity | Property: tooltip.font.opacity@(Html.EJ().Sparkline("container").Tooltip(tooltip => tooltip.Font(font=>font.Opacity(0.5)))) |
Property: tooltipSettings.textStyle.opacity@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.TextStyle(ViewBag.font)).Render() ViewBag.font = new { opacity=0.5}; |
Font size | Property: tooltip.font.size@(Html.EJ().Sparkline("container").Tooltip(tooltip => tooltip.Font(font=>font.Size('12px')))) |
Property: tooltipSettings.textStyle.size@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.TextStyle(ViewBag.font)).Render() ViewBag.font = new { size="14px"}; |
Font family | Property: tooltip.font.fontFamily@(Html.EJ().Sparkline("container").Tooltip(tooltip => tooltip.Font(font=>font.FontFamily('Algerian')))) |
Property: tooltipSettings.textStyle.fontFamily@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.TextStyle(ViewBag.font)).Render() ViewBag.font = new { fontFamily="Arial"}; |
Font style | Property: tooltip.font.fontStyle@(Html.EJ().Sparkline("container").Tooltip(tooltip => tooltip.Font(font=>font.FontStyle('Italic')))) |
Property: tooltipSettings.textStyle.fontStyle@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.TextStyle(ViewBag.font)).Render() ViewBag.font = new { fontStyle="normal"}; |
Font weight | Property: tooltip.font.fontWeight@(Html.EJ().Sparkline("container").Tooltip(tooltip => tooltip.Font(font=>font.FontWeight('Lighter')))) |
Property: tooltipSettings.textStyle.fontWeight@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.TextStyle(ViewBag.font)).Render() ViewBag.font = new { fontWeight="bold"}; |
Enable track line | Not applicable | Property: tooltipSettings.trackLineSettings.visible@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.TrackLineSettings(ts=>ts.Visible(true))).Render() |
Track line color | Not applicable | Property: tooltipSettings.trackLineSettings.color@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.TrackLineSettings(ts=>ts.Color("red"))).Render() |
Track line width | Not applicable | Property: tooltipSettings.trackLineSettings.width@Html.EJS().Sparkline("container").TooltipSettings(tooltip => tooltip.TrackLineSettings(ts=>ts.Width(2)).Render() |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enable canvas rendering | Property: enableCanvasRendering@Html.EJ().Sparkline("container").EnableCanvasRandering(true)) |
Not applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Localization | Property: locale@Html.EJ().Sparkline("container").Locale("en-US")) |
Property: type@Html.EJS().Sparkline("container").Locale("en-US").Render() |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Dynamically updating sparkline | Method: redrawvar sparkline = $("#container").ejSparkline("instance"); sparkline.redraw(); |
Method: refreshvar sparkline = document.getElementById("container").ej2_instances[0]; sparkline.refresh(); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Load | Event: load@(Html.EJ().Sparkline("container").Load("load")) function load(args) { } |
Event: load `@Html.EJS().Sparkline(“container”).Load(“load”).Render() |
<br/><br/> function load(args) { }` |
||
Load completed | Event: loaded@(Html.EJ().Sparkline("container").Loaded("loaded")) function loaded(args) { } |
Event: loaded@Html.EJS().Sparkline("container").Loaded("loaded").Render() function loaded(args) { } |
Initialize tooltip | Event: tooltipInitialize@(Html.EJ().Sparkline("container").TooltipInitialize("tooltipInitialize")) function tooltipInitialize(args) { } |
Event: tooltipInitialize@Html.EJS().Sparkline("container").TooltipInitialize("tooltipInitialize").Render() function tooltipInitialize(args) { } |
Series rendering | Event: seriesRendering@(Html.EJ().Sparkline("container").SeriesRendering("seriesRendering")) function seriesRendering(args) { } |
Event: seriesRendering@Html.EJS().Sparkline("container").SeriesRendering("seriesRendering").Render() function seriesRendering(args) { } |
Region mouse move | Event: pointRegionMouseMove@(Html.EJ().Sparkline("container").PointRegionMouseMove("pointRegionMouseMove")) function pointRegionMove(args) { } |
Event: pointRegionMouseMove@Html.EJS().Sparkline("container").PointRegionMouseMove("pointRegionMouseMove").Render() function pointRegionMouseMove(args) { } |
Region click | Event: pointRegionMouseClick@(Html.EJ().Sparkline("container").PointRegionMouseClick("pointRegionMouseClick")) function pointRegionClick(args) { } |
Event: pointRegionMouseClick@Html.EJS().Sparkline("container").PointRegionMouseClick("pointRegionMouseClick").Render() function pointRegionMouseClick(args) { } |
Mouse move | Event: sparklineMouseMove@(Html.EJ().Sparkline("container").SparklineMouseMove("sparklineMouseMove")) function mouseMove(args) { } |
Event: sparklineMouseMove@Html.EJS().Sparkline("container").SparklineMouseMove("sparklineMouseMove").Render() function sparklineMouseMove(args) { } |
Mouse leave | Event: sparklineMouseLeave@(Html.EJ().Sparkline("container").SparklineMouseLeave("sparklineMouseLeave")) function mouseLeave(args) { } |
Not applicable |
Click | Event: click@(Html.EJ().Sparkline("container").Click("click")) function sparklineMouseClick(args) { } |
Event: sparklineMouseClick@Html.EJS().Sparkline("container").SparklineMouseClick("sparklineMouseClick").Render() function sparklineMouseClick(args) { } |
doubleClick | Event: doubleClick@(Html.EJ().Sparkline("container").DoubleClick("doubleClick")) function doubleClick(args) { } |
Not applicable |
rightClick | Event: rightClick@(Html.EJ().Sparkline("container").RightClick("rightClick")) function rightClick(args) { } |
Not applicable |
axisRendering | Not applicable | Event: axisRendering@Html.EJS().Sparkline("container").AxisRendering("axisRendering").Render() function axisRendering(args) { } |
dataLabelRendering | Not applicable | Event: dataLabelRendering@Html.EJS().Sparkline("container").DataLabelRendering("dataLabelRendering").Render() function dataLabelRendering(args) { } |
markerRendering | Not applicable | Event: markerRendering@Html.EJS().Sparkline("container").MarkerRendering("markerRendering").Render() function markerRendering(args) { } |
pointRendering | Not applicable | Event: pointRendering@Html.EJS().Sparkline("container").PointRendering("pointRendering").Render() function pointRendering(args) { } |
resize | Not applicable | Event: resize@Html.EJS().Sparkline("container").Resize("resize").Render() function resize(args) { } |