Ej1 api migration in React Sparkline component

17 Mar 202521 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="sparkline" type="line"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: type

<SparklineComponent id='sparkline' type='Line'></SparklineComponent >,

document.getElementById('sparkline');

Databinding

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

<EJ.Sparkline id="sparkline" dataSource={dataSource1}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: dataSource

<SparklineComponent id='sparkline' dataSource={[ {x:0,yval:50},{x:1,yval:30}]}></SparklineComponent >,

document.getElementById('sparkline')
Binding X values with datasource Property: xName

<EJ.Sparkline id="sparkline" xName="x"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: xName

<SparklineComponent id='sparkline' xName='xValue'></SparklineComponent >,

document.getElementById('sparkline');
Binding Y values with datasource Property: yName

<EJ.Sparkline id="sparkline" yName="yval"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: yName

<SparklineComponent id='sparkline' yName='yValue'></SparklineComponent >,

document.getElementById('sparkline');

Markers

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

var markerSettings = { visible:true }
<EJ.Sparkline id="sparkline" markerSettings={markerSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: markerSettings.visible

<SparklineComponent id='sparkline' markerSettings=} visible: ['All']}></SparklineComponent >,

document.getElementById('sparkline');
Color Property: markerSettings.fill

var markerSettings = { fill:"green" }
<EJ.Sparkline id="sparkline" markerSettings={markerSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: markerSettings.fill

<SparklineComponent id='sparkline' markerSettings=} fill:'green'}></SparklineComponent >,

document.getElementById('sparkline');
Size Property: markerSettings.width

var markerSettings = { width:2 }
<EJ.Sparkline id="sparkline" markerSettings={markerSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: markerSettings.size

<SparklineComponent id='sparkline' markerSettings=} size:10}></SparklineComponent >,

document.getElementById('sparkline');
Opacity Property: markerSettings.opacity

var markerSettings = { opacity:0.5 }
<EJ.Sparkline id="sparkline" markerSettings={markerSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: markerSettings.opacity

<SparklineComponent id='sparkline' markerSettings=} opacity:0.5}></SparklineComponent >,

document.getElementById('sparkline');
Border color Property: markerSettings.border.color

var markerSettings = { border:{ color: "red"} }
<EJ.Sparkline id="sparkline" markerSettings={markerSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: markerSettings.border.color

<SparklineComponent id='sparkline' markerSettings=} border:{color:'green'}}></SparklineComponent >,

document.getElementById('sparkline');
Border width Property: markerSettings.border.width

var markerSettings = { border:{width:2} }
<EJ.Sparkline id="sparkline" markerSettings={markerSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: markerSettings.border.width

<SparklineComponent id='sparkline' markerSettings=} border:{width:2}}></SparklineComponent >,

document.getElementById('sparkline');
Border opacity Property: markerSettings.border.opacity

var markerSettings = { border:{opacity:0.5} }
<EJ.Sparkline id="sparkline" markerSettings={markerSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Not applicable

Data labels

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

<SparklineComponent id='sparkline' dataLabelSettings=} visible:['All'] }></SparklineComponent >,

document.getElementById('sparkline');
Color Not applicable Property: dataLabelSettings.fill

<SparklineComponent id='sparkline' dataLabelSettings=} color:'green'}></SparklineComponent >,

document.getElementById('sparkline');
Opacity Not applicable Property: dataLabelSettings.opacity

<SparklineComponent id='sparkline' dataLabelSettings=} opacity:0.5}></SparklineComponent >,

document.getElementById('sparkline');
Border color Not applicable Property: dataLabelSettings.border.color

<SparklineComponent id='sparkline' dataLabelSettings=} border:{color:'green'}}></SparklineComponent >,

document.getElementById('sparkline');
Border width Not applicable Property: dataLabelSettings.border.width

<SparklineComponent id='sparkline' dataLabelSettings=} border:{width:2}}></SparklineComponent >,

document.getElementById('sparkline');
Format Not applicable Property: dataLabelSettings.format

<SparklineComponent id='sparkline' dataLabelSettings=} format:'${xval}: ${yval}'}></SparklineComponent >,

document.getElementById('sparkline');
Horizontal Offset Not applicable Property: dataLabelSettings.offset.x

<SparklineComponent id='sparkline' dataLabelSettings=} offset:{x:10}}></SparklineComponent >,

document.getElementById('sparkline');
Vertical Offset Not applicable Property: dataLabelSettings.offset.y

<SparklineComponent id='sparkline' dataLabelSettings=} offset:{y:10}}></SparklineComponent >,

document.getElementById('sparkline');
Font color Not applicable Property: dataLabelSettings.textStyle.color

<SparklineComponent id='sparkline' dataLabelSettings=}textStyle:{color:'red'}}></SparklineComponent >,

document.getElementById('sparkline');
Font family Not applicable Property: dataLabelSettings.textStyle.fontFamily

<SparklineComponent id='sparkline' dataLabelSettings=}textStyle:{fontFamily:'Arial'}}></SparklineComponent >,

document.getElementById('sparkline');
Font style Not applicable Property: dataLabelSettings.textStyle.fontStyle

<SparklineComponent id='sparkline' dataLabelSettings=} textStyle:{fontStyle:'Normal'}}></SparklineComponent >,

document.getElementById('sparkline');
Font weight Not applicable Property: dataLabelSettings.textStyle.fontWeight

<SparklineComponent id='sparkline' dataLabelSettings=} textStyle:{fontWeight:'Bold'}}></SparklineComponent >,

document.getElementById('sparkline');
Font opacity Not applicable Property: dataLabelSettings.textStyle.opacity

<SparklineComponent id='sparkline' dataLabelSettings=} textStyle:{opacity:0.5}}></SparklineComponent >,

document.getElementById('sparkline');
Font size Not applicable Property: dataLabelSettings.textStyle.fontSize

<SparklineComponent id='sparkline' dataLabelSettings=} textStyle:{fontSize:'10px'}}></SparklineComponent >,

document.getElementById('sparkline');

Range band

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

var rangeBandSettings = { color:"green" }
<EJ.Sparkline id="sparkline" rangeBandSettings={rangeBandSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: rangeBandSettings.color

<SparklineComponent id='sparkline' rangeBandSettings=} color:'green'}></SparklineComponent >,

document.getElementById('sparkline');
Opacity Property: rangeBandSettings.opacity

var rangeBandSettings = { opacity:0.5 }
<EJ.Sparkline id="sparkline" rangeBandSettings={rangeBandSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: rangeBandSettings.opacity

<SparklineComponent id='sparkline' rangeBandSettings=} opacity:0.5}></SparklineComponent >,

document.getElementById('sparkline');
Start range Property: rangeBandSettings.startRange

var rangeBandSettings = { startRange: 4 }
<EJ.Sparkline id="sparkline" rangeBandSettings={rangeBandSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: rangeBandSettings.startRange

<SparklineComponent id='sparkline' rangeBandSettings=} startRange:4}></SparklineComponent >,

document.getElementById('sparkline');
End range Property: rangeBandSettings.endRange

var rangeBandSettings = { endRange:30 }
<EJ.Sparkline id="sparkline" rangeBandSettings={rangeBandSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: rangeBandSettings.endRange

<SparklineComponent id='sparkline' rangeBandSettings=} endRange:30}></SparklineComponent >,

document.getElementById('sparkline');

Special points customization

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

<EJ.Sparkline id="sparkline" highPointColor="green"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: highPointColor

<SparklineComponent id='sparkline' highPointColor='green'></SparklineComponent >,

document.getElementById('sparkline');
Low point color Property: lowPointColor

<EJ.Sparkline id="sparkline" lowPointColor="green"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: lowPointColor

<SparklineComponent id='sparkline' lowPointColor='green'></SparklineComponent >,

document.getElementById('sparkline');
Negative point color Property: negativePointColor

<EJ.Sparkline id="sparkline" negativePointColor="green"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: negativePointColor

<SparklineComponent id='sparkline' negativePointColor='green'></SparklineComponent >,

document.getElementById('sparkline');
Start point color Property: startPointColor

<EJ.Sparkline id="sparkline" startPointColor="green"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: startPointColor

<SparklineComponent id='sparkline' startPointColor='green'></SparklineComponent >,

document.getElementById('sparkline');
End point color Property: endPointColor

<EJ.Sparkline id="sparkline" endPointColor="green"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: endPointColor

<SparklineComponent id='sparkline' endPointColor='green'></SparklineComponent >,

document.getElementById('sparkline');
Tie point color Property: tiePointColor

Not Applicable		 Property: tiePointColor

<SparklineComponent id='sparkline' tiePointColor='green'></SparklineComponent >,

document.getElementById('sparkline');

Axis customization

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

var axisLineSettings = { visible : true};
<EJ.Sparkline id="sparkline" axisLineSttings={axisLineSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: axisSettings.lineSettings.visible

<SparklineComponent id='sparkline' axisSettings=} lineSettings:{ visible: true } }></SparklineComponent >,

document.getElementById('sparkline');
Line color Property: axisSettings.color

var axisLineSettings = { color : "red"};
<EJ.Sparkline id="sparkline" axisLineSttings={axisLineSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: axisSettings.lineSettings.color

<SparklineComponent id='sparkline' axisSettings=} lineSettings:{ color: 'green' } }></SparklineComponent >,

document.getElementById('sparkline');
Line width Property: axisSettings.width

var axisLineSettings = { width : 2};
<EJ.Sparkline id="sparkline" axisLineSttings={axisLineSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: axisSettings.lineSettings.width

<SparklineComponent id='sparkline' axisSettings=} lineSettings:{ width: 2 } }></SparklineComponent >,

document.getElementById('sparkline');
Dash array Property: axisSettings.dashArray

var axisLineSettings = { dashArray : 1,2};
<EJ.Sparkline id="sparkline" axisLineSttings={axisLineSettings}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: axisSettings.lineSettings.dashArray

<SparklineComponent id='sparkline' axisSettings=} lineSettings:{ dashArray: 1,2 } }></SparklineComponent >,

document.getElementById('sparkline');
X axis minimum value Not applicable Property: axisSettings.minX

<SparklineComponent id='sparkline' axisSettings=} minX: 2 }></SparklineComponent >,

document.getElementById('sparkline');
X axis maximum value Not applicable Property: axisSettings.maxX

<SparklineComponent id='sparkline' axisSettings=} maxX:10 }></SparklineComponent >,

document.getElementById('sparkline');
Y axis minimum value Not applicable Property: axisSettings.minY

<SparklineComponent id='sparkline' axisSettings={ {minY: 5 }></SparklineComponent >,

document.getElementById('sparkline');
Y axis maximum value Not applicable Property: axisSettings.maxY

<SparklineComponent id='sparkline' axisSettings=} maxY: 10 }></SparklineComponent >,

document.getElementById('sparkline');
Horizontal axis line position Not applicable Property: axisSettings.value

<SparklineComponent id='sparkline' axisSettings=} value: 10 }></SparklineComponent >,

document.getElementById('sparkline');

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>, document.getElementById('sparkline') 		Property: containerArea.background

<SparklineComponent id='sparkline' background='grey'></SparklineComponent >,

document.getElementById('sparkline');
Border color Not applicable Property: containerArea.border.color

<SparklineComponent id='sparkline' containerArea=} border: {color:'green'} }></SparklineComponent >,

document.getElementById('sparkline');
Border width Not applicable Property: containerArea.border.width

<SparklineComponent id='sparkline' containerArea=} border: {width:2} }></SparklineComponent >,

document.getElementById('sparkline');
Series color Property: fill

<EJ.Sparkline id="sparkline" fill="green"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: fill

<SparklineComponent id='sparkline' fill='grey'></SparklineComponent >,

document.getElementById('sparkline');
Series opacity Property: opacity

<EJ.Sparkline id="sparkline" opacity={0.5}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: opacity

<SparklineComponent id='sparkline' opacity={0.5}></SparklineComponent >,

document.getElementById('sparkline');
Line series width Property: width

<EJ.Sparkline id="sparkline" width={2}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: lineWidth

<SparklineComponent id='sparkline' lineWidth={ 2 }></SparklineComponent >,

document.getElementById('sparkline');
Series border color Property: border.color

var border = {color:"green"};
<EJ.Sparkline id="sparkline" border={border}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: border.color

<SparklineComponent id='sparkline' border: }color:'green'} }></SparklineComponent >,

document.getElementById('sparkline');
Series border width Property: border.width

var border = {width:2};
<EJ.Sparkline id="sparkline" border={border}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: border.width

<SparklineComponent id='sparkline' border= }width:2} }></SparklineComponent >,

document.getElementById('sparkline');
Series palette Property: palette

<EJ.Sparkline id="sparkline" palettes={palettes}> </EJ.Sparkline>, document.getElementById('sparkline')

var palettes = { "red", "green", "orange", "blue" }; 		Property: palette

<SparklineComponent id='sparkline' palette=''></SparklineComponent >,

document.getElementById('sparkline');
Theme Property: theme

<EJ.Sparkline id="sparkline" theme="flatdark"> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: theme

<SparklineComponent id='sparkline' theme='flatdark'></SparklineComponent >,

document.getElementById('sparkline');
Width Property: size.width

var size = { width:200};
<EJ.Sparkline id="sparkline" size={size}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: width

<SparklineComponent id='sparkline' size=} width: '300px' }></SparklineComponent >,

document.getElementById('sparkline');
Height Property: size.height

var size = { height:200};
<EJ.Sparkline id="sparkline" size={size}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: height

<SparklineComponent id='sparkline' size=} height:'300px' }></SparklineComponent >, document.getElementById('sparkline');

Tooltip

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

var tooltip = { visible:true};
<EJ.Sparkline id="sparkline" tooltip={tooltip}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: tooltipSettings.visible

<SparklineComponent id='sparkline' tooltipSettings=} visible:true }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Background Property: tooltip.fill

var tooltip = { fill:"green"};
<EJ.Sparkline id="sparkline" tooltip={tooltip}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: tooltipSettings.fill

<SparklineComponent id='sparkline' tooltipSettings=} fill:'green' }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Format Not applicable Property: tooltipSettings.format

<SparklineComponent id='sparkline' tooltipSettings=} format:'${x} : ${yval}' }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Template Property: tooltip.template

var tooltip = { template:'item'};
<EJ.Sparkline id="sparkline" tooltip={tooltip}> </EJ.Sparkline>, document.getElementById('sparkline')
<div id="item"> //.. </div>
Property: tooltipSettings.template

<SparklineComponent id='sparkline' tooltipSettings=} template:'<div> //... </div>' }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Font color Property: tooltip.font.color

var tooltip = { font:{ color:"green"};
<EJ.Sparkline id="sparkline" tooltip={tooltip}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: tooltipSettings.textStyle.color

<SparklineComponent id='sparkline' tooltipSettings=} textStyle:{color:'green'} }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Font opacity Property: tooltip.font.opacity

var tooltip = { font:{ opacity:0.5};
<EJ.Sparkline id="sparkline" tooltip={tooltip}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: tooltipSettings.textStyle.opacity

<SparklineComponent id='sparkline' tooltipSettings=} textStyle:{opacity:0.5} }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Font size Property: tooltip.font.size

var tooltip = { font:{ size:"10px"};
<EJ.Sparkline id="sparkline" tooltip={tooltip}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: tooltipSettings.textStyle.size

<SparklineComponent id='sparkline' tooltipSettings=} textStyle:{size:'12px'} }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Font family Property: tooltip.font.fontFamily

var tooltip = { font:{ fontFamily:"Arial"};
<EJ.Sparkline id="sparkline" tooltip={tooltip}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: tooltipSettings.textStyle.fontFamily

<SparklineComponent id='sparkline' tooltipSettings=} textStyle:{fontFamily:'Arial'} }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Font style Property: tooltip.font.fontStyle

var tooltip = { font:{ fontStyle:"Normal"};
<EJ.Sparkline id="sparkline" tooltip={tooltip}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: tooltipSettings.textStyle.fontStyle

<SparklineComponent id='sparkline' tooltipSettings=} textStyle:{fontStyle:'Normal'} }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Font weight Property: tooltip.font.fontWeight

var tooltip = { font:{ fontWeight:"Bold"};
<EJ.Sparkline id="sparkline" tooltip={tooltip}> </EJ.Sparkline>, document.getElementById('sparkline') 		Property: tooltipSettings.textStyle.fontWeight

<SparklineComponent id='sparkline' tooltipSettings=} textStyle:{fontWeight:'Bold'} }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 
Enable track line Not applicable Property: tooltipSettings.trackLineSettings.visible

<SparklineComponent id='sparkline' size=} height:'300px' }></SparklineComponent >,

document.getElementById('sparkline'); 		<SparklineComponent id='sparkline' tooltipSettings=} trackLineSettings:{visible:true} }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline');
Track line width Not applicable Property: tooltipSettings.trackLineSettings.width

<SparklineComponent id='sparkline' tooltipSettings=} trackLineSettings:{width:2} }> <Inject services={[SparklineTooltip]} /> </SparklineComponent >,

document.getElementById('sparkline'); 		 

Rendering

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

<EJ.Sparkline id="sparkline" enableCanvasRendering={true}> </EJ.Sparkline>, document.getElementById('sparkline') 		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>, document.getElementById('sparkline') 		Property: type

<SparklineComponent id='sparkline' locale='en-US'> </SparklineComponent >,

document.getElementById('sparkline');

Methods

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

<EJ.Sparkline id="sparkline"> </EJ.Sparkline>, document.getElementById('sparkline')
function sparkMethod() { var sparObj = $("#sparkline").data("ejSparkline"); sparkObj.redraw(); } 		Method: refresh

export class Spark extends SampleBase<{}, {}> {
private sparkInstance: SparklineComponent;
private change(): void{
this.sparkInstance.refresh();
}

Events

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

<EJ.Sparkline id="sparkline" load={load}></EJ.Sparkline>,
document.getElementById('maps')
function load(args) {} 		Event: load

<SparklineComponent id='sparkline' load={this.load.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public load(args: ILoadEventArgs): void {}
Load completed Event: loaded

<EJ.Sparkline id="sparkline" loaded={loaded}></EJ.Sparkline>,
document.getElementById('maps')
function loaded(args) {} 		Event: loaded

<SparklineComponent id='sparkline' loaded={this.loaded.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public loaded(args: ILoadedEventArgs): void {}
Initialize tooltip Event: tooltipInitialize

<EJ.Sparkline id="sparkline" tooltipInitialize={tooltipInitialize}></EJ.Sparkline>,
document.getElementById('maps')
function tooltipInitialize(args) {} 		Event: tooltipInitialize

<SparklineComponent id='sparkline' tooltipInitialize={this.tooltipInitialize.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public tooltipInitialize(args: ITooltipInitializeEventArgs): void {}
Series rendering Event: seriesRendering

<EJ.Sparkline id="sparkline" seriesRendering={seriesRendering}></EJ.Sparkline>,
document.getElementById('maps')
function seriesRendering(args) {} 		Event: seriesRendering

<SparklineComponent id='sparkline' seriesRendering={this.seriesRendering.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public seriesRendering(args: ISeriesRenderingEventArgs): void {}
Region mouse move Event: pointRegionMouseMove

<EJ.Sparkline id="sparkline" pointRegionMouseMove={pointRegionMouseMove}></EJ.Sparkline>,
document.getElementById('maps')
function pointRegionMouseMove(args) {} 		Event: pointRegionMouseMove

<SparklineComponent id='sparkline' pointRegionMouseMove={this.pointRegionMouseMove.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public pointRegionMouseMove(args: IPointRegionMouseMoveEventArgs): void {}
Region click Event: pointRegionMouseClick

<EJ.Sparkline id="sparkline" pointRegionMouseClick={pointRegionMouseClick}></EJ.Sparkline>,
document.getElementById('maps')
function pointRegionMouseClick(args) {} 		Event: pointRegionMouseClick

<SparklineComponent id='sparkline' pointRegionMouseClick={this.pointRegionMouseClick.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public pointRegionMouseClick(args: IPointRegionMouseClickEventArgs): void {}
Mouse move Event: sparklineMouseMove

<EJ.Sparkline id="sparkline" sparklineMouseMove={sparklineMouseMove}></EJ.Sparkline>,
document.getElementById('maps')
function sparklineMouseMove(args) {} 		Event: sparklineMouseMove

<SparklineComponent id='sparkline' sparklineMouseMove={this.sparklineMouseMove.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public sparklineMouseMove(args: ISparklineMouseMoveEventArgs): void {}
Mouse leave Event: sparklineMouseLeave

<EJ.Sparkline id="sparkline" sparklineMouseLeave={sparklineMouseLeave}></EJ.Sparkline>,
document.getElementById('maps')
function sparklineMouseLeave(args) {} 		Not applicable
Click Event: click

<EJ.Sparkline id="sparkline" click={click}></EJ.Sparkline>,
document.getElementById('maps')
function click(args) {} 		Event: sparklineMouseClick

<SparklineComponent id='sparkline' sparklineMouseClick={this.sparklineMouseClick.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public sparklineMouseClick(args: ISparklineMouseClickEventArgs): void {}
doubleClick Event: doubleClick

<EJ.Sparkline id="sparkline" doubleClick={doubleClick}></EJ.Sparkline>,
document.getElementById('maps')
function doubleClick(args) {} 		Not applicable
rightClick Event: rightClick

<EJ.Sparkline id="sparkline" rightClick={rightClick}></EJ.Sparkline>,
document.getElementById('maps')
function rightClick(args) {} 		Not applicable
axisRendering Not applicable Event: axisRendering

<SparklineComponent id='sparkline' axisRendering={this.axisRendering.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public axisRendering(args: IAxisRenderingEventArgs): void {}
dataLabelRendering Not applicable Event: dataLabelRendering

<SparklineComponent id='sparkline' dataLabelRendering={this.dataLabelRendering.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public dataLabelRendering(args: IDataLabelRenderingEventArgs): void {}
markerRendering Not applicable Event: markerRendering

<SparklineComponent id='sparkline' markerRendering={this.markerRendering.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public markerRendering(args: IMarkerRenderingEventArgs): void {}
pointRendering Not applicable Event: pointRendering

<SparklineComponent id='sparkline' pointRendering={this.pointRendering.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public pointRendering(args: IPointRenderingEventArgs): void {}
resize Not applicable Event: resize

<SparklineComponent id='sparkline' resize={this.resize.bind(this)}></SparklineComponent>,
document.getElementById('sparkline');
public resize(args: IResizeEventArgs): void {}