Contents
- Accumulation Chart
- Annotation
- Series
- DataLabel
- Legend
- Methods
- Events
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 JavaScript Accumulation chart control
8 May 202315 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');
|