Ej1 api migration in Angular Sparkline component

5 Apr 202520 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

<ej-sparkline id="container" type='line'></ej-sparkline> 		Property: type

<ejs-sparkline id='container' type="Column"></ejs-sparkline>

Databinding

Behavior API in Essential® JS 1 API in Essential® JS 2
Datasource Property: dataSource

<ej-sparkline id="sparkline" [dataSource]="dataSource"></ej-sparkline> 		Property: dataSource

<ejs-sparkline id="sparkline" [dataSource]="dataSource"></ejs-sparkline>
Binding X values with datasource Property: xName

<ej-sparkline id="sparkline" xName="xValue"></ej-sparkline> 		Property: xName

<ejs-sparkline id="sparkline" xName="xValue"></ejs-sparkline>
Binding Y values with datasource Property: yName

<ej-sparkline id="sparkline" yName="yValue"></ej-sparkline> 		Property: yName

<ejs-sparkline id="sparkline" yName="yValue"></ejs-sparkline>

Markers

Behavior API in Essential® JS 1 API in Essential® JS 2
Enable markers Property: markerSettings.visible

<ej-sparkline id="sparkline" [markerSettings.visible]="true"></ej-sparkline> 		Property: markerSettings.visible

<ejs-sparkline id="sparkline" [markerSettings] ='markerSettings'></ejs-sparkline>
TS:
public markerSettings: Object = { visible: [“All”] }
Color Property: markerSettings.fill

<ej-sparkline id="sparkline" markerSettings.fill="red"></ej-sparkline> 		Property: markerSettings.fill

<ejs-sparkline id="sparkline" [markerSettings] ='markerSettings'></ejs-sparkline>
TS:
public markerSettings: Object = { fill: “green” }
Size Property: markerSettings.width

<ej-sparkline id="sparkline" [markerSettings.width]=10></ej-sparkline> 		Property: markerSettings.size

<ejs-sparkline id="sparkline" [markerSettings] ='markerSettings'></ejs-sparkline>
TS:
public markerSettings: Object = { size: 5 }
Opacity Property: markerSettings.opacity

<ej-sparkline id="sparkline" [markerSettings.width]=0.5></ej-sparkline> 		Property: markerSettings.opacity

<ejs-sparkline id="sparkline" [markerSettings] ='markerSettings'></ejs-sparkline>
TS:
public markerSettings: Object = { opacity: 0.5}
Border color Property: markerSettings.border.color

<ej-sparkline id="sparkline" markerSettings.border.color="green"></ej-sparkline> 		Property: markerSettings.border.color

<ejs-sparkline id="sparkline" [markerSettings] ='markerSettings'></ejs-sparkline>
TS:
public markerSettings: Object = { border: { color: “red” } }
Border width Property: markerSettings.border.width

<ej-sparkline id="sparkline" [markerSettings.border.width]=1></ej-sparkline> 		Property: markerSettings.border.width

<ejs-sparkline id="sparkline" [markerSettings] ='markerSettings'></ejs-sparkline>
TS:
public markerSettings: Object = { border: { width: 2 } }
Border opacity Property: markerSettings.border.opacity

<ej-sparkline id="sparkline" [markerSettings.border.opacity]=0.5></ej-sparkline> 		Not applicable

Data labels

Behavior API in Essential® JS 1 API in Essential® JS 2
Enable data labels Not applicable Property: dataLabelSettings.visible

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { visible: [“All”] }
Color Not applicable Property: dataLabelSettings.fill

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { fill: “red” }
Opacity Not applicable Property: dataLabelSettings.opacity

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { opacity: 0.5 }
Border color Not applicable Property: dataLabelSettings.border.color

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { border: { color: “green” } }
Border width Not applicable Property: dataLabelSettings.border.width

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { border: {width: 1 } }
Format Not applicable Property: dataLabelSettings.format

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { format: “${xval}: ${yval}”}
Horizontal Offset Not applicable Property: dataLabelSettings.offset.x

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { offset: {x: 100 } }
Vertical Offset Not applicable Property: dataLabelSettings.offset.y

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { offset: {y: 100 } }
Font color Not applicable Property: dataLabelSettings.textStyle.color
<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { textStyle: { color: “green” } }		    
Font family Not applicable Property: dataLabelSettings.textStyle.fontFamily

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { textStyle: { fontFamily: “Arial” } }
Font style Not applicable Property: dataLabelSettings.textStyle.fontStyle

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { textStyle: { fontStyle: “normal” } }
Font weight Not applicable Property: dataLabelSettings.textStyle.fontWeight

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { textStyle: { fontWeight: “Bold” } }
Font opacity Not applicable Property: dataLabelSettings.textStyle.opacity

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { textStyle: { opacity: 0.5 } }
Font size Not applicable Property: dataLabelSettings.textStyle.fontSize

<ejs-sparkline id="sparkline" [dataLabelSettings] ='dataLabelSettings'></ejs-sparkline>
TS:
public dataLabelSettings: Object = { textStyle: { fontSize: “12px” } }

Range band

Behavior API in Essential® JS 1 API in Essential® JS 2
Color Property: rangeBandSettings.color

<ej-sparkline id="sparkline" [rangeBandSettings]="rangeBandSettings"></ej-sparkline>
TS:
this.rangeBandSettings = { color: “#ff14ae” }		 Property: rangeBandSettings.color

<ejs-sparkline id="sparkline" [rangeBandSettings] ='rangeBandSettings'></ejs-sparkline>
TS:
public rangeBandSettings: Object = { color: “red” }
Opacity Property: rangeBandSettings.opacity

<ej-sparkline id="sparkline" [rangeBandSettings]="rangeBandSettings"></ej-sparkline>
TS:
this.rangeBandSettings = { opacity: 0.5 }		 Property: rangeBandSettings.opacity

<ejs-sparkline id="sparkline" [rangeBandSettings] ='rangeBandSettings'></ejs-sparkline>
TS:
public rangeBandSettings: Object = { opacity: 0.5 }
Start range Property: rangeBandSettings.startRange

<ej-sparkline id="sparkline" [rangeBandSettings]="rangeBandSettings"></ej-sparkline>
TS:
this.rangeBandSettings = { startRange: 0 }		 Property: rangeBandSettings.startRange

<ejs-sparkline id="sparkline" [rangeBandSettings] ='rangeBandSettings'></ejs-sparkline>
TS:
public rangeBandSettings: Object = { startRange: 0 }
End range Property: rangeBandSettings.endRange

<ej-sparkline id="sparkline" [rangeBandSettings]="rangeBandSettings"></ej-sparkline>
TS:
this.rangeBandSettings = { endRange: 50 }		 Property: rangeBandSettings.endRange

<ejs-sparkline id="sparkline" [rangeBandSettings] ='rangeBandSettings'></ejs-sparkline>
TS:
public rangeBandSettings: Object = { endRange: 30 }

Special points customization

| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| — | — | — |
|High point color| Property: highPointColor

<ej-sparkline id="sparkline" highPointColor="blue"></ej-sparkline> |Property: highPointColor

<ejs-sparkline id="sparkline" highPointColor="red"></ejs-sparkline>|
|Low point color| Property: lowPointColor

<ej-sparkline id="sparkline" lowPointColor="orange"></ej-sparkline> |Property: lowPointColor

<ejs-sparkline id="sparkline" lowPointColor="red"></ejs-sparkline>|
|Negative point color| Property: negativePointColor

<ej-sparkline id="sparkline" negativePointColor="red"></ej-sparkline> |Property: negativePointColor

<ejs-sparkline id="sparkline" negativePointColor="red"></ejs- |**Property:** *startPointColor*<br/><br/> | |End point color| **Property:** *endPointColor*<br/><br/> |**Property:** *endPointColor*<br/><br/> | |Tie point color| **Property:** *tiePointColor*<br/><br/>Not Applicable |**Property:** *tiePointColor*<br/><br/> `|

Axis customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Show axis line Property: axisSettings.visible

<ej-sparkline id="sparkline" [axisLineSettings.visible]="true"></ej-sparkline> 		Property: axisSettings.lineSettings.visible

<ejs-sparkline id="sparkline" [axisSettings] ='axisSettings'></ejs-sparkline>
TS:
public axisSettings: Object = { visible: true }
Line color Property: axisSettings.color

<ej-sparkline id="sparkline" axisLineSettings.color="#ff14ae"></ej-sparkline> 		Property: axisSettings.lineSettings.color

<ejs-sparkline id="sparkline" [axisSettings] ='axisSettings'></ejs-sparkline>
TS:
public axisSettings: Object = { color: “red” }
Line width Property: axisSettings.width

<ej-sparkline id="sparkline" [axisLineSettings.width]=2></ej-sparkline> 		Property: axisSettings.lineSettings.width

<ejs-sparkline id="sparkline" [axisSettings] ='axisSettings'></ejs-sparkline>
TS:
public axisSettings: Object = { width: 2 }
Dash array Property: axisSettings.dashArray

<ej-sparkline id="sparkline" axisLineSettings.dashArray="5,3"></ej-sparkline> 		Property: axisSettings.lineSettings.dashArray

<ejs-sparkline id="sparkline" [axisSettings] ='axisSettings'></ejs-sparkline>
TS:
public axisSettings: Object = { dashArray: “5,3” }
X axis minimum value Not applicable Property: axisSettings.minX

<ejs-sparkline id="sparkline" [axisSettings] ='axisSettings'></ejs-sparkline>
TS:
public axisSettings: Object = { minX: 0 }
X axis maximum value Not applicable Property: axisSettings.maxX

<ejs-sparkline id="sparkline" [axisSettings] ='axisSettings'></ejs-sparkline>
TS:
public axisSettings: Object = { maxX: 100 }
Y axis minimum value Not applicable Property: axisSettings.minY

<ejs-sparkline id="sparkline" [axisSettings] ='axisSettings'></ejs-sparkline>
TS:
public axisSettings: Object = { minY: 0 }
Y axis maximum value Not applicable Property: axisSettings.maxY

<ejs-sparkline id="sparkline" [axisSettings] ='axisSettings'></ejs-sparkline>
TS:
public axisSettings: Object = { maxY: 100 }
Horizontal axis line position Not applicable Property: axisSettings.value

<ejs-sparkline id="sparkline" [axisSettings] ='axisSettings'></ejs-sparkline>
TS:
public axisSettings: Object = { value: 10 }

Appearance customization

| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| — | — | — |
|Background color| Property: background

<ej-sparkline id="sparkline" background="grey"></ej-sparkline> |Property: containerArea.background

<ejs-sparkline id="sparkline" [containerArea]='containerArea'></ejs-sparkline>
TS:
public containerArea: Object = { background: ‘#eff1f4’ }|
|Border color | Not applicable |Property: containerArea.border.color

<ejs-sparkline id="sparkline" [containerArea]='containerArea'></ejs-sparkline>
TS:
public containerArea: Object = { border: { color: ‘#033e96’ } }|
|Border width | Not applicable |Property: containerArea.border.width

<ejs-sparkline id=”sparkline” [containerArea]=’containerArea’></ejs-sparkline><br/> **TS:** <br/> public containerArea: Object = { border: { width: 2 } }| |Series color| **Property:** *fill*<br/><br/> |**Property:** *fill*<br/><br/> | |Series opacity| **Property:** *opacity*<br/><br/> <ej-sparkline id=”sparkline” [opacity]=0.5></ej-sparkline> |**Property:** *opacity*<br/><br/> <ejs-sparkline id=”sparkline” opacity=0.5></ejs-sparkline>| |Line series width| **Property:** *width*<br/><br/> <ej-sparkline id=”sparkline” [width]=3></ej-sparkline> |**Property:** *lineWidth*<br/><br/> | |Series border color| **Property:** *border.color*<br/><br/> |**Property:** *border.color*<br/><br/><ejs-sparkline id=”sparkline” [border]=”border”></ejs-sparkline> **TS:** <br/> public: Object = [{ color: "red" }| |Series border width| **Property:** *border.width*<br/><br/> <e-border [width]="1"></e-border> |**Property:** *border.width*<br/><br/> <ejs-sparkline id=”sparkline” [border]=”border”></ejs-sparkline> **TS:** <br/> public: Object = [{ width: 2 } | |Series palette| **Property:** *palette*<br/><br/> <ej-sparkline id=”sparkline” [palette]=”palettes”></ej-sparkline><br/> **TS:** <br/> palettes: string[] = ["red", "green", "orange", "blue"] |**Property:** *palette*<br/><br/> <ejs-sparkline id=”sparkline” [palette]=”palettes”></ejs-sparkline>**TS:** <br/> public palettes: string[] = ["red", "green", "orange", "blue"]| |Theme| **Property:** *theme*<br/><br/> |**Property:** *theme*<br/><br/> | |Width| **Property:** *size.width*<br/><br/> |**Property:** *width*<br/><br/> | |Height| **Property:** *size.height*<br/><br/> |**Property:** *height*<br/><br/> `|

Tooltip

Behavior API in Essential® JS 1 API in Essential® JS 2
Show tooltip Property: tooltip.visible

<ej-sparkline id="sparkline" [tooltip.visible]="true"></ej-sparkline> 		Property: tooltipSettings.visible

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { visible: true }
Background Property: tooltip.fill

<ej-sparkline id="sparkline" tooltip.fill="red"></ej-sparkline> 		Property: tooltipSettings.fill

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { fill: “white” }
Format Not applicable Property: tooltipSettings.format

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { format:”${xval}: ${yval}” }
Template Property: tooltip.template

<ej-sparkline id="sparkline" tooltip.template="tooltip"></ej-sparkline>

<div id="tooltip"></br>  <div>#point.x#</div></br>  <div>#point.y#</div></br></div> 		Property: tooltipSettings.template

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>

<div id="tooltip">${x} : ${y}<div>
TS:
public tooltipSettings: Object = { template: “tooltip” }
Font color Property: tooltip.font.color

<ej-sparkline id="sparkline" tooltip.font.color="red"></ej-sparkline> 		Property: tooltipSettings.textStyle.color

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { textStyle: { color: “grey” } }
Font opacity Property: tooltip.font.opacity

<ej-sparkline id="sparkline" [tooltip.font.opacity]=0.5></ej-sparkline> 		Property: tooltipSettings.textStyle.opacity

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { textStyle: { opacity: 0.5 } }
Font size Property: tooltip.font.size

<ej-sparkline id="sparkline" tooltip.font.size="12px"></ej-sparkline> 		Property: tooltipSettings.textStyle.size

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { textStyle: { size: “12px” } }
Font family Property: tooltip.font.fontFamily

<ej-sparkline id="sparkline" tooltip.font.fontFamily="Arial"></ej-sparkline> 		Property: tooltipSettings.textStyle.fontFamily

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { textStyle: { fontFamily: “Arial” } }
Font style Property: tooltip.font.fontStyle

<ej-sparkline id="sparkline" tooltip.font.fontStyle="normal"></ej-sparkline> 		Property: tooltipSettings.textStyle.fontStyle

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { textStyle: { fontStyle: “normal” } }
Font weight Property: tooltip.font.fontWeight

<ej-sparkline id="sparkline" tooltip.font.fontWeight="bold"></ej-sparkline> 		Property: tooltipSettings.textStyle.fontWeight

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { textStyle: { fontWeight: “bold” } }
Enable track line Not applicable Property: tooltipSettings.trackLineSettings.visible

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { trackLineSettings: { visible: true } }
Track line color Not applicable Property: tooltipSettings.trackLineSettings.color

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { trackLineSettings: { color: “red” } }
Track line width Not applicable Property: tooltipSettings.trackLineSettings.width

<ejs-sparkline id="sparkline" [tooltipSettings]='tooltipSettings'></ejs-sparkline>
TS:
public tooltipSettings: Object = { trackLineSettings: { width: width } }

Rendering

Behavior API in Essential® JS 1 API in Essential® JS 2
Enable canvas rendering Property: enableCanvasRendering

Not Applicable		 Not applicable

Localization

Behavior API in Essential® JS 1 API in Essential® JS 2
Localization Property: locale

<ej-sparkline id="sparkline" locale="en-US"></ej-sparkline> 		Property: type

<ejs-sparkline id="sparkline" locale="en-US"></ejs-sparkline>

Methods

Behavior API in Essential® JS 1 API in Essential® JS 2
Dynamically updating sparkline Method: redraw

TS:
@ViewChild(“sparkline) sparkline: EJComponents<any, any>;
this.sparkline.widget.redraw()		 Method: refresh

TS:
@ViewChild(“sparkline”) public sparkline: SparklineComponent;
this.sparkline.refresh()

Events

Behavior API in Essential® JS 1 API in Essential® JS 2
Load Event: load

<ej-sparkline id="sparkline" (load)="load($event)"> </ej-sparkline>
TS:
public load(args) { }		 Event: load

<ejs-sparkline id="sparkline" (load)="load($event)"></ejs-sparkline>
TS:
public load(args) { }
Load completed Event: loaded

<ej-sparkline id="sparkline" (loaded)="loaded($event)"></ej-sparkline>
TS:
public loaded(args) { }		 Event: loaded

<ejs-sparkline id="sparkline" (loaded)="loaded($event)"></ejs-sparkline>
TS:
public loaded(args) { }
Initialize tooltip Event: tooltipInitialize

<ej-sparkline id="sparkline" (tooltipInitialize)="tooltipInitialize($event)"></ej-sparkline>
TS:
public tooltipInitialize(args) { }		 Event: tooltipInitialize

<ejs-sparkline id="sparkline" (tooltipInitialize)="tooltipInitialize($event)"></ejs-sparkline>
TS:
public tooltipInitialize(args) { }
Series rendering Event: seriesRendering

<ej-sparkline id="sparkline" (seriesRendering)="seriesRendering($event)"></ej-sparkline>
TS:
public seriesRendering(args) { }		 Event: seriesRendering

<ejs-sparkline id="sparkline" (seriesRendering)="seriesRendering($event)"></ejs-sparkline>
TS:
public seriesRendering(args) { }
Region mouse move Event: pointRegionMouseMove

<ej-sparkline id="sparkline" (pointRegionMouseMove)="pointRegionMove($event)"></ej-sparkline>
TS:
public pointRegionMove(args) { }		 Event: pointRegionMouseMove

<ejs-sparkline id="sparkline" (pointRegionMouseMove)="pointRegionMouseMove($event)"></ejs-sparkline>
TS:
public pointRegionMouseMove(args) { }
Region click Event: pointRegionMouseClick

<ej-sparkline id="sparkline" (pointRegionMouseClick)="pointRegionClick($event)"></ej-sparkline>
TS:
public pointRegionClick(args) { }		 Event: pointRegionMouseClick

<ejs-sparkline id="sparkline" (pointRegionMouseClick)="pointRegionMouseClick($event)"></ejs-sparkline>
TS:
public pointRegionMouseClick(args) { }
Mouse move Event: sparklineMouseMove

<ej-sparkline id="sparkline" (sparklineMouseMove)="mouseMove($event)"></ej-sparkline>
TS:
public mouseMove(args) { }		 Event: sparklineMouseMove

<ejs-sparkline id="sparkline" (sparklineMouseMove)="sparklineMouseMove($event)"></ejs-sparkline>
TS:
public sparklineMouseMove(args) { }
Mouse leave Event: sparklineMouseLeave

<ej-sparkline id="sparkline" (sparklineMouseLeave)="mouseLeave($event)"></ej-sparkline>
TS:
public mouseLeave(args) { }		 Not applicable
Click Event: click

<ej-sparkline id="sparkline" (sparklineMouseClick)="sparklineMouseClick($event)"></ej-sparkline>
TS:
public sparklineMouseClick(args) { }		 Event: sparklineMouseClick

<ejs-sparkline id="sparkline" (sparklineMouseClick)="sparklineMouseClick($event)"></ejs-sparkline>
TS:
public sparklineMouseClick(args) { }
doubleClick Event: doubleClick

<ej-sparkline id="sparkline" (doubleClick)="doubleClick($event)"></ej-sparkline>
TS:
public load(args) { }		 Not applicable
rightClick Event: rightClick

<ej-sparkline id="sparkline" (rightClick)="rightClick($event)"></ej-sparkline>
TS:
public rightClick(args) { }		 Not applicable
axisRendering Not applicable Event: axisRendering

<ejs-sparkline id="sparkline" (axisRendering)="axisRendering($event)"></ejs-sparkline>
TS:
public axisRendering(args) { }
dataLabelRendering Not applicable Event: dataLabelRendering

<ejs-sparkline id="sparkline" (dataLabelRendering)="dataLabelRendering($event)"></ejs-sparkline>
TS:
public dataLabelRendering(args) { }
markerRendering Not applicable Event: markerRendering

<ejs-sparkline id="sparkline" (markerRendering)="markerRendering($event)"></ejs-sparkline>
TS:
public markerRendering(args) { }
pointRendering Not applicable Event: pointRendering

<ejs-sparkline id="sparkline" (pointRendering)="pointRendering($event)"></ejs-sparkline>
TS:
public load(args) { }
resize Not applicable Event: resize

<ejs-sparkline id="sparkline" (resize)="resize($event)"></ejs-sparkline>
TS:
public resize(args) { }