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) { } |