Search results

Migration from Essential JS 1

This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.

Accumulation Chart

Behaviour API in Essential JS 1 API in Essential JS 2
annotations Property:annotations

$("#chart").ejChart({ annotations: [{}]; });
Property:annotations

let pie: AccumulationChart = new AccumulationChart({ annotations: [{ }]; }); pie.appendTo('#chart');
background Property:background

$("#chart").ejChart({ background: '#DDCCEE' });
Property:background

let pie: AccumulationChart = new AccumulationChart({ background: 'DDCCEE' }); pie.appendTo('#chart');
border Property:border

$("#chart").ejChart({ border: { color: 'red' , width: 2, opacity: 0.5} });
Property:border

let pie: AccumulationChart = new AccumulationChart({ border: { color: 'red', width: 2} }); pie.appendTo('#chart');
dataSource Not applicable Property:border

let pie: AccumulationChart = new AccumulationChart({ dataSource: [ ]; }); pie.appendTo('#chart');
Animation after legend click Not applicable Property:enableAnimation

let pie: AccumulationChart = new AccumulationChart({ enableAnimation: true }); pie.appendTo('#chart');
Persisting component's state between page reloads. Not applicable Property:enablePersistance

let pie: AccumulationChart = new AccumulationChart({ enablePersistance: true }); pie.appendTo('#chart');
Enabling smart labels Property:series.enableSmartLabels

$("#chart").ejChart({ series: [ { enableSmartLabels: true}] });
Property:enableSmartLabels

let pie: AccumulationChart = new AccumulationChart({ enableSmartLabels: true }); pie.appendTo('#chart');
Height of Chart Property:size.height

$("#chart").ejChart({ size: { height: '400' } });
Property:height

let pie: AccumulationChart = new AccumulationChart({ height: '400' }); pie.appendTo('#chart');
Multi selection Property:selectionSettings.type

$("#chart").ejChart({ selectionSettings: { type: 'multiple' } });
Property:isMultiSelect

let pie: AccumulationChart = new AccumulationChart({ isMultiSelect: true }); pie.appendTo('#chart');
legend Settings Property:legend

$("#chart").ejChart({ legend: { } });
Property:legendSettings

let pie: AccumulationChart = new AccumulationChart({ legendSettings: { } }); pie.appendTo('#chart');
Margin for the chart Property:margin

$("#chart").ejChart({ margin: { top: 20, bottom: 23, right: 15, left: 10 } });
Property:margin

let pie: AccumulationChart = new AccumulationChart({ margin: { top: 20, bottom: 23, right: 15, left: 10 } }); pie.appendTo('#chart');
SelectedDataIndexes Property:selectedDataPointIndexes

$("#chart").ejChart({ selectedDataPointIndexes : [{}] });
Property:selectedDataIndexes

let pie: AccumulationChart = new AccumulationChart({ selectedDataIndexes : [ { series: 0, point: 1}] }); pie.appendTo('#chart');
Selection Mode Property:selectionSettings.mode

$("#chart").ejChart({ selectionSettings: { mode: 'Point'} });
Property:selectionMode

let pie: AccumulationChart = new AccumulationChart({ selectionMode : 'Point' }); pie.appendTo('#chart');
Series Property:series

$("#chart").ejChart({ series: [] });
Property:series

let pie: AccumulationChart = new AccumulationChart({ series: [] }); pie.appendTo('#chart');
Title text Property:title.text

$("#chart").ejChart({ title: { text: 'Pie Chart' } });
Property:title

let pie: AccumulationChart = new AccumulationChart({ title: 'Pie Chart' }); pie.appendTo('#chart');
Title Styles Property:title

$("#chart").ejChart({ title: { text: 'Pie Chart' } });
Property:titleStyle

let pie: AccumulationChart = new AccumulationChart({ titleStyle: { fontFamily: 'SegoeUI'} }); pie.appendTo('#chart');
Sub Title text Property:subTitle.text

$("#chart").ejChart({ subTitle: { text: 'Pie Chart' } });
Property:subTitle

let pie: AccumulationChart = new AccumulationChart({ subTitle: 'Pie Chart' }); pie.appendTo('#chart');
Sub title Styles Property:title

$("#chart").ejChart({ title: { text: 'Pie Chart' } });
Property:subTitleStyle

let pie: AccumulationChart = new AccumulationChart({ subTitleStyle: { fontFamily: 'SegoeUI'} }); pie.appendTo('#chart');
tooltip Property:series.toolTip

$("#chart").ejChart({ series: [ { tooltip: { }}] });
Property:tooltip

let pie: AccumulationChart = new AccumulationChart({ tooltip: { } }); pie.appendTo('#chart');
Width of Chart Property:size.width

$("#chart").ejChart({ size: { width: '400' } });
Property:width

let pie: AccumulationChart = new AccumulationChart({ width: '400' }); pie.appendTo('#chart');

Annotation

Behaviour API in Essential JS 1 API in Essential JS 2
annotations Property:annotations

$("#chart").ejChart({ annotations: [{}]; });
Property:annotations

let pie: AccumulationChart = new AccumulationChart({ annotations: [{ }]; }); pie.appendTo('#chart');
content Property:annotations

$("#chart").ejChart({ annotations: [{content: '
Pie Chart
}]; });
Property:annotations

let pie: AccumulationChart = new AccumulationChart({ annotations: [{content: '
Pie Chart
'}]; }); pie.appendTo('#chart');
coordinateUnits Property:annotations

$("#chart").ejChart({ annotations: [{coordinateUnit: 'Pixel'}]; });
Property:annotations

let pie: AccumulationChart = new AccumulationChart({ annotations: [{coordinateUnit: 'Pixel'}]; }); pie.appendTo('#chart');
description Not Applicable Property:description

let pie: AccumulationChart = new AccumulationChart({ annotations: [{description: 'Pixel'}]; }); pie.appendTo('#chart');
horizontalAlignment for annotation Property:annotations.horizontalAlignment

$("#container").ejChart({ annotations :[{ horizontalAlignment :"middle"}] });
Property:annotations.horizontalAlignment

let chart: AccumulationChart = new AccumulationChart({ annotations: [{ horizontalAlignment: 'Center'}] }); chart.appendTo('#chart');
margin for annotation Property:annotations.margin

$("#container").ejChart({ annotations :[{ margin { right: 5, left: 5, top: 5, bottom: 5}}] });
Not applicable
Opacity for annotation Property:annotations.opacity

$("#container").ejChart({ annotations :[{ opacity: 0.4 }] });
Not applicable
Region for annotation with respect to chart or series Property:annotations.region

$("#container").ejChart({ annotations :[{ region :"chart"}] });
Property:annotations.region

let chart: AccumulationChart = new AccumulationChart({ annotations: [{ region: 'Chart'}] }); chart.appendTo('#chart');
verticalAlignment for annotation Property:annotations.verticalAlignment

$("#container").ejChart({ annotations :[{ verticalAlignment :"middle"}] });
Property:annotations.verticalAlignment

let chart: AccumulationChart = new AccumulationChart({ annotations: [{ verticalAlignment: 'Center'}] }); chart.appendTo('#chart');
Visibility of annotations Property:annotations.visible

$("#container").ejChart({ annotations :[{ visible: true }] });
Not applicable
X offset for annotation Property:annotations.x

$("#container").ejChart({ annotations :[{ x :"100"}] });
Property:annotations.x

let chart: AccumulationChart = new AccumulationChart({ annotations: [{ x: '100'}] }); chart.appendTo('#chart');
Y offset for annotation Property:annotations.y

$("#container").ejChart({ annotations :[{ y :"100"}] });
Property:annotations.y

let chart: AccumulationChart = new AccumulationChart({ annotations: [{ y: '100'}] }); chart.appendTo('#chart');

Series

Behaviour API in Essential JS 1 API in Essential JS 2
series Property:series

$("#chart").ejChart({ series: [{}]; });
Property:series

let pie: AccumulationChart = new AccumulationChart({ series: [{ }]; }); pie.appendTo('#chart');
animation for series Property:enableAnimation

$("#chart").ejChart({ series: [{ enableAnimation: true}]; });
Property:animation.enable

let pie: AccumulationChart = new AccumulationChart({ series: [{ animation: { enable: true }}]; }); pie.appendTo('#chart');
animation duration for series Property:animationDuration

$("#chart").ejChart({ series: [{ annimationDuration: 1000}]; });
Property:animation.duration

let pie: AccumulationChart = new AccumulationChart({ series: [{ animation: { duration: 1000 }}]; }); pie.appendTo('#chart');
animation delay for series Not Applicable Property:animation.duration

let pie: AccumulationChart = new AccumulationChart({ series: [{ animation: { delay: 100 }}]; }); pie.appendTo('#chart');
Border for series Property:border

$("#chart").ejChart({ series: [{ border: { color: 'pink', width: 2, dashArray: '10,4' }}]; });
Property:border

let pie: AccumulationChart = new AccumulationChart({ series: [{ border: { color: 'red', width: 2 }}]; }); pie.appendTo('#chart');
DataLabel for series Property:dataLabel

$("#chart").ejChart({ series: [{ dataLabel: {}}]; });
Property:border

let pie: AccumulationChart = new AccumulationChart({ series: [{ dataLabel: { }}]; }); pie.appendTo('#chart');
DataSource for series Property:dataSource

$("#chart").ejChart({ series: [{ dataSource: [{}] }]; });
Property:dataSource

let pie: AccumulationChart = new AccumulationChart({ series: [{ dataSource: [{ }]}]; }); pie.appendTo('#chart');
enableTooltip for series Property:tooltip.visible

$("#chart").ejChart({ series: [{ tooltip: { visible: true } }]; });
Property:enableTooltip

let pie: AccumulationChart = new AccumulationChart({ series: [{ enableTooltip: true }]; }); pie.appendTo('#chart');
start angle Property:startAngle

$("#chart").ejChart({ series: [{ startAngle: 80 }]; });
Property:startAngle

let pie: AccumulationChart = new AccumulationChart({ series: [{ startAngle: 90 }]; }); pie.appendTo('#chart');
end angle Property:endAngle

$("#chart").ejChart({ series: [{ endAngle: 80 }]; });
Property:endAngle

let pie: AccumulationChart = new AccumulationChart({ series: [{ endAngle: 90 }]; }); pie.appendTo('#chart');
explode Property:explode

$("#chart").ejChart({ series: [{ explode: true }]; });
Property:explode

let pie: AccumulationChart = new AccumulationChart({ series: [{ explode: true }]; }); pie.appendTo('#chart');
explodeAll Property:explodeAll

$("#chart").ejChart({ series: [{ explodeAll: true }]; });
Property:explodeAll

let pie: AccumulationChart = new AccumulationChart({ series: [{ explodeAll: true }]; }); pie.appendTo('#chart');
explodeIndex Property:explode

$("#chart").ejChart({ series: [{ explodeIndex: 0 }]; });
Property:explodeIndex

let pie: AccumulationChart = new AccumulationChart({ series: [{ explodeIndex: 1 }]; }); pie.appendTo('#chart');
explodeOffset Property:explodeOffset

$("#chart").ejChart({ series: [{ explodeOffset: '30%' }]; });
Property:explodeOffset

let pie: AccumulationChart = new AccumulationChart({ series: [{ explodeOffset: '30%' }]; }); pie.appendTo('#chart');
gapRatio Property:gapRatio

$("#chart").ejChart({ series: [{ gapRatio: 0.6 }]; });
Property:gapRatio

let pie: AccumulationChart = new AccumulationChart({ series: [{ gapRatio: 0.6 }]; }); pie.appendTo('#chart');
gapWidth Property:gapWidth

$("#chart").ejChart({ series: [{ gapWidth: 0.6 }]; });
Not Applicable
inner radius of the accumulation chart Property:innerRadius

$("#chart").ejChart({ series: [{ innerRadius : '30%' }]; });
Property:innerRadius

let pie: AccumulationChart = new AccumulationChart({ series: [{ innerRadius : '30%' }]; }); pie.appendTo('#chart');
Legend shape of the series Not applicable Property:legendShape

let pie: AccumulationChart = new AccumulationChart({ series: [{ legendShape : 'Rectangle' }]; }); pie.appendTo('#chart');
name of the series Property:name

$("#chart").ejChart({ series: [{ name : '30%' }]; });
Property:name

let pie: AccumulationChart = new AccumulationChart({ series: [{ name : '30%' }]; }); pie.appendTo('#chart');
neck height for funnel series Property:neckHeight

$("#chart").ejChart({ series: [{ neckHeight : '30%' }]; });
Property:neckHeight

let pie: AccumulationChart = new AccumulationChart({ series: [{ neckHeight : '30%' }]; }); pie.appendTo('#chart');
neck width for funnel series Property:neckWidth

$("#chart").ejChart({ series: [{ neckWidth : '30%' }]; });
Property:neckWidth

let pie: AccumulationChart = new AccumulationChart({ series: [{ neckWidth : '30%' }]; }); pie.appendTo('#chart');
opacity for series Property:opacity

$("#chart").ejChart({ series: [{ opacity : 0.4 }]; });
Property:opacity

let pie: AccumulationChart = new AccumulationChart({ series: [{ opacity : 0.5 }]; }); pie.appendTo('#chart');
palettes for series Property:palette

$("#chart").ejChart({ series: [{ palette : [] }]; });
Property:palettes

let pie: AccumulationChart = new AccumulationChart({ series: [{ palettes : [] }]; }); pie.appendTo('#chart');
point color mapping name for series Property:pointColorMappingName

$("#chart").ejChart({ series: [{ pointColorMappingName : 'color' }]; });
Property:pointColorMapping

let pie: AccumulationChart = new AccumulationChart({ series: [{ pointColorMappingName : 'color' }]; }); pie.appendTo('#chart');
Mode of pyramid series Property:pyramidMode

$("#chart").ejChart({ series: [{ pyramidMode : 'Surface' }]; });
Property:pyramidMode

let pie: AccumulationChart = new AccumulationChart({ series: [{ pyramidMode : 'Linear' }]; }); pie.appendTo('#chart');
query for datasource for series Property:pyramidMode

$("#chart").ejChart({ series: [{ query : '' }]; });
Property:query

let pie: AccumulationChart = new AccumulationChart({ series: [{ query : '' }]; }); pie.appendTo('#chart');
Radius of Pie series Property:pieCoefficient

$("#chart").ejChart({ series: [{ pieCoefficient : 0.5 }]; });
Property:radius

let pie: AccumulationChart = new AccumulationChart({ series: [{ radius: '50%' }]; }); pie.appendTo('#chart');
Selection Style of Accumulation chart Not applicable Property:selectionStyle

let pie: AccumulationChart = new AccumulationChart({ series: [{ selectionStyle: '' }]; }); pie.appendTo('#chart');
tooltip Mapping name Not applicable Property:tooltipMappingName

let pie: AccumulationChart = new AccumulationChart({ series: [{ tooltipMappingName: '' }]; }); pie.appendTo('#chart');
Type of series Property:type

$("#chart").ejChart({ series: [{ type : 'Pie' }]; });
Property:type

let pie: AccumulationChart = new AccumulationChart({ series: [{ type: 'Pie' }]; }); pie.appendTo('#chart');
Name of the property in the datasource that contains x value for the series. Property:xName

$("#chart").ejChart({ series: [{ xName : 'x' }]; });
Property:xName

let chart: AccumulationChart = new AccumulationChart({ series: [ { xName: 'x' }]; }); chart.appendTo('#chart);
Name of the property in the datasource that contains x value for the series. Property:yName

$("#chart").ejChart({ series: [{ yName : 'x' }]; });
Property:yName

let chart: AccumulationChart = new AccumulationChart({ series: [ { yName: 'x' }]; }); chart.appendTo('#chart);
Name of the property in the datasource that contains x value for the series. Property:yName

$("#chart").ejChart({ series: [{ yName : 'x' }]; });
Property:yName

let chart: AccumulationChart = new AccumulationChart({ series: [ { yName: 'x' }]; }); chart.appendTo('#chart);
Width of funnel series Property:funnelWidth

$("#chart").ejChart({ series: [{ funnelWidth : '100' }]; });
Property:width

let chart: AccumulationChart = new AccumulationChart({ series: [ { width: '100' }]; }); chart.appendTo('#chart);
Grouping Not Applicable Property:groupTo

let chart: AccumulationChart = new AccumulationChart({ series: [ { groupTo: '100' }]; }); chart.appendTo('#chart);
GroupMode Not Applicable Property:groupMode

let chart: AccumulationChart = new AccumulationChart({ series: [ { groupMode: 'Point' }]; }); chart.appendTo('#chart);

DataLabel

Behaviour API in Essential JS 1 API in Essential JS 2
dataLabel Property:series.marker.dataLabel

$("#chart").ejChart({ series: [ { marker: { dataLabel :{ visible: true }}} ] });
Property:series.dataLabel

let pie: AccumulationChart = new AccumulationChart({ series: { dataLabel : { visible: true }} }); pie.appendTo('#chart');
border of dataLabel Property:series.marker.dataLabel.border

$("#chart").ejChart({ series: [ { marker: { dataLabel :{ border: { color: 'red', width: 2 }}}} ] });
Property:border

let pie: AccumulationChart = new AccumulationChart({ series: { dataLabel : { border: { color: 'red', width: 2}}} }); pie.appendTo('#chart');
connector style for dataLabel connector line Property:connectorLine

$("#chart").ejChart({ series: [ { marker: { dataLabel :{ connectorLine: { type: 'Curve', width: 2 }}}} ] });
Property:connectorStyle

let pie: AccumulationChart = new AccumulationChart({ series: { dataLabel : { connectorStyle: { type: 'Curve', width: 2 }}} }); pie.appendTo('#chart');
Fill for dataLabel Property:fill

$("#chart").ejChart({ series: [ { marker: { dataLabel :{ fill: 'red' }}} ] });
Property:fill

let pie: AccumulationChart = new AccumulationChart({ series: { dataLabel : { fill: 'pink'}} }); pie.appendTo('#chart');
font for dataLabel Property:font

$("#chart").ejChart({ series: [ { marker: { dataLabel :{ font: { } }}} ] });
Property:font

let pie: AccumulationChart = new AccumulationChart({ series: { dataLabel : { font: { }}} }); pie.appendTo('#chart');
font for dataLabel Property:font

$("#chart").ejChart({ series: [ { marker: { dataLabel :{ font: { } }}} ] });
Property:font

let pie: AccumulationChart = new AccumulationChart({ series: { dataLabel : { font: { }}} }); pie.appendTo('#chart');
position Property:position

$("#chart").ejChart({ series: [ { marker: { dataLabel :{ position: 'Inside' }}} ] });
Property:font

let pie: AccumulationChart = new AccumulationChart({ series: { dataLabel : { position: 'Outside' }} }); pie.appendTo('#chart');
Rounded corner radius X Not Applicable Property:dataLabel.rx

let chart: AccumulationChart = new AccumulationChart({ series: [ {dataLabel: { rx: 10 } }]; }); chart.appendTo('#chart);
Rounded corner radius Y Not Applicable Property:dataLabel.ry

let chart: AccumulationChart = new AccumulationChart({ series: [ {dataLabel: { ry: 10 } }]; }); chart.appendTo('#chart);
HTML template in dataLabel Property:dataLabel.template

$("#chart").ejChart({ series: [{ marker: {dataLabel: { template: '
Chart
' } } }]; });
Property:dataLabel.template

let chart: AccumulationChart = new AccumulationChart({ series: [ {dataLabel: { template: '
Chart
' } }]; }); chart.appendTo('#chart);

Legend

Behaviour API in Essential JS 1 API in Essential JS 2
Default legend Property:visible

$("#container").ejChart({ legend: { visible: true } });
Property:visible

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { visible: true } });
Legend height Property:size.height

$("#container").ejChart({ legend: { size : { height: 50 } } });
Property:height

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { height: '30' } });
Legend width Property:size.width

$("#container").ejChart({ legend: { size: { width: 20 } } });
Property:width

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { width: '30' } });
Legend location in chart Property:location

$("#container").ejChart({ legend: { location: { x: 3, y: 45} } });
Property:height

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { location: { x: 3, y: 45} } });
Legend position in chart Property:position

$("#container").ejChart({ legend: { position: 'top' } });
Property:position

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { position: 'Top' } });
Legend padding Not applicable Property:padding

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { padding: 8 } });
Legend alignment Property:position

$("#container").ejChart({ legend: { alignment: 'center' } });
Property:position

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { alignment: 'Center' } });
text style for legend Property:font

$("#container").ejChart({ legend: { font: { fontFamily: '', fontWeight: '400', fontStyle: 'italic', size: '12' } } });
Property:textStyle

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { textStyle: { size: '12' , color: 'red', fontFamily: 'Italic', fontWeight: '400', fontStyle: 'Normal', opacity: 1, textAlignment: 'Center', textOverFlow: 'Trim'} } });
shape height of legend Property:itemStyle.height

$("#container").ejChart({ legend: { itemStyle: { height: 20 } } });
Property:shapeHeight

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { shapeHeight: 20 } });
shape width of legend Property:itemStyle.width

$("#container").ejChart({ legend: { itemStyle: { width: 20 } } });
Property:shapeWidth

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { shapeWidth: 20 } });
shape width of legend Property:itemStyle.width

$("#container").ejChart({ legend: { itemStyle: { width: 20 } } });
Property:shapeWidth

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { shapeWidth: 20 } });
shape border of legend Property:itemStyle.border

$("#container").ejChart({ legend: { itemStyle: { border: { width: 2, color: 'red' } } } });
Not Applicable
shape padding of legend Property:itemPadding

$("#container").ejChart({ legend: { itemPadding: 10 } });
Property:shapePadding

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { shapePadding: 20 } });
Background of legend Property:background

$("#container").ejChart({ legend: { background: 'transparent' } });
Property:backgorund

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { background: 'transparent' } });
Opacity of legend Property:opacity

$("#container").ejChart({ legend: { opacity: 0.3 } });
Property:opacity

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { opacity: 0.4 } });
Toggle visibility of series while legend click Property:toggleSeriesVisibility

$("#container").ejChart({ legend: { toggleSeriesVisibility: true } });
Property:toggleVisibility

let chart: AccumulationChart = new AccumulationChart({ legendSettings: { toggleVisibility: true } });
Title for legend Property:title

$("#container").ejChart({ legend: { title: { text: 'LegendTitle', font: { }, textAlignment: 'middle' } } });
Not applicable
Text Overflow for legend Property:title

$("#container").ejChart({ legend: { textOverFlow: 'trim' } });
Property:textStyle.textOverFlow

let chart: new AccumulationChart({ legend: { text: { textOverFlow: 'trim' } } });
Text width for legend while setting text overflow Property:textWidth

$("#container").ejChart({ legend: { textWidth: 20 } });
Not applicable
Scroll bar for legend Property:enableScrollBar

$("#container").ejChart({ legend: { enableScrollBar: true } });
Not applicable
Row count for legend Property:rowCount

$("#container").ejChart({ legend: { rowCount: 2 } });
Not applicable
Column count for legend Property:columnCount

$("#container").ejChart({ legend: { columnCount: 2 } });
Not applicable
Color for legend items Property:fill

$("#container").ejChart({ legend: { fill: '#EEFFCC' } });
Not applicable

Methods

Behaviour API in Essential JS 1 API in Essential JS 2
animation for series Property:chart.animate

$("#chart").ejChart({ animate: () {
}

});

Not applicable
Redraw for chart Property:chart.redraw

$("#chart").ejChart({ redraw: () {
}

});

Property:chart.refresh()

let chart: AccumulationChart = new AccumulationChart({

}); chart.appendTo(‘#chart’); chart.width = ‘400’; chart.refresh();

Export Property:chart.export()

$("#chart").ejChart({ export: () {
}

});

Property:chart.export()

let chart: AccumulationChart = new AccumulationChart({

}); chart.export(‘JPEG’, ‘chart’); chart.appendTo(‘#chart’);

Print Property:chart.print()

$("#chart").ejChart({ print: () {
}

});

Property:chart.print()

let chart: AccumulationChart = new AccumulationChart({

}); chart.print(‘chart’); chart.appendTo(‘#chart’);

AddSeries Not Applicable Property:chart.addSeries()

let chart: AccumulationChart = new AccumulationChart({

}); chart.appendTo(‘#chart’); chart.addSeries();

RemoveSeries Not Applicable Property:chart.removeSeries()

let chart: AccumulationChart = new AccumulationChart({

}); chart.appendTo(‘#chart’); chart.removeSeries();

Events

Behaviour API in Essential JS 1 API in Essential JS 2
Fires on annotation click Property:annotationClick

$("#chart").ejChart({ annotationClick: () {
}

});

Not applicable
Fires after animation Property:animationComplete

$("#chart").ejChart({ animationComplete: () {
}

});

Property:animationComplete()

let chart: AccumulationChart = new AccumulationChart({ animationComplete: () => { } }); chart.appendTo('#chart');
Fires on after chart resize Property:afterResize

$("#chart").ejChart({ afterResize: () {
}

});

Not applicable
Fires on before chart resize Property:beforeResize

$("#chart").ejChart({ beforeResize: () {
}

});

Property:resized

let chart: AccumulationChart = new AccumulationChart({ resized: () => { } }); chart.appendTo('#chart');
Fires on chart click Property:chartClick

$("#chart").ejChart({ chartClick: () {
}

});

Property:chartMouseClick

let chart: AccumulationChart = new AccumulationChart({ chartMouseClick: () => { } }); chart.appendTo('#chart');
Fires on chart mouse move Property:chartMouseMove

$("#chart").ejChart({ chartMouseMove: () {
}

});

Property:chartMouseMove

let chart: AccumulationChart = new AccumulationChart({ chartMouseMove: () => { } }); chart.appendTo('#chart');
Fires on chart mouse leave Property:chartMouseLeave

$("#chart").ejChart({ chartMouseLeave: () {
}

});

Property:chartMouseLeave

let chart: AccumulationChart = new AccumulationChart({ chartMouseLeave: () => { } }); chart.appendTo('#chart');
Fires on before chart double click Property:chartDoubleClick

$("#chart").ejChart({ chartDoubleClick: () {
}

});

Not applicable
Fires on chart mouse up Not Applicable Property:chartmouseUp

let chart: AccumulationChart = new AccumulationChart({ chartmouseUp: () => { } }); chart.appendTo('#chart');
Fires on chart mouse down Not Applicable Property:chartmouseDown

let chart: AccumulationChart = new AccumulationChart({ chartmouseDown: () => { } }); chart.appendTo('#chart');
Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area Property:chartAreaBoundsCalculate

$("#chart").ejChart({ chartAreaBoundsCalculate: () {
}

});

Not applicable
Fires when chart is destroyed completely. Property:destroy

$("#chart").ejChart({ destroy: () {
}

});

Not applicable
Fires after chart is created. Property:create

$("#chart").ejChart({ create: () {
}

});

Property:loaded

let chart: AccumulationChart = new AccumulationChart({ loaded: () => { } }); chart.appendTo('#chart');
Fires before rendering the data labels. Property:displayTextRendering

$("#chart").ejChart({ displayTextRendering: () {
}

});

Property:textRender

let chart: AccumulationChart = new AccumulationChart({ textRender: () => { } }); chart.appendTo('#chart');
Fires on clicking the legend item. Property:legendItemClick

$("#chart").ejChart({ legendItemClick: () { } });
Not applicable
Fires when moving mouse over legend item Property:legendItemMouseMove

$("#chart").ejChart({ legendItemMouseMove: () { } });
Not applicable
Fires before rendering the legend item. Property:legendItemRendering

$("#chart").ejChart({ legendItemRendering: () {
}

});

Property:legendRender

let chart: AccumulationChart = new AccumulationChart({ legendRender: () => { } }); chart.appendTo('#chart');
Fires before loading the chart. Property:load

$("#chart").ejChart({ load: () {
}

});

Property:load

let chart: AccumulationChart = new AccumulationChart({ load: () => { } }); chart.appendTo('#chart');
Fires on clicking a point in chart. Property:pointRegionClick

$("#chart").ejChart({ pointRegionClick: () {
}

});

Property:pointClick

let chart: AccumulationChart = new AccumulationChart({ pointClick : () => { } }); chart.appendTo('#chart');
Fires when mouse is moved over a point. Property:pointRegionMouseMove

$("#chart").ejChart({ pointRegionMouseMove: () { } });
Property:pointMove

let chart: AccumulationChart = new AccumulationChart({ pointMove : () => { } }); chart.appendTo('#chart');
Fires before rendering chart. Property:preRender

$("#chart").ejChart({ preRender: () { } });
Not applicable
Fires when point render. Not Applicable Property:pointRender

let chart: AccumulationChart = new AccumulationChart({ pointRender : () => { } }); chart.appendTo('#chart');
Fires before rendering a series. Property:seriesRendering

$("#chart").ejChart({ seriesRendering: () {
}

});

Property:seriesRender

let chart: AccumulationChart = new AccumulationChart({ seriesRender : () => { } }); chart.appendTo('#chart');
Fires before rendering the Chart title. Property:titleRendering

$("#chart").ejChart({ titleRendering: () { } });
Not applicable
Fires before rendering the Chart sub title. Property:subTitleRendering

$("#chart").ejChart({ subTitleRendering: () { } });
Not applicable
Fires before rendering the tooltip. Property:toolTipInitialize

$("#chart").ejChart({ toolTipInitialize: () {
}

});

Property:tooltipRender

let chart: AccumulationChart = new AccumulationChart({ tooltipRender : () => { } }); chart.appendTo('#chart');