Ej1 api migration in React Sparkline component
20 Jan 202321 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.visiblevar 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.fillvar 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.widthvar 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.opacityvar 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.colorvar 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.widthvar 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.opacityvar 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.colorvar 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.opacityvar 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.startRangevar 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.endRangevar 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.visiblevar 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.colorvar 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.widthvar 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.dashArrayvar 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.colorvar 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.widthvar 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.widthvar 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.heightvar 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.visiblevar 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.fillvar 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.templatevar 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.colorvar 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.opacityvar 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.sizevar 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.fontFamilyvar 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.fontStylevar 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.fontWeightvar 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: refreshexport 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 {}
|