ASP.NET MVC
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in ASP.NET MVC Sparkline control

19 Oct 2021 / 7 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">
  <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()

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: redraw

var sparkline = $("#container").ejSparkline("instance");
sparkline.redraw();		 Method: refresh

var sparkline = document.getElementById("container").ej2_instances[0];
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) { }
Previous
Next