Ej1 api migration in EJ2 TypeScript Sparkline control

7 May 202524 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

$(“#container”).ejSparkline({ type : ‘line’ });		 Property: type

let sparkline: Sparkline = new Sparkline({
  type: ‘Line’
});
sparkline.appendTo(‘#container’);

Databinding

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

$(“#container”).ejSparkline({ dataSource : ‘data’ });		 Property: dataSource

let sparkline: Sparkline = new Sparkline({
  dataSource: data
});
sparkline.appendTo(‘#container’);
Binding X values with datasource Property: xName

$(“#container”).ejSparkline({ xName : “XValue” });		 Property: xName

let sparkline: Sparkline = new Sparkline({
  xName: ‘XValue’
});
sparkline.appendTo(‘#container’);
Binding Y values with datasource Property: yName

$(“#container”).ejSparkline({ yName : “YValue” });		 Property: yName

let sparkline: Sparkline = new Sparkline({
  yName: ‘YValue’
});
sparkline.appendTo(‘#container’);

Markers

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

$(“#container”).ejSparkline({
  markerSettings :{ visible : true }
});		 Property: markerSettings.visible

let sparkline: Sparkline = new Sparkline({
  markerSettings: {
    visible: [‘All’]
  }
});
sparkline.appendTo(‘#container’);
Color Property: markerSettings.fill

$(“#container”).ejSparkline({
  markerSettings :{ fill : “green” }
});		 Property: markerSettings.fill

let sparkline: Sparkline = new Sparkline({
  markerSettings: {
    fill: “green”
  }
});
sparkline.appendTo(‘#container’);
Size Property: markerSettings.width

$(“#container”).ejSparkline({
  markerSettings :{ width : 5 }
});		 Property: markerSettings.size

let sparkline: Sparkline = new Sparkline({
  markerSettings: {
    size: 5
  }
});
sparkline.appendTo(‘#container’);
Opacity Property: markerSettings.opacity

$(“#container”).ejSparkline({
  markerSettings :{ opacity : 0.5 }
});		 Property: markerSettings.opacity

let sparkline: Sparkline = new Sparkline({
  markerSettings: {
    opacity: 0.5
  }
});
sparkline.appendTo(‘#container’);
Border color Property: markerSettings.border.color

$(“#container”).ejSparkline({
  markerSettings :{
    border: { color: “green” } }
});		 Property: markerSettings.border.fill

let sparkline: Sparkline = new Sparkline({
  markerSettings: {
    border: { fill: ‘green’ }
  }
});
sparkline.appendTo(‘#container’);
Border width Property: markerSettings.border.width

$(“#container”).ejSparkline({
  markerSettings :{
    border: { width: 2 } }
});		 Property: markerSettings.border.width

let sparkline: Sparkline = new Sparkline({
  markerSettings: {
    border: { width: 2 }
  }
});
sparkline.appendTo(‘#container’);
Border opacity Property: markerSettings.border.opacity

$(“#container”).ejSparkline({
  markerSettings :{
    border: { opacity: 0.7 } }
});		 Not applicable

Data labels

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

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    visible: [‘All’]
  }
});
sparkline.appendTo(‘#container’);
Color Not applicable Property: dataLabelSettings.fill

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    fill: “green”
  }
});
sparkline.appendTo(‘#container’);
Size Not applicable Property: dataLabelSettings.size

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    size: 5
  }
});
sparkline.appendTo(‘#container’);
Opacity Not applicable Property: dataLabelSettings.opacity

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    opacity: 0.5
  }
});
sparkline.appendTo(‘#container’);
Border color Not applicable Property: dataLabelSettings.border.fill

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    border: { fill: ‘green’ }
  }
});
sparkline.appendTo(‘#container’);
Border width Not applicable Property: dataLabelSettings.border.width

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    border: { width: 2 }
  }
});
sparkline.appendTo(‘#container’);
Format Not applicable Property: dataLabelSettings.format

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    format: ‘${xval}: ${yval}’
  }
});
sparkline.appendTo(‘#container’);
Horizontal Offset Not applicable Property: dataLabelSettings.offset.x

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    offset: { x: 10 }
  }
});
sparkline.appendTo(‘#container’);
Vertical Offset Not applicable Property: dataLabelSettings.offset.y

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    offset: { y: 10 }
  }
});
sparkline.appendTo(‘#container’);
Font color Not applicable Property: dataLabelSettings.textStyle.color

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    textStyle: { color: ‘black’ }
  }
});
sparkline.appendTo(‘#container’);
Font family Not applicable Property: dataLabelSettings.textStyle.fontFamily

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    textStyle: { fontFamily: ‘Arial’ }
  }
});
sparkline.appendTo(‘#container’);
Font style Not applicable Property: dataLabelSettings.textStyle.fontStyle

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    textStyle: { fontStyle: ‘normal’ }
  }
});
sparkline.appendTo(‘#container’);
Font weight Not applicable Property: dataLabelSettings.textStyle.fontWeight

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    textStyle: { fontWeight: ‘bold’ }
  }
});
sparkline.appendTo(‘#container’);
Font opacity Not applicable Property: dataLabelSettings.textStyle.opacity

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    textStyle: { opacity: 0.7 }
  }
});
sparkline.appendTo(‘#container’);
Font size Not applicable Property: dataLabelSettings.textStyle.fontSize

let sparkline: Sparkline = new Sparkline({
  dataLabelSettings: {
    textStyle: { fontSize: ‘12px’ }
  }
});
sparkline.appendTo(‘#container’);

Range band

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

$(“#container”).ejSparkline({
  rangeBandSettings :{ fill : “green” }
});		 Property: rangeBandSettings.fill

let sparkline: Sparkline = new Sparkline({
  rangeBandSettings: {
    fill: “green”
  }
});
sparkline.appendTo(‘#container’);
Opacity Property: rangeBandSettings.opacity

$(“#container”).ejSparkline({
  rangeBandSettings :{ opacity : 0.5 }
});		 Property: rangeBandSettings.opacity

let sparkline: Sparkline = new Sparkline({
  rangeBandSettings: {
    opacity: 0.5
  }
});
sparkline.appendTo(‘#container’);
Start range Property: rangeBandSettings.startRange

$(“#container”).ejSparkline({
  rangeBandSettings :{
    startRange: 5
 }
});		 Property: rangeBandSettings.startRange

let sparkline: Sparkline = new Sparkline({
  rangeBandSettings: {
    startRange: 5
  }
});
sparkline.appendTo(‘#container’);
End range Property: rangeBandSettings.endRange

$(“#container”).ejSparkline({
  rangeBandSettings :{
    endRange: 10
 }
});		 Property: rangeBandSettings.endRange

let sparkline: Sparkline = new Sparkline({
  rangeBandSettings: {
    endRange: 10
  }
});
sparkline.appendTo(‘#container’);

Special points customization

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

$(“#container”).ejSparkline({ highPointColor: ‘green’ });		 Property: highPointColor

let sparkline: Sparkline = new Sparkline({ highPointColor: ‘green’ });
sparkline.appendTo(‘#container’);
Low point color Property: lowPointColor

$(“#container”).ejSparkline({ lowPointColor: ‘red’ });		 Property: lowPointColor

let sparkline: Sparkline = new Sparkline({ lowPointColor: ‘red’ });
sparkline.appendTo(‘#container’);
Negative point color Property: negativePointColor

$(“#container”).ejSparkline({ negativePointColor: ‘orange’ });		 Property: negativePointColor

let sparkline: Sparkline = new Sparkline({ negativePointColor: ‘orange’ });
sparkline.appendTo(‘#container’);
Start point color Property: startPointColor

$(“#container”).ejSparkline({ startPointColor: ‘orange’ });		 Property: startPointColor

let sparkline: Sparkline = new Sparkline({ startPointColor: ‘orange’ });
sparkline.appendTo(‘#container’);
End point color Property: endPointColor

$(“#container”).ejSparkline({ endPointColor: ‘orange’ });		 Property: endPointColor

let sparkline: Sparkline = new Sparkline({ endPointColor: ‘orange’ });
sparkline.appendTo(‘#container’);
Tie point color Property: tiePointColor

$(“#container”).ejSparkline({ tiePointColor: ‘orange’ });		 Property: tiePointColor

let sparkline: Sparkline = new Sparkline({ tiePointColor: ‘orange’ });
sparkline.appendTo(‘#container’);

Axis customization

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

$(“#container”).ejSparkline({
  axisSettings :{
    visible: true
 }
});		 Property: axisSettings.lineSettings.visible

let sparkline: Sparkline = new Sparkline({
  axisSettings: {
    lineSettings: { visible: true }
  }
});
sparkline.appendTo(‘#container’);
Line color Property: axisSettings.color

$(“#container”).ejSparkline({
  axisSettings :{
    color: “green”
 }
});		 Property: axisSettings.lineSettings.color

let sparkline: Sparkline = new Sparkline({
  axisSettings: {
    lineSettings: { color: “green” }
  }
});
sparkline.appendTo(‘#container’);
Line width Property: axisSettings.width

$(“#container”).ejSparkline({
  axisSettings :{
    width: 2
 }
});		 Property: axisSettings.lineSettings.width

let sparkline: Sparkline = new Sparkline({
  axisSettings: {
    lineSettings: { width: 2 }
  }
});
sparkline.appendTo(‘#container’);
Dash array Property: axisSettings.dashArray

$(“#container”).ejSparkline({
  axisSettings :{
    dashArray: [5, 2]
 }
});		 Property: axisSettings.lineSettings.dashArray

let sparkline: Sparkline = new Sparkline({
  axisSettings: {
    lineSettings: { dashArray: [5, 2] }
  }
});
sparkline.appendTo(‘#container’);
X axis minimum value Not applicable Property: axisSettings.minX

let sparkline: Sparkline = new Sparkline({
  axisSettings: {
    minX: 0
  }
});
sparkline.appendTo(‘#container’);
X axis maximum value Not applicable Property: axisSettings.maxX

let sparkline: Sparkline = new Sparkline({
  axisSettings: {
    maxX: 100
  }
});
sparkline.appendTo(‘#container’);
Y axis minimum value Not applicable Property: axisSettings.minY

let sparkline: Sparkline = new Sparkline({
  axisSettings: {
    minY: 0
  }
});
sparkline.appendTo(‘#container’);
Y axis maximum value Not applicable Property: axisSettings.maxY

let sparkline: Sparkline = new Sparkline({
  axisSettings: {
    maxY: 0
  }
});
sparkline.appendTo(‘#container’);
Horizontal axis line position Not applicable Property: axisSettings.value

let sparkline: Sparkline = new Sparkline({
  axisSettings: {
    value: 10
  }
});
sparkline.appendTo(‘#container’);

Appearance customization

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

$(“#container”).ejSparkline({ background: “gray” });		 Property: containerArea.background

let sparkline: Sparkline = new Sparkline({
  containerArea: { background: “gray” }
});
sparkline.appendTo(‘#container’);
Border color Not applicable Property: containerArea.border.color

let sparkline: Sparkline = new Sparkline({
  containerArea: {
    border: { color: “green” }
  }
});
sparkline.appendTo(‘#container’);
Border width Not applicable Property: containerArea.border.width

let sparkline: Sparkline = new Sparkline({
  containerArea: {
    border: { width: 2 }
  }
});
sparkline.appendTo(‘#container’);
Series color Property: fill

$(“#container”).ejSparkline({ fill: “green” });		 Property: fill

let sparkline: Sparkline = new Sparkline({ fill : “green” });
sparkline.appendTo(‘#container’);
Series opacity Property: opacity

$(“#container”).ejSparkline({ opacity: 0.5 });		 Property: opacity

let sparkline: Sparkline = new Sparkline({ opacity : 0.5 });
sparkline.appendTo(‘#container’);
Line series width Property: width

$(“#container”).ejSparkline({ width: 3 });		 Property: lineWidth

let sparkline: Sparkline = new Sparkline({ lineWidth : 3 });
sparkline.appendTo(‘#container’);
Series border color Property: border.color

$(“#container”).ejSparkline({ border: { color: “green” } });		 Property: border.color

let sparkline: Sparkline = new Sparkline({ border: { color: “green” } });
sparkline.appendTo(‘#container’);
Series border width Property: border.width

$(“#container”).ejSparkline({ border: { width: 2 } });		 Property: border.width

let sparkline: Sparkline = new Sparkline({ border: { width: 2 } });
sparkline.appendTo(‘#container’);
Series palette Property: palette

$(“#container”).ejSparkline({ palette: “colorFieldNameInDatasource” });		 Property: palette

let sparkline: Sparkline = new Sparkline({ palette : [“green”, “red”, “yellow”] });
sparkline.appendTo(‘#container’);
Theme Property: theme

$(“#container”).ejSparkline({ theme: “Azure” });		 Property: theme

let sparkline: Sparkline = new Sparkline({ theme : “Material” });
sparkline.appendTo(‘#container’);
Width Property: size.width

$(“#container”).ejSparkline({ size: { width: “100%” } });		 Property: width

let sparkline: Sparkline = new Sparkline({ width : “100%” });
sparkline.appendTo(‘#container’);
Height Property: size.height

$(“#container”).ejSparkline({ size: { height: “200px” } });		 Property: height

let sparkline: Sparkline = new Sparkline({ height : “200px” });
sparkline.appendTo(‘#container’);

Tooltip

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

$(“#container”).ejSparkline({
  tooltip: { visible: true }
});		 Property: tooltipSettings.visible

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: { visible: true }
});
sparkline.appendTo(‘#container’);
Background Property: tooltip.fill

$(“#container”).ejSparkline({
  tooltip: { fill: “white” }
});		 Property: tooltipSettings.fill

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: { fill: “white” }
});
sparkline.appendTo(‘#container’);
Format Not applicable Property: tooltipSettings.format

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: { format: “${xval}: ${yval}” }
});
sparkline.appendTo(‘#container’);
Template Property: tooltip.template

$(“#container”).ejSparkline({
  tooltip: { template: “tooltip” }
});		 Property: tooltipSettings.template

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: { template: “tooltip” }
});
sparkline.appendTo(‘#container’);
Font color Property: tooltip.font.color

$(“#container”).ejSparkline({
  tooltip: {
   font: { color: “gray” }
  }
});		 Property: tooltipSettings.textStyle.color

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: {
   textStyle: { color: “gray” }
  }
});
sparkline.appendTo(‘#container’);
Font opacity Property: tooltip.font.opacity

$(“#container”).ejSparkline({
  tooltip: {
   font: { opacity: 0.8 }
  }
});		 Property: tooltipSettings.textStyle.opacity

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: {
   textStyle: { opacity: 0.8 }
  }
});
sparkline.appendTo(‘#container’);
Font size Property: tooltip.font.size

$(“#container”).ejSparkline({
  tooltip: {
   font: { size: “14px” }
  }
});		 Property: tooltipSettings.textStyle.size

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: {
   textStyle: { size: “14px” }
  }
});
sparkline.appendTo(‘#container’);
Font family Property: tooltip.font.fontFamily

$(“#container”).ejSparkline({
  tooltip: {
   font: { fontFamily: “Arial” }
  }
});		 Property: tooltipSettings.textStyle.fontFamily

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: {
   textStyle: { fontFamily: “Arial” }
  }
});
sparkline.appendTo(‘#container’);
Font style Property: tooltip.font.fontStyle

$(“#container”).ejSparkline({
  tooltip: {
   font: { fontStyle: “normal” }
  }
});		 Property: tooltipSettings.textStyle.fontStyle

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: {
   textStyle: { fontStyle: “normal” }
  }
});
sparkline.appendTo(‘#container’);
Font weight Property: tooltip.font.fontWeight

$(“#container”).ejSparkline({
  tooltip: {
   font: { fontWeight: “bold” }
  }
});		 Property: tooltipSettings.textStyle.fontWeight

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: {
   textStyle: { fontWeight: “bold” }
  }
});
sparkline.appendTo(‘#container’);
Enable track line Not applicable Property: tooltipSettings.trackLineSettings.visible

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: {
   trackLineSettings: { visible: true }
  }
});
sparkline.appendTo(‘#container’);
Track line color Not applicable Property: tooltipSettings.trackLineSettings.color

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: {
   trackLineSettings: { color: “red” }
  }
});
sparkline.appendTo(‘#container’);
Track line width Not applicable Property: tooltipSettings.trackLineSettings.width

let sparkline: Sparkline = new Sparkline({
  tooltipSettings: {
   trackLineSettings: { width: 2 }
  }
});
sparkline.appendTo(‘#container’);

Rendering

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

$(“#container”).ejSparkline({ enableCanvasRendering : true });		 Not applicable

Localization

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

$(“#container”).ejSparkline({ locale : “en-US” });		 Property: type

let sparkline: Sparkline = new Sparkline({ locale: ‘en-US’ });
sparkline.appendTo(‘#container’);

Methods

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

$(“#container”).ejSparkline(“redraw”}});		 Method: refresh

sparkline.refresh();
Append sparkline to element Not applicable Method: appendTo

sparkline.appendTo(“#container”);

Events

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

$(“#container”).ejSparkline({
 load: function(args) { }
});		 Event: load

let sparkline: Sparkline = new Sparkline({
  load: function(e: ISparklineLoadEventArgs): void { }
});
sparkline.appendTo(‘#container’);
Load completed Event: loaded

$(“#container”).ejSparkline({
 loaded: function(args) { }
});		 Event: loaded

let sparkline: Sparkline = new Sparkline({
  loaded: function(e: ISparklineLoadedEventArgs): void { }
});
sparkline.appendTo(‘#container’);
Initialize tooltip Event: tooltipInitialize

$(“#container”).ejSparkline({
 tooltipInitialize: function(args) { }
});		 Event: tooltipInitialize

let sparkline: Sparkline = new Sparkline({
  tooltipInitialize: function(e: ITooltipRenderingEventArgs): void { }
});
sparkline.appendTo(‘#container’);
Series rendering Event: seriesRendering

$(“#container”).ejSparkline({
 seriesRendering: function(args) { }
});		 Event: seriesRendering

let sparkline: Sparkline = new Sparkline({
  seriesRendering: function(e: ISeriesRenderingEventArgs): void { }
});
sparkline.appendTo(‘#container’);
Region mouse move Event: pointRegionMouseMove

$(“#container”).ejSparkline({
 pointRegionMouseMove: function(args) { }
});		 Event: pointRegionMouseMove

let sparkline: Sparkline = new Sparkline({
  pointRegionMouseMove: function(e: IPointRegionEventArgs): void { }
});
sparkline.appendTo(‘#container’);
Region click Event: pointRegionMouseClick

$(“#container”).ejSparkline({
 pointRegionMouseClick: function(args) { }
});		 Event: pointRegionMouseClick

let sparkline: Sparkline = new Sparkline({
  pointRegionMouseClick: function(e: IPointRegionEventArgs): void { }
});
sparkline.appendTo(‘#container’);
Mouse move Event: sparklineMouseMove

$(“#container”).ejSparkline({
 sparklineMouseMove: function(args) { }
});		 Event: sparklineMouseMove

let sparkline: Sparkline = new Sparkline({
  sparklineMouseMove: function(e: ISparklineMouseEventArgs): void { }
});
sparkline.appendTo(‘#container’);
Mouse leave Event: sparklineMouseLeave

$(“#container”).ejSparkline({
 sparklineMouseLeave: function(args) { }
});		 Not applicable
Click Event: click

$(“#container”).ejSparkline({
 click: function(args) { }
});		 Event: sparklineMouseClick

let sparkline: Sparkline = new Sparkline({
  sparklineMouseClick: function(e: ISparklineMouseEventArgs): void { }
});
sparkline.appendTo(‘#container’);
doubleClick Event: doubleClick

$(“#container”).ejSparkline({
 doubleClick: function(args) { }
});		 Not applicable
rightClick Event: rightClick

$(“#container”).ejSparkline({
 rightClick: function(args) { }
});		 Not applicable
axisRendering Not applicable Event: axisRendering

let sparkline: Sparkline = new Sparkline({
  axisRendering: function(e: IAxisRenderingEventArgs): void { }
});
sparkline.appendTo(‘#container’);
dataLabelRendering Not applicable Event: dataLabelRendering

let sparkline: Sparkline = new Sparkline({
  dataLabelRendering: function(e: IDataLabelRenderingEventArgs): void { }
});
sparkline.appendTo(‘#container’);
markerRendering Not applicable Event: markerRendering

let sparkline: Sparkline = new Sparkline({
  markerRendering: function(e: IMarkerRenderingEventArgs): void { }
});
sparkline.appendTo(‘#container’);
pointRendering Not applicable Event: pointRendering

let sparkline: Sparkline = new Sparkline({
  pointRendering: function(e: ISparklinePointEventArgs): void { }
});
sparkline.appendTo(‘#container’);
resize Not applicable Event: resize

let sparkline: Sparkline = new Sparkline({
  resize: function(e: ISparklineResizeEventArgs): void { }
});
sparkline.appendTo(‘#container’);