Contents
- Accumulation Chart
- Annotation
- Series
- DataLabel
- Legend
- Methods
- Events
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 TypeScript Accumulation chart control
16 May 202515 minutes to read
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
</br>
</br>
$("#chart").ejChart({
annotations: [{}];
});
|
Property:annotations
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
annotations: [{ }];
});
pie.appendTo('#chart');
|
| background |
Property:background
</br>
</br>
$("#chart").ejChart({
background: '#DDCCEE'
});
|
Property:background
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
background: 'DDCCEE'
});
pie.appendTo('#chart');
|
| border |
Property:border
</br>
</br>
$("#chart").ejChart({
border: { color: 'red' , width: 2, opacity: 0.5}
});
|
Property:border
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
border: { color: 'red', width: 2}
});
pie.appendTo('#chart');
|
| dataSource | Not applicable |
Property:border
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
dataSource: [ ];
});
pie.appendTo('#chart');
|
| Animation after legend click | Not applicable |
Property:enableAnimation
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
enableAnimation: true
});
pie.appendTo('#chart');
|
| Persisting component's state between page reloads. | Not applicable |
Property:enablePersistance
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
enablePersistance: true
});
pie.appendTo('#chart');
|
| Enabling smart labels |
Property:series.enableSmartLabels
</br>
</br>
$("#chart").ejChart({
series: [ { enableSmartLabels: true}]
});
|
Property:enableSmartLabels
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
enableSmartLabels: true
});
pie.appendTo('#chart');
|
| Height of Chart |
Property:size.height
</br>
</br>
$("#chart").ejChart({
size: { height: '400' }
});
|
Property:height
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
height: '400'
});
pie.appendTo('#chart');
|
| Multi selection |
Property:selectionSettings.type
</br>
</br>
$("#chart").ejChart({
selectionSettings: {
type: 'multiple'
}
});
|
Property:isMultiSelect
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
isMultiSelect: true
});
pie.appendTo('#chart');
|
| legend Settings |
Property:legend
</br>
</br>
$("#chart").ejChart({
legend: { }
});
|
Property:legendSettings
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
legendSettings: { }
});
pie.appendTo('#chart');
|
| Margin for the chart |
Property:margin
</br>
</br>
$("#chart").ejChart({
margin: { top: 20, bottom: 23, right: 15, left: 10 }
});
|
Property:margin
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
margin: { top: 20, bottom: 23, right: 15, left: 10 }
});
pie.appendTo('#chart');
|
| SelectedDataIndexes |
Property:selectedDataPointIndexes
</br>
</br>
$("#chart").ejChart({
selectedDataPointIndexes : [{}]
});
|
Property:selectedDataIndexes
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
selectedDataIndexes : [ { series: 0, point: 1}]
});
pie.appendTo('#chart');
|
| Selection Mode |
Property:selectionSettings.mode
</br>
</br>
$("#chart").ejChart({
selectionSettings: { mode: 'Point'}
});
|
Property:selectionMode
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
selectionMode : 'Point'
});
pie.appendTo('#chart');
|
| Series |
Property:series
</br>
</br>
$("#chart").ejChart({
series: []
});
|
Property:series
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: []
});
pie.appendTo('#chart');
|
| Title text |
Property:title.text
</br>
</br>
$("#chart").ejChart({
title: { text: 'Pie Chart' }
});
|
Property:title
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
title: 'Pie Chart'
});
pie.appendTo('#chart');
|
| Title Styles |
Property:title
</br>
</br>
$("#chart").ejChart({
title: { text: 'Pie Chart' }
});
|
Property:titleStyle
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
titleStyle: { fontFamily: 'SegoeUI'}
});
pie.appendTo('#chart');
|
| Sub Title text |
Property:subTitle.text
</br>
</br>
$("#chart").ejChart({
subTitle: { text: 'Pie Chart' }
});
|
Property:subTitle
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
subTitle: 'Pie Chart'
});
pie.appendTo('#chart');
|
| Sub title Styles |
Property:title
</br>
</br>
$("#chart").ejChart({
title: { text: 'Pie Chart' }
});
|
Property:subTitleStyle
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
subTitleStyle: { fontFamily: 'SegoeUI'}
});
pie.appendTo('#chart');
|
| tooltip |
Property:series.toolTip
</br>
</br>
$("#chart").ejChart({
series: [ { tooltip: { }}]
});
|
Property:tooltip
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
tooltip: { }
});
pie.appendTo('#chart');
|
| Width of Chart |
Property:size.width
</br>
</br>
$("#chart").ejChart({
size: { width: '400' }
});
|
Property:width
</br>
</br>
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
</br>
</br>
$("#chart").ejChart({
annotations: [{}];
});
|
Property:annotations
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
annotations: [{ }];
});
pie.appendTo('#chart');
|
| content |
Property:annotations
</br>
</br>
$("#chart").ejChart({
annotations: [{content: '
|
Property:annotations
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
annotations: [{content: '
|
| coordinateUnits |
Property:annotations
</br>
</br>
$("#chart").ejChart({
annotations: [{coordinateUnit: 'Pixel'}];
});
|
Property:annotations
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
annotations: [{coordinateUnit: 'Pixel'}];
});
pie.appendTo('#chart');
|
| description | Not Applicable |
Property:description
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
annotations: [{description: 'Pixel'}];
});
pie.appendTo('#chart');
|
| horizontalAlignment for annotation |
Property:annotations.horizontalAlignment
</br>
</br>
$("#container").ejChart({
annotations :[{ horizontalAlignment :"middle"}]
});
|
Property:annotations.horizontalAlignment
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
annotations: [{ horizontalAlignment: 'Center'}]
});
chart.appendTo('#chart');
|
| margin for annotation |
Property:annotations.margin
</br>
</br>
$("#container").ejChart({
annotations :[{ margin { right: 5, left: 5, top: 5, bottom: 5}}]
});
|
Not applicable |
| Opacity for annotation |
Property:annotations.opacity
</br>
</br>
$("#container").ejChart({
annotations :[{ opacity: 0.4 }]
});
|
Not applicable |
| Region for annotation with respect to chart or series |
Property:annotations.region
</br>
</br>
$("#container").ejChart({
annotations :[{ region :"chart"}]
});
|
Property:annotations.region
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
annotations: [{ region: 'Chart'}]
});
chart.appendTo('#chart');
|
| verticalAlignment for annotation |
Property:annotations.verticalAlignment
</br>
</br>
$("#container").ejChart({
annotations :[{ verticalAlignment :"middle"}]
});
|
Property:annotations.verticalAlignment
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
annotations: [{ verticalAlignment: 'Center'}]
});
chart.appendTo('#chart');
|
| Visibility of annotations |
Property:annotations.visible
</br>
</br>
$("#container").ejChart({
annotations :[{ visible: true }]
});
|
Not applicable |
| X offset for annotation |
Property:annotations.x
</br>
</br>
$("#container").ejChart({
annotations :[{ x :"100"}]
});
|
Property:annotations.x
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
annotations: [{ x: '100'}]
});
chart.appendTo('#chart');
|
| Y offset for annotation |
Property:annotations.y
</br>
</br>
$("#container").ejChart({
annotations :[{ y :"100"}]
});
|
Property:annotations.y
</br>
</br>
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
</br>
</br>
$("#chart").ejChart({
series: [{}];
});
|
Property:series
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ }];
});
pie.appendTo('#chart');
|
| animation for series |
Property:enableAnimation
</br>
</br>
$("#chart").ejChart({
series: [{ enableAnimation: true}];
});
|
Property:animation.enable
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ animation: { enable: true }}];
});
pie.appendTo('#chart');
|
| animation duration for series |
Property:animationDuration
</br>
</br>
$("#chart").ejChart({
series: [{ annimationDuration: 1000}];
});
|
Property:animation.duration
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ animation: { duration: 1000 }}];
});
pie.appendTo('#chart');
|
| animation delay for series | Not Applicable |
Property:animation.duration
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ animation: { delay: 100 }}];
});
pie.appendTo('#chart');
|
| Border for series |
Property:border
</br>
</br>
$("#chart").ejChart({
series: [{ border: { color: 'pink', width: 2, dashArray: '10,4' }}];
});
|
Property:border
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ border: { color: 'red', width: 2 }}];
});
pie.appendTo('#chart');
|
| DataLabel for series |
Property:dataLabel
</br>
</br>
$("#chart").ejChart({
series: [{ dataLabel: {}}];
});
|
Property:border
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ dataLabel: { }}];
});
pie.appendTo('#chart');
|
| DataSource for series |
Property:dataSource
</br>
</br>
$("#chart").ejChart({
series: [{ dataSource: [{}] }];
});
|
Property:dataSource
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ dataSource: [{ }]}];
});
pie.appendTo('#chart');
|
| enableTooltip for series |
Property:tooltip.visible
</br>
</br>
$("#chart").ejChart({
series: [{ tooltip: { visible: true } }];
});
|
Property:enableTooltip
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ enableTooltip: true }];
});
pie.appendTo('#chart');
|
| start angle |
Property:startAngle
</br>
</br>
$("#chart").ejChart({
series: [{ startAngle: 80 }];
});
|
Property:startAngle
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ startAngle: 90 }];
});
pie.appendTo('#chart');
|
| end angle |
Property:endAngle
</br>
</br>
$("#chart").ejChart({
series: [{ endAngle: 80 }];
});
|
Property:endAngle
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ endAngle: 90 }];
});
pie.appendTo('#chart');
|
| explode |
Property:explode
</br>
</br>
$("#chart").ejChart({
series: [{ explode: true }];
});
|
Property:explode
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ explode: true }];
});
pie.appendTo('#chart');
|
| explodeAll |
Property:explodeAll
</br>
</br>
$("#chart").ejChart({
series: [{ explodeAll: true }];
});
|
Property:explodeAll
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ explodeAll: true }];
});
pie.appendTo('#chart');
|
| explodeIndex |
Property:explode
</br>
</br>
$("#chart").ejChart({
series: [{ explodeIndex: 0 }];
});
|
Property:explodeIndex
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ explodeIndex: 1 }];
});
pie.appendTo('#chart');
|
| explodeOffset |
Property:explodeOffset
</br>
</br>
$("#chart").ejChart({
series: [{ explodeOffset: '30%' }];
});
|
Property:explodeOffset
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ explodeOffset: '30%' }];
});
pie.appendTo('#chart');
|
| gapRatio |
Property:gapRatio
</br>
</br>
$("#chart").ejChart({
series: [{ gapRatio: 0.6 }];
});
|
Property:gapRatio
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ gapRatio: 0.6 }];
});
pie.appendTo('#chart');
|
| gapWidth |
Property:gapWidth
</br>
</br>
$("#chart").ejChart({
series: [{ gapWidth: 0.6 }];
});
|
Not Applicable |
| inner radius of the accumulation chart |
Property:innerRadius
</br>
</br>
$("#chart").ejChart({
series: [{ innerRadius : '30%' }];
});
|
Property:innerRadius
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ innerRadius : '30%' }];
});
pie.appendTo('#chart');
|
| Legend shape of the series | Not applicable |
Property:legendShape
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ legendShape : 'Rectangle' }];
});
pie.appendTo('#chart');
|
| name of the series |
Property:name
</br>
</br>
$("#chart").ejChart({
series: [{ name : '30%' }];
});
|
Property:name
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ name : '30%' }];
});
pie.appendTo('#chart');
|
| neck height for funnel series |
Property:neckHeight
</br>
</br>
$("#chart").ejChart({
series: [{ neckHeight : '30%' }];
});
|
Property:neckHeight
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ neckHeight : '30%' }];
});
pie.appendTo('#chart');
|
| neck width for funnel series |
Property:neckWidth
</br>
</br>
$("#chart").ejChart({
series: [{ neckWidth : '30%' }];
});
|
Property:neckWidth
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ neckWidth : '30%' }];
});
pie.appendTo('#chart');
|
| opacity for series |
Property:opacity
</br>
</br>
$("#chart").ejChart({
series: [{ opacity : 0.4 }];
});
|
Property:opacity
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ opacity : 0.5 }];
});
pie.appendTo('#chart');
|
| palettes for series |
Property:palette
</br>
</br>
$("#chart").ejChart({
series: [{ palette : [] }];
});
|
Property:palettes
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ palettes : [] }];
});
pie.appendTo('#chart');
|
| point color mapping name for series |
Property:pointColorMappingName
</br>
</br>
$("#chart").ejChart({
series: [{ pointColorMappingName : 'color' }];
});
|
Property:pointColorMapping
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ pointColorMappingName : 'color' }];
});
pie.appendTo('#chart');
|
| Mode of pyramid series |
Property:pyramidMode
</br>
</br>
$("#chart").ejChart({
series: [{ pyramidMode : 'Surface' }];
});
|
Property:pyramidMode
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ pyramidMode : 'Linear' }];
});
pie.appendTo('#chart');
|
| query for datasource for series |
Property:pyramidMode
</br>
</br>
$("#chart").ejChart({
series: [{ query : '' }];
});
|
Property:query
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ query : '' }];
});
pie.appendTo('#chart');
|
| Radius of Pie series |
Property:pieCoefficient
</br>
</br>
$("#chart").ejChart({
series: [{ pieCoefficient : 0.5 }];
});
|
Property:radius
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ radius: '50%' }];
});
pie.appendTo('#chart');
|
| Selection Style of Accumulation chart | Not applicable |
Property:selectionStyle
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ selectionStyle: '' }];
});
pie.appendTo('#chart');
|
| tooltip Mapping name | Not applicable |
Property:tooltipMappingName
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: [{ tooltipMappingName: '' }];
});
pie.appendTo('#chart');
|
| Type of series |
Property:type
</br>
</br>
$("#chart").ejChart({
series: [{ type : 'Pie' }];
});
|
Property:type
</br>
</br>
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
</br>
</br>
$("#chart").ejChart({
series: [{ xName : 'x' }];
});
|
Property:xName
</br>
</br>
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
</br>
</br>
$("#chart").ejChart({
series: [{ yName : 'x' }];
});
|
Property:yName
</br>
</br>
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
</br>
</br>
$("#chart").ejChart({
series: [{ yName : 'x' }];
});
|
Property:yName
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
series: [ { yName: 'x' }];
});
chart.appendTo('#chart);
|
| Width of funnel series |
Property:funnelWidth
</br>
</br>
$("#chart").ejChart({
series: [{ funnelWidth : '100' }];
});
|
Property:width
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
series: [ { width: '100' }];
});
chart.appendTo('#chart);
|
| Grouping | Not Applicable |
Property:groupTo
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
series: [ { groupTo: '100' }];
});
chart.appendTo('#chart);
|
| GroupMode | Not Applicable |
Property:groupMode
</br>
</br>
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
</br>
</br>
$("#chart").ejChart({
series: [
{ marker: { dataLabel :{ visible: true }}}
]
});
|
Property:series.dataLabel
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: { dataLabel : { visible: true }}
});
pie.appendTo('#chart');
|
| border of dataLabel |
Property:series.marker.dataLabel.border
</br>
</br>
$("#chart").ejChart({
series: [
{ marker: { dataLabel :{ border: { color: 'red', width: 2 }}}}
]
});
|
Property:border
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: { dataLabel : { border: { color: 'red', width: 2}}}
});
pie.appendTo('#chart');
|
| connector style for dataLabel connector line |
Property:connectorLine
</br>
</br>
$("#chart").ejChart({
series: [
{ marker: { dataLabel :{ connectorLine: { type: 'Curve', width: 2 }}}}
]
});
|
Property:connectorStyle
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: { dataLabel : { connectorStyle: { type: 'Curve', width: 2 }}}
});
pie.appendTo('#chart');
|
| Fill for dataLabel |
Property:fill
</br>
</br>
$("#chart").ejChart({
series: [
{ marker: { dataLabel :{ fill: 'red' }}}
]
});
|
Property:fill
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: { dataLabel : { fill: 'pink'}}
});
pie.appendTo('#chart');
|
| font for dataLabel |
Property:font
</br>
</br>
$("#chart").ejChart({
series: [
{ marker: { dataLabel :{ font: { } }}}
]
});
|
Property:font
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: { dataLabel : { font: { }}}
});
pie.appendTo('#chart');
|
| font for dataLabel |
Property:font
</br>
</br>
$("#chart").ejChart({
series: [
{ marker: { dataLabel :{ font: { } }}}
]
});
|
Property:font
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: { dataLabel : { font: { }}}
});
pie.appendTo('#chart');
|
| position |
Property:position
</br>
</br>
$("#chart").ejChart({
series: [
{ marker: { dataLabel :{ position: 'Inside' }}}
]
});
|
Property:font
</br>
</br>
let pie: AccumulationChart = new AccumulationChart({
series: { dataLabel : { position: 'Outside' }}
});
pie.appendTo('#chart');
|
| Rounded corner radius X | Not Applicable |
Property:dataLabel.rx
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
series: [ {dataLabel: { rx: 10 } }];
});
chart.appendTo('#chart);
|
| Rounded corner radius Y | Not Applicable |
Property:dataLabel.ry
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
series: [ {dataLabel: { ry: 10 } }];
});
chart.appendTo('#chart);
|
| HTML template in dataLabel |
Property:dataLabel.template
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { template: '
|
Property:dataLabel.template
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
series: [ {dataLabel: { template: '
|
Legend
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Default legend |
Property:visible
</br>
</br>
$("#container").ejChart({
legend: { visible: true }
});
|
Property:visible
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { visible: true }
});
|
| Legend height |
Property:size.height
</br>
</br>
$("#container").ejChart({
legend: { size : { height: 50 } }
});
|
Property:height
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { height: '30' }
});
|
| Legend width |
Property:size.width
</br>
</br>
$("#container").ejChart({
legend: { size: { width: 20 } }
});
|
Property:width
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { width: '30' }
});
|
| Legend location in chart |
Property:location
</br>
</br>
$("#container").ejChart({
legend: { location: { x: 3, y: 45} }
});
|
Property:height
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { location: { x: 3, y: 45} }
});
|
| Legend position in chart |
Property:position
</br>
</br>
$("#container").ejChart({
legend: { position: 'top' }
});
|
Property:position
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { position: 'Top' }
});
|
| Legend padding | Not applicable |
Property:padding
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { padding: 8 }
});
|
| Legend alignment |
Property:position
</br>
</br>
$("#container").ejChart({
legend: { alignment: 'center' }
});
|
Property:position
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { alignment: 'Center' }
});
|
| text style for legend |
Property:font
</br>
</br>
$("#container").ejChart({
legend: { font: { fontFamily: '', fontWeight: '400', fontStyle: 'italic', size: '12' } }
});
|
Property:textStyle
</br>
</br>
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
</br>
</br>
$("#container").ejChart({
legend: { itemStyle: { height: 20 } }
});
|
Property:shapeHeight
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { shapeHeight: 20 }
});
|
| shape width of legend |
Property:itemStyle.width
</br>
</br>
$("#container").ejChart({
legend: { itemStyle: { width: 20 } }
});
|
Property:shapeWidth
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { shapeWidth: 20 }
});
|
| shape width of legend |
Property:itemStyle.width
</br>
</br>
$("#container").ejChart({
legend: { itemStyle: { width: 20 } }
});
|
Property:shapeWidth
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { shapeWidth: 20 }
});
|
| shape border of legend |
Property:itemStyle.border
</br>
</br>
$("#container").ejChart({
legend: { itemStyle: { border: { width: 2, color: 'red' } } }
});
|
Not Applicable |
| shape padding of legend |
Property:itemPadding
</br>
</br>
$("#container").ejChart({
legend: { itemPadding: 10 }
});
|
Property:shapePadding
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { shapePadding: 20 }
});
|
| Background of legend |
Property:background
</br>
</br>
$("#container").ejChart({
legend: { background: 'transparent' }
});
|
Property:backgorund
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { background: 'transparent' }
});
|
| Opacity of legend |
Property:opacity
</br>
</br>
$("#container").ejChart({
legend: { opacity: 0.3 }
});
|
Property:opacity
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { opacity: 0.4 }
});
|
| Toggle visibility of series while legend click |
Property:toggleSeriesVisibility
</br>
</br>
$("#container").ejChart({
legend: { toggleSeriesVisibility: true }
});
|
Property:toggleVisibility
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendSettings: { toggleVisibility: true }
});
|
| Title for legend |
Property:title
</br>
</br>
$("#container").ejChart({
legend: { title: { text: 'LegendTitle', font: { }, textAlignment: 'middle' } }
});
|
Not applicable |
| Text Overflow for legend |
Property:title
</br>
</br>
$("#container").ejChart({
legend: { textOverFlow: 'trim' }
});
|
Property:textStyle.textOverFlow
</br>
</br>
let chart: new AccumulationChart({
legend: { text: { textOverFlow: 'trim' } }
});
|
| Text width for legend while setting text overflow |
Property:textWidth
</br>
</br>
$("#container").ejChart({
legend: { textWidth: 20 }
});
|
Not applicable |
| Scroll bar for legend |
Property:enableScrollBar
</br>
</br>
$("#container").ejChart({
legend: { enableScrollBar: true }
});
|
Not applicable |
| Row count for legend |
Property:rowCount
</br>
</br>
$("#container").ejChart({
legend: { rowCount: 2 }
});
|
Not applicable |
| Column count for legend |
Property:columnCount
</br>
</br>
$("#container").ejChart({
legend: { columnCount: 2 }
});
|
Not applicable |
| Color for legend items |
Property:fill
</br>
</br>
$("#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
</br>
</br>
$("#chart").ejChart({
animate: () {
}
});
|
Not applicable |
| Redraw for chart |
Property:chart.redraw
</br>
</br>
$("#chart").ejChart({
redraw: () {
}
});
|
Property:chart.refresh()
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
});
chart.appendTo('#chart');
chart.width = '400';
chart.refresh();
|
| Export |
Property:chart.export()
</br>
</br>
$("#chart").ejChart({
export: () {
}
});
|
Property:chart.export()
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
});
chart.export('JPEG', 'chart');
chart.appendTo('#chart');
|
Property:chart.print()
</br>
</br>
$("#chart").ejChart({
print: () {
}
});
|
Property:chart.print()
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
});
chart.print('chart');
chart.appendTo('#chart');
|
|
| AddSeries | Not Applicable |
Property:chart.addSeries()
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
});
chart.appendTo('#chart');
chart.addSeries();
|
| RemoveSeries | Not Applicable |
Property:chart.removeSeries()
</br>
</br>
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
</br>
</br>
$("#chart").ejChart({
annotationClick: () {
}
});
|
Not applicable |
| Fires after animation |
Property:animationComplete
</br>
</br>
$("#chart").ejChart({
animationComplete: () {
}
});
|
Property:animationComplete()
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
animationComplete: () => {
}
});
chart.appendTo('#chart');
|
| Fires on after chart resize |
Property:afterResize
</br>
</br>
$("#chart").ejChart({
afterResize: () {
}
});
|
Not applicable |
| Fires on before chart resize |
Property:beforeResize
</br>
</br>
$("#chart").ejChart({
beforeResize: () {
}
});
|
Property:resized
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
resized: () => {
}
});
chart.appendTo('#chart');
|
| Fires on chart click |
Property:chartClick
</br>
</br>
$("#chart").ejChart({
chartClick: () {
}
});
|
Property:chartMouseClick
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
chartMouseClick: () => {
}
});
chart.appendTo('#chart');
|
| Fires on chart mouse move |
Property:chartMouseMove
</br>
</br>
$("#chart").ejChart({
chartMouseMove: () {
}
});
|
Property:chartMouseMove
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
chartMouseMove: () => {
}
});
chart.appendTo('#chart');
|
| Fires on chart mouse leave |
Property:chartMouseLeave
</br>
</br>
$("#chart").ejChart({
chartMouseLeave: () {
}
});
|
Property:chartMouseLeave
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
chartMouseLeave: () => {
}
});
chart.appendTo('#chart');
|
| Fires on before chart double click |
Property:chartDoubleClick
</br>
</br>
$("#chart").ejChart({
chartDoubleClick: () {
}
});
|
Not applicable |
| Fires on chart mouse up | Not Applicable |
Property:chartmouseUp
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
chartmouseUp: () => {
}
});
chart.appendTo('#chart');
|
| Fires on chart mouse down | Not Applicable |
Property:chartmouseDown
</br>
</br>
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
</br>
</br>
$("#chart").ejChart({
chartAreaBoundsCalculate: () {
}
});
|
Not applicable |
| Fires when chart is destroyed completely. |
Property:destroy
</br>
</br>
$("#chart").ejChart({
destroy: () {
}
});
|
Not applicable |
| Fires after chart is created. |
Property:create
</br>
</br>
$("#chart").ejChart({
create: () {
}
});
|
Property:loaded
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
loaded: () => {
}
});
chart.appendTo('#chart');
|
| Fires before rendering the data labels. |
Property:displayTextRendering
</br>
</br>
$("#chart").ejChart({
displayTextRendering: () {
}
});
|
Property:textRender
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
textRender: () => {
}
});
chart.appendTo('#chart');
|
| Fires on clicking the legend item. |
Property:legendItemClick
</br>
</br>
$("#chart").ejChart({
legendItemClick: () {
}
});
|
Not applicable |
| Fires when moving mouse over legend item |
Property:legendItemMouseMove
</br>
</br>
$("#chart").ejChart({
legendItemMouseMove: () {
}
});
|
Not applicable |
| Fires before rendering the legend item. |
Property:legendItemRendering
</br>
</br>
$("#chart").ejChart({
legendItemRendering: () {
}
});
|
Property:legendRender
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
legendRender: () => {
}
});
chart.appendTo('#chart');
|
| Fires before loading the chart. |
Property:load
</br>
</br>
$("#chart").ejChart({
load: () {
}
});
|
Property:load
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
load: () => {
}
});
chart.appendTo('#chart');
|
| Fires on clicking a point in chart. |
Property:pointRegionClick
</br>
</br>
$("#chart").ejChart({
pointRegionClick: () {
}
});
|
Property:pointClick
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
pointClick : () => {
}
});
chart.appendTo('#chart');
|
| Fires when mouse is moved over a point. |
Property:pointRegionMouseMove
</br>
</br>
$("#chart").ejChart({
pointRegionMouseMove: () {
}
});
|
Property:pointMove
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
pointMove : () => {
}
});
chart.appendTo('#chart');
|
| Fires before rendering chart. |
Property:preRender
</br>
</br>
$("#chart").ejChart({
preRender: () {
}
});
|
Not applicable |
| Fires when point render. | Not Applicable |
Property:pointRender
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
pointRender : () => {
}
});
chart.appendTo('#chart');
|
| Fires before rendering a series. |
Property:seriesRendering
</br>
</br>
$("#chart").ejChart({
seriesRendering: () {
}
});
|
Property:seriesRender
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
seriesRender : () => {
}
});
chart.appendTo('#chart');
|
| Fires before rendering the Chart title. |
Property:titleRendering
</br>
</br>
$("#chart").ejChart({
titleRendering: () {
}
});
|
Not applicable |
| Fires before rendering the Chart sub title. |
Property:subTitleRendering
</br>
</br>
$("#chart").ejChart({
subTitleRendering: () {
}
});
|
Not applicable |
| Fires before rendering the tooltip. |
Property:toolTipInitialize
</br>
</br>
$("#chart").ejChart({
toolTipInitialize: () {
}
});
|
Property:tooltipRender
</br>
</br>
let chart: AccumulationChart = new AccumulationChart({
tooltipRender : () => {
}
});
chart.appendTo('#chart');
|