Contents
- Sparkline Types
- Databinding
- Markers
- Data labels
- Range band
- Special points customization
- Axis customization
- Appearance customization
- Tooltip
- Rendering
- Localization
- Methods
- Events
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 202418 minutes to read
This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2.
Sparkline Types
| 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()
|
Databinding
| 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()
|
Markers
| 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 |
Data labels
| 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"}
|
Range band
| 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()
|
Special points customization
| 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()
|
Axis customization
| 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()
|
Appearance customization
| 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()
|
Tooltip
| 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"></br> <div>#point.x#</div></br> <div>#point.y#</div></br></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()
|
Rendering
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Enable canvas rendering |
Property: enableCanvasRendering@Html.EJ().Sparkline("container").EnableCanvasRandering(true))
|
Not applicable |
Localization
| 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()
|
Methods
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Dynamically updating sparkline |
Method: redrawvar sparkline = $("#container").ejSparkline("instance");</br>sparkline.redraw();
|
Method: refreshvar sparkline = document.getElementById("container").ej2_instances[0];</br>sparkline.refresh();
|
Events
| 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) { }
|