Contents
- Annotations
- Columns
- CommonSeriesOptions
- Crosshair
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 TypeScript Chart control
8 May 202324 minutes to read
This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.
Annotations
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| rotation of annotation |
Property:annotations.angle
</br>
</br>
$("#chart").ejChart({
annotations: [{angle: 90}];
});
|
Property:annotations.rotation
</br>
</br>
let chart: Chart = new Chart({
annotations: [{ rotation: 90}];
});
chart.appendTo('#chart');
|
| annotations |
Property:annotations.content
</br>
</br>
$("#chart").ejChart({
annotations: [{ content: '
|
Property:annotations.content
</br>
</br>
let chart: Chart = new Chart({
annotations: [{ content: '
|
| coordinate unit for annotation |
Property:annotations.coordinateUnit
</br>
</br>
$("#container").ejChart({
annotations :[{ coordinateUnit :"pixels"}]
});
|
Property:annotations.coordinateUnits
</br>
</br>
let chart: Chart = new Chart({
annotations: [{ coordinateUnits: 'Pixel'}]
});
chart.appendTo('#chart');
|
| horizontalAlignment for annotation |
Property:annotations.horizontalAlignment
</br>
</br>
$("#container").ejChart({
annotations :[{ horizontalAlignment :"middle"}]
});
|
Property:annotations.horizontalAlignment
</br>
</br>
let chart: Chart = new Chart({
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: Chart = new Chart({
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: Chart = new Chart({
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: Chart = new Chart({
annotations: [{ x: '100'}]
});
chart.appendTo('#chart');
|
| X axis name in which annotation to be rendered |
Property:annotations.xAxisName
</br>
</br>
$("#container").ejChart({
annotations :[{ xAxisName :"xAxis"}]
});
|
Property:annotations.xAxisName
</br>
</br>
let chart: Chart = new Chart({
annotations: [{ xAxisName: 'xAxis'}]
});
chart.appendTo('#chart');
|
| Y offset for annotation |
Property:annotations.y
</br>
</br>
$("#container").ejChart({
annotations :[{ y :"100"}]
});
|
Property:annotations.y
</br>
</br>
let chart: Chart = new Chart({
annotations: [{ y: '100'}]
});
chart.appendTo('#chart');
|
| Y axis name in which annotation to be rendered |
Property:annotations.yAxisName
</br>
</br>
$("#container").ejChart({
annotations :[{ xAxisName :"yAxis"}]
});
|
Property:annotations.yAxisName
</br>
</br>
let chart: Chart = new Chart({
annotations: [{ xAxisName: 'yAxis'}]
});
chart.appendTo('#chart');
|
Columns
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Columns in chart |
Property:columnDefinitions
</br>
</br>
$("#chart").ejChart({
columnDefinitions: [];
});
|
Property:columns
</br>
</br>
let chart: Chart = new Chart({
columns: [];
});
chart.appendTo('#chart');
|
| unit |
Property:unit
</br>
</br>
$("#container").ejChart({
columnDefinitions :[{unit : "percentage"}]
});
|
Not Applicable |
| width of columns in chart |
Property:columnWidth
</br>
</br>
$("#chart").ejChart({
columnDefinitions: [{ columnWidth: '50%'}];
});
|
Property:width
</br>
</br>
let chart: Chart = new Chart({
columns: [ { width: '300'}];
});
chart.appendTo('#chart');
|
| Line customization |
Property:lineColor, lineWidth
</br>
</br>
$("#chart").ejChart({
columnDefinitions: [{ columnWidth: '50%', lineColor: 'brown', lineWidth: 2}];
});
|
Property:border
</br>
</br>
let chart: Chart = new Chart({
columns: [ { width: '300', border: { width: 2, color: 'brown'}}];
});
chart.appendTo('#chart');
|
CommonSeriesOptions
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| commonSeriesOptios |
Property:commonSeriesOptions
</br>
</br>
$("#container").ejChart({
commonSeriesOptions: { }
});
|
Not Applicable |
Crosshair
## 3D chart| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| crosshair |
Property:visible
</br>
</br>
$("#container").ejChart({
crosshair: { visible: true}
});
|
Property:enable
</br>
</br>
let chart: Chart = new Chart({
crosshair: { enable: false }
});
chart.appendTo('#chart');
|
| trackballTooltipSettings |
Property:trackballTooltipSettings
</br>
</br>
$("#container").ejChart({
crosshair : { trackballTooltipSettings : { border : { width :2 } } }
});
|
Not applicable |
| marker |
Property:marker
</br>
</br>
$("#container").ejChart({
crosshair : { marker : { border : { width :2 } } }
});
|
Not applicable |
| crosshair line style |
Property:line
</br>
</br>
$("#container").ejChart({
crosshair : { line: { width: 2, color: 'red' } }
});
|
let chart: Chart = new Chart({ crosshair: { border: { width: 2, color: 'black' }} }); |
| type |
Property:type
</br>
</br>
$("#container").ejChart({
crosshair : { type: 'trackball' }
});
|
Not applicable |
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| 3d chart |
Property:enable3D
</br>
</br>
$("#container").ejChart({
enable3D: true
});
|
Not applicable |
| Rotation of 3d chart |
Property:enableRotation
</br>
</br>
$("#container").ejChart({
enableRotation: false
});
|
Not applicable |
| depth |
Property:depth
</br>
</br>
$("#container").ejChart({
depth: 45
});
|
Not applicable |
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| canvas rendering |
Property:enableCanvasRendering
</br>
</br>
$("#container").ejChart({
enableCanvasRendering: true
});
|
Not applicable |
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Type of Indicator |
Property:type
</br>
</br>
$("#container").ejChart({
indicators: [ { type: 'Sma' }]
});
|
Property:type
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { type: 'Sma' }]
});
|
| Period for indicator |
Property:period
</br>
</br>
$("#container").ejChart({
indicators: [ { period: 14 }]
});
|
Property:type
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { period: 14 }]
});
|
| Period for indicator |
Property:period
</br>
</br>
$("#container").ejChart({
indicators: [ { period: 14 }]
});
|
Property:period
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { period: 14 }]
});
|
| %K value in stochastic indicator |
Property:kPeriod
</br>
</br>
$("#container").ejChart({
indicators: [ { kPeriod: 14 }]
});
|
Property:kPeriod
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { kPeriod: 14 }]
});
|
| %D value in stochastic indicator |
Property:dPeriod
</br>
</br>
$("#container").ejChart({
indicators: [ { dPeriod: 3 }]
});
|
Property:dPeriod
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { dPeriod: 3 }]
});
|
| Shows overSold/overBought values | Not applicable |
Property:showZones
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { showZones: true }]
});
|
| Overbought value for RSI and stochastic indicator | Not applicable |
Property:overBought
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { overBought: 80 }]
});
|
| Oversold value for RSI and stochastic indicator | Not applicable |
Property:overSold
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { overSold: 20 }]
});
|
| Standard deviation for Bollingerbands |
Property:standardDeviations
</br>
</br>
$("#container").ejChart({
indicators: [ { standardDeviations: 2 }]
});
|
Property:standardDeviation
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { standardDeviation: 2 }]
});
|
| standard deviation |
Property:standardDeviations
</br>
</br>
$("#container").ejChart({
indicators: [ { standardDeviations: 2 }]
});
|
Property:standardDeviation
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { standardDeviation: 2 }]
});
|
| Field for indicator |
Property:field
</br>
</br>
$("#container").ejChart({
indicators: [ { field: 'Close' }]
});
|
Property:field
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { field: 'Close' }]
});
|
| Slow period for MACD indicator |
Property:shortPeriod
</br>
</br>
$("#container").ejChart({
indicators: [ { shortPeriod: 12 }]
});
|
Property:slowPeriod
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { slowPeriod: 12 }]
});
|
| Fast period for MACD indicator |
Property:longPeriod
</br>
</br>
$("#container").ejChart({
indicators: [ { longPeriod: 26 }]
});
|
Property:fastPeriod
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { fastPeriod: 26 }]
});
|
| Line style for MACD indicator |
Property:macdLine
</br>
</br>
$("#container").ejChart({
indicators: [ { macdLine: { width: 2, fill: 'red' } }]
});
|
Property:fastPeriod
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { macdLine: { width: 2, color: 'red' } }]
});
|
| Type of MACD indicator |
Property:macdType
</br>
</br>
$("#container").ejChart({
indicators: [ { macdType: 'both' }]
});
|
Property:fastPeriod
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { macdType: 'Both' }]
});
|
| Color of the positive bars in Macd indicators | Not applicable |
Property:macdPositiveColor
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { macdPositiveColor: 'red' }]
});
|
| Color of the negative bars in Macd indicators | Not applicable |
Property:macdNegativeColor
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { macdNegativeColor: 'red' }]
});
|
| Color for Bollinger bands | Not applicable |
Property:bandColor
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { bandColor: 'red' }]
});
|
| Appearance of upper line in indicator |
Property:upperLine
</br>
</br>
$("#container").ejChart({
indicators: [ { upperLine: { fill: '#EECCAA', width: 2 } }]
});
|
Property:upperLine
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { upperLine: { type: 'Smooth', color: '#FFEEFF', width: 2, dashArray: '10,5' } }]
});
|
| Appearance of lower line in indicator |
Property:lowerLine
</br>
</br>
$("#container").ejChart({
indicators: [ { lowerLine: { fill: '#EECCAA', width: 2 } }]
});
|
Property:lowerLine
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { lowerLine: { type: 'Smooth', color: '#FFEEFF', width: 2, dashArray: '10,5' } }]
});
|
| Appearance of period line in indicator |
Property:periodLine
</br>
</br>
$("#container").ejChart({
indicators: [ { periodLine: { fill: '#EECCAA', width: 2 } }]
});
|
Property:lowerLine
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { lowerLine: { type: 'Smooth', color: '#FFEEFF', width: 2, dashArray: '10,5' } }]
});
|
| Name of the series for which indicator has to be drawn. |
Property:seriesName
</br>
</br>
$("#container").ejChart({
indicators: [ { seriesName: '' }]
});
|
Property:lowerLine
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { seriesName: '' }]
});
|
| Options to customize the histogram in MACD indicator |
Property:seriesName
</br>
</br>
$("#container").ejChart({
indicators: [ { histogram: { } }]
});
|
Not applicable |
| Enabling animation |
Property:enableAnimation
</br>
</br>
$("#container").ejChart({
indicators: [ { enableAnimation: true }]
});
|
Property:animation.enable
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { animation: { enable: true }]
});
|
| Animation duration |
Property:animationDuration
</br>
</br>
$("#container").ejChart({
indicators: [ { animationDuration: 3000 }]
});
|
Property:animation.duration
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { animation: { duration: 3000 }]
});
|
| Tooltip |
Property:tooltip
</br>
</br>
$("#container").ejChart({
indicators: [ { tooltip: { visible: true } }]
});
|
Not applicable |
| Trigger value of MACD indicator. |
Property:trigger
</br>
</br>
$("#container").ejChart({
indicators: [ { trigger: 14 }]
});
|
Not applicable |
| Fill color for indicator |
Property:fill
</br>
</br>
$("#container").ejChart({
indicators: [ { fill: '#EEDDCC' }]
});
|
Property:animation.enable
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { fill: 'red' }]
});
|
| Width for indicator |
Property:width
</br>
</br>
$("#container").ejChart({
indicators: [ { width: 2 }]
});
|
Property:width
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { width: 3 }]
});
|
| xAxis Name of indicator |
Property:xAxisName
</br>
</br>
$("#container").ejChart({
indicators: [ { xAxisName: '' }]
});
|
Property:xAxisName
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { xAxisName: '' }]
});
|
| yAxis Name of indicator |
Property:yAxisName
</br>
</br>
$("#container").ejChart({
indicators: [ { yAxisName: '' }]
});
|
Property:yAxisName
</br>
</br>
let chart: Chart = new Chart({
indicators: [ { yAxisName: '' }]
});
|
| Visibility of indicator |
Property:visibility
</br>
</br>
$("#container").ejChart({
indicators: [ { visibility: true }]
});
|
Not applicable |
| 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: Chart = new Chart({
legendSettings: { visible: true }
});
|
| Legend height |
Property:size.height
</br>
</br>
$("#container").ejChart({
legend: { size : { height: 50 } }
});
|
Property:height
</br>
</br>
let chart: Chart = new Chart({
legendSettings: { height: '30' }
});
|
| Legend width |
Property:size.width
</br>
</br>
$("#container").ejChart({
legend: { size: { width: 20 } }
});
|
Property:width
</br>
</br>
let chart: Chart = new Chart({
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: Chart = new Chart({
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: Chart = new Chart({
legendSettings: { position: 'Top' }
});
|
| Legend padding | Not applicable |
Property:padding
</br>
</br>
let chart: Chart = new Chart({
legendSettings: { padding: 8 }
});
|
| Legend alignment |
Property:position
</br>
</br>
$("#container").ejChart({
legend: { alignment: 'center' }
});
|
Property:position
</br>
</br>
let chart: Chart = new Chart({
legendSettings: { alignment: 'Center' }
});
|
| text style for legend |
Property:font
</br>
</br>
$("#container").ejChart({
legend: { font: { fontFamily: '', fontWeight: '400', fontStyle: 'italic', size: '12px' } }
});
|
Property:textStyle
</br>
</br>
let chart: Chart = new Chart({
legendSettings: { textStyle: { size: '12px' , 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: Chart = new Chart({
legendSettings: { shapeHeight: 20 }
});
|
| shape width of legend |
Property:itemStyle.width
</br>
</br>
$("#container").ejChart({
legend: { itemStyle: { width: 20 } }
});
|
Property:shapeWidth
</br>
</br>
let chart: Chart = new Chart({
legendSettings: { shapeWidth: 20 }
});
|
| shape width of legend |
Property:itemStyle.width
</br>
</br>
$("#container").ejChart({
legend: { itemStyle: { width: 20 } }
});
|
Property:shapeWidth
</br>
</br>
let chart: Chart = new Chart({
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: Chart = new Chart({
legendSettings: { shapePadding: 20 }
});
|
| Background of legend |
Property:background
</br>
</br>
$("#container").ejChart({
legend: { background: 'transparent' }
});
|
Property:backgorund
</br>
</br>
let chart: Chart = new Chart({
legendSettings: { background: 'transparent' }
});
|
| Opacity of legend |
Property:opacity
</br>
</br>
$("#container").ejChart({
legend: { opacity: 0.3 }
});
|
Property:opacity
</br>
</br>
let chart: Chart = new Chart({
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: Chart = new Chart({
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 Chart({
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 |
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Alternate grid band |
Property:alternateGridBand
</br>
</br>
$("#container").ejChart({
primaryXAxis: { alternateGridBand: { even: { fill: 'red }}}
});
|
Not applicable |
| Axis line cross value |
Property:crossesAt
</br>
</br>
$("#container").ejChart({
primaryXAxis: { crossesAt: 0 }
});
|
Property:crossesAt
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { crossesAt: 4}
});
chart.appendTo('#chart');
|
| axis name with which the axis line has to be crossed |
Property:crossesInAxis
</br>
</br>
$("#container").ejChart({
primaryXAxis: { crossesInAxis: '' }
});
|
Property:crossesInAxis
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { crossesInAxis: '' }
});
chart.appendTo('#chart');
|
| axis elements placed with axis line |
Property:showNextToAxisLine
</br>
</br>
$("#container").ejChart({
primaryXAxis: { showNextToAxisLine : true }
});
|
Property:placeNextToAxisLine
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { placeNextToAxisLine: '' }
});
chart.appendTo('#chart');
|
| axis line style |
Property:axisLine.color
</br>
</br>
$("#container").ejChart({
primaryXAxis: { axisLine: { color : 'red' } }
});
|
Property:lineStyle.color
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { lineStyle: { color: 'black' } }
});
chart.appendTo('#chart');
|
| axis line dashArray |
Property:axisLine.color
</br>
</br>
$("#container").ejChart({
primaryXAxis: { axisLine: { dashArray : '10, 5' } }
});
|
Property:lineStyle.dashArray
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { lineStyle: { dashArray: '10, 5' } }
});
chart.appendTo('#chart');
|
| Offset for axis |
Property:axisLine.offset
</br>
</br>
$("#container").ejChart({
primaryXAxis: { axisLine: { offset : 10 } }
});
|
Property:plotOffset
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { plotOffset: 10 }
});
chart.appendTo('#chart');
|
| Visible of an axis |
Property:axisLine.offset
</br>
</br>
$("#container").ejChart({
primaryXAxis: { axisLine: { visible : false } }
});
|
Property:visible
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { visible: false }
});
chart.appendTo('#chart');
|
| Width of an axis |
Property:axisLine.width
</br>
</br>
$("#container").ejChart({
primaryXAxis: { axisLine: { width : 2 } }
});
|
Property:lineStyle.width
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { lineStyle: { width: 3 } }
});
chart.appendTo('#chart');
|
| Column index of an axis |
Property:columnIndex
</br>
</br>
$("#container").ejChart({
primaryXAxis: { columnIndex: 2 }
});
|
Property:columnIndex
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { columnIndex: 2 }
});
chart.appendTo('#chart');
|
| span of an axis to place horizontally or vertically |
Property:columnSpan
</br>
</br>
$("#container").ejChart({
primaryXAxis: { columnIndex: 2 }
});
|
Property:span
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { span: 2 }
});
chart.appendTo('#chart');
|
| Crosshair label of an axis |
Property:crossHairLabel.visible
</br>
</br>
$("#container").ejChart({
primaryXAxis: { crossHairLabel: { visible: true }}
});
|
Property:crossHairTooltip.enable
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { crossHairTooltip: { enable: true }}
});
chart.appendTo('#chart');
|
| Crosshair label color of an axis | Not applicable |
Property:crossHairTooltip.fill
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { crossHairTooltip: { fill: 'red' }}
});
chart.appendTo('#chart');
|
| Crosshair label text style | Not applicable |
Property:crossHairTooltip.textStyle
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { crossHairTooltip: { textStyle: { } }}
});
chart.appendTo('#chart');
|
| Desired interval count for primaryXAxis |
Property:desiredIntervals
</br>
</br>
$("#container").ejChart({
primaryXAxis: { desiredIntervals: 4}
});
|
Property:desiredIntervals
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { desiredIntervals: 4 }
});
chart.appendTo('#chart');
|
| Edges primaryXAxis |
Property:edgeLabelPlacement
</br>
</br>
$("#container").ejChart({
primaryXAxis: { edgeLabelPlacement: 'none' }
});
|
Property:edgeLabelPlacement
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { edgeLabelPlacement: 'Shift' }
});
chart.appendTo('#chart');
|
| Enables trim for axis labels |
Property:enableTrim
</br>
</br>
$("#container").ejChart({
primaryXAxis: { enableTrim: true }
});
|
Property:enableTrim
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { enableTrim: true }
});
chart.appendTo('#chart');
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property:enableAutoIntervalOnZooming
</br>
</br>
$("#container").ejChart({
primaryXAxis: { enableAutoIntervalOnZooming: true }
});
|
Property:enableAutoIntervalOnZooming
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { enableAutoIntervalOnZooming: true }
});
chart.appendTo('#chart');
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property:enableAutoIntervalOnZooming
</br>
</br>
$("#container").ejChart({
primaryXAxis: { enableAutoIntervalOnZooming: true }
});
|
Property:enableAutoIntervalOnZooming
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { enableAutoIntervalOnZooming: true }
});
chart.appendTo('#chart');
|
| Font style for primaryXAxis |
Property:font
</br>
</br>
$("#container").ejChart({
primaryXAxis: { font: { fontFamily: 'Calibri', fontStyle: 'italic', fontWeight: '', opacity: 0.5, size: 12} }
});
|
Property:titleStyle
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { titleStyle: { } }
});
chart.appendTo('#chart');
|
| Indexed for category axis |
Property:isIndexed
</br>
</br>
$("#container").ejChart({
primaryXAxis: { isIndexed: true }
});
|
Property:isIndexed
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { isIndexed: true }
});
chart.appendTo('#chart');
|
| Interval type for date time axis |
Property:intervalType
</br>
</br>
$("#container").ejChart({
primaryXAxis: { intervalType}: 'Auto' }
});
|
Property:intervalType
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { intervalType: 'Auto }
});
chart.appendTo('#chart');
|
| Inversed axis |
Property:isInversed
</br>
</br>
$("#container").ejChart({
primaryXAxis: { isInversed: true }
});
|
Property:isInversed
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { isInversed: true }
});
chart.appendTo('#chart');
|
| Custom label format |
Property:labelFormat
</br>
</br>
$("#container").ejChart({
primaryXAxis: { labelFormat: '{value}K' }
});
|
Property:labelFormat
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { labelFormat: '{value}K' }
});
chart.appendTo('#chart');
|
| labelIntersectAction |
Property:labelIntersectAction
</br>
</br>
$("#container").ejChart({
primaryXAxis: { labelIntersectAction: 'trim' }
});
|
Property:labelIntersectAction
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { labelIntersectAction: 'Trim' }
});
chart.appendTo('#chart');
|
| labelPosition |
Property:labelPosition
</br>
</br>
$("#container").ejChart({
primaryXAxis: { labelPosition: 'inside' }
});
|
Property:labelPosition
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { labelPosition: 'Inside' }
});
chart.appendTo('#chart');
|
| labelPlacement for category axis |
Property:labelPlacement
</br>
</br>
$("#container").ejChart({
primaryXAxis: { labelPlacement: 'onTicks' }
});
|
Property:labelPlacement
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { labelPlacement: 'OnTicks' }
});
chart.appendTo('#chart');
|
| Axis label alignment |
Property:alignment
</br>
</br>
$("#container").ejChart({
primaryXAxis: { alignment: 'center' }
});
|
Not Applicable |
| Rotation of axis labels |
Property:labelRotation
</br>
</br>
$("#container").ejChart({
primaryXAxis: { labelRotation: 45 }
});
|
Property:labelRotation
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { labelRotation: 45 }
});
chart.appendTo('#chart');
|
| Log base value for logarithmic axis |
Property:logBase
</br>
</br>
$("#container").ejChart({
primaryXAxis: { logBase: 10 }
});
|
Property:labelRotation
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { logBase: 10 }
});
chart.appendTo('#chart');
|
| Major grid line |
Property:majorGridLines.visible
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorGridLines: { visible: true} }
});
|
Not Applicable |
| Width of MajorGridLines |
Property:majorGridLines.width
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorGridLines: { width: 2} }
});
|
Property:majorGridLines.width
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { majorGridLines: { width: 2} }
});
chart.appendTo('#chart');
|
| Color of MajorGridLines |
Property:majorGridLines.color
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorGridLines: { color: 'black' } }
});
|
Property:majorGridLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { majorGridLines: { color: 'black' } }
});
chart.appendTo('#chart');
|
| DashArray of MajorGridLines |
Property:majorGridLines.dashArray
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorGridLines: { dashArray: 'black' } }
});
|
Property:majorGridLines.dashArray
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { majorGridLines: { dashArray: 'black' } }
});
chart.appendTo('#chart');
|
| Opacity of major grid line |
Property:majorGridLines.opacity
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorGridLines: { opacity: true} }
});
|
Not Applicable |
| Major Tick line |
Property:majorTickLines.visible
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorTickLines: { visible: true} }
});
|
Not Applicable |
| Width of MajorTickLines |
Property:majorTickLines.width
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorTickLines: { width: 2} }
});
|
Property:majorTickLines.width
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { majorTickLines: { width: 2} }
});
chart.appendTo('#chart');
|
| Height of MajorTickLines |
Property:majorTickLines.size
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorTickLines: { size: 2} }
});
|
Property:majorTickLines.height
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { majorTickLines: { height: 2} }
});
chart.appendTo('#chart');
|
| Color of MajorTickLines |
Property:majorTickLines.color
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorTickLines: { color: 'black' } }
});
|
Property:majorTickLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { majorTickLines: { color: 'black' } }
});
chart.appendTo('#chart');
|
| Opacity of major Tick line |
Property:majorTickLines.opacity
</br>
</br>
$("#container").ejChart({
primaryXAxis: { majorTickLines: { opacity: true} }
});
|
Not Applicable |
| maximum labels of primaryXAxis |
Property:maximumLabels
</br>
</br>
$("#container").ejChart({
primaryXAxis: { maximumLabels: 5 }
});
|
Property:maximumLabels
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { maximumLabels: 4 }
});
chart.appendTo('#chart');
|
| maximum labels width of primaryXAxis to trim |
Property:maximumLabelWidth
</br>
</br>
$("#container").ejChart({
primaryXAxis: { maximumLabelWidth: 40 }
});
|
Property:maximumLabelWidth
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { maximumLabelWidth: 4 }
});
chart.appendTo('#chart');
|
| minor grid line |
Property:minorGridLines.visible
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorGridLines: { visible: true} }
});
|
Not Applicable |
| Width of minorGridLines |
Property:minorGridLines.width
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorGridLines: { width: 2} }
});
|
Property:minorGridLines.width
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { minorGridLines: { width: 2} }
});
chart.appendTo('#chart');
|
| Color of minorGridLines |
Property:minorGridLines.color
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorGridLines: { color: 'black' } }
});
|
Property:minorGridLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { minorGridLines: { color: 'black' } }
});
chart.appendTo('#chart');
|
| DashArray of minorGridLines |
Property:minorGridLines.dashArray
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorGridLines: { dashArray: 'black' } }
});
|
Property:minorGridLines.dashArray
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { minorGridLines: { dashArray: 'black' } }
});
chart.appendTo('#chart');
|
| Opacity of minor grid line |
Property:minorGridLines.opacity
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorGridLines: { opacity: true} }
});
|
Not Applicable |
| minor Tick line |
Property:minorTickLines.visible
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorTickLines: { visible: true} }
});
|
Not Applicable |
| Width of minorTickLines |
Property:minorTickLines.width
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorTickLines: { width: 2} }
});
|
Property:minorTickLines.width
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { minorTickLines: { width: 2} }
});
chart.appendTo('#chart');
|
| Height of minorTickLines |
Property:minorTickLines.size
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorTickLines: { size: 2} }
});
|
Property:minorTickLines.height
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { minorTickLines: { height: 2} }
});
chart.appendTo('#chart');
|
| Color of minorTickLines |
Property:minorTickLines.color
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorTickLines: { color: 'black' } }
});
|
Property:minorTickLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { minorTickLines: { color: 'black' } }
});
chart.appendTo('#chart');
|
| Opacity of minor Tick line |
Property:minorTickLines.opacity
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorTickLines: { opacity: true} }
});
|
Not Applicable |
| Minor ticks per interval of primaryXAxis |
Property:minorTicksPerInterval
</br>
</br>
$("#container").ejChart({
primaryXAxis: { minorTicksPerInterval: 4 }
});
|
Property:minorTickLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { minorTicksPerInterval: 4 }
});
chart.appendTo('#chart');
|
| name of the primaryXAxis |
Property:name
</br>
</br>
$("#container").ejChart({
primaryXAxis: { name: 'primaryXAxis' }
});
|
Property:name
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { name: 'primaryXAxis' }
});
chart.appendTo('#chart');
|
| Orientation of primaryXAxis |
Property:orientation
</br>
</br>
$("#container").ejChart({
primaryXAxis: { orientation: 'Vertical' }
});
|
Not Applicable |
| Plot offset for primaryXAxis |
Property:plotOffset
</br>
</br>
$("#container").ejChart({
primaryXAxis: { plotOffset: 0 }
});
|
Property:plotOffset
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { plotOffset: 0 }
});
chart.appendTo('#chart');
|
| minimum for primaryXAxis |
Property:range.minimum
</br>
</br>
$("#container").ejChart({
primaryXAxis: { range: { minimum: 10 }}
});
|
Property:minimum
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { minimum: 23 }
});
chart.appendTo('#chart');
|
| maximum for primaryXAxis |
Property:range.maximum
</br>
</br>
$("#container").ejChart({
primaryXAxis: { range: { maximum: 10 }}
});
|
Property:maximum
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { maximum: 23 }
});
chart.appendTo('#chart');
|
| interval for primaryXAxis |
Property:range.interval
</br>
</br>
$("#container").ejChart({
primaryXAxis: { range: { interval: 1 }}
});
|
Property:interval
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { interval: 2 }
});
chart.appendTo('#chart');
|
| RangePadding for primaryXAxis |
Property:rangePadding
</br>
</br>
$("#container").ejChart({
primaryXAxis: { rangePadding: 'None' }}
});
|
Property:rangePadding
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { rangePadding: 'None' }
});
chart.appendTo('#chart');
|
| Rounding Places in primaryXAxis |
Property:roundingPlaces
</br>
</br>
$("#container").ejChart({
primaryXAxis: { roundingPlaces: 3 }
});
|
Property:labelFormat
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { labelFormat: 'n3' }
});
chart.appendTo('#chart');
|
| ScrollBar settings of primaryXAxis |
Property:scrollbarSettings
</br>
</br>
$("#container").ejChart({
primaryXAxis: { scrollbarSettings : { } }
});
|
Not Applicable |
| TickPosition in primaryXAxis |
Property:tickLinesPosition
</br>
</br>
$("#container").ejChart({
primaryXAxis: { tickLinesPosition: 'Inside' }
});
|
Property:tickPosition
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { tickPosition: 'Inside' }
});
chart.appendTo('#chart');
|
| valueType of primaryXAxis |
Property:valueType
</br>
</br>
$("#container").ejChart({
primaryXAxis: { valueType: 'DateTime' }
});
|
Property:valueType
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { valueType: 'DateTime' }
});
chart.appendTo('#chart');
|
| visible of primaryXAxis |
Property:visible
</br>
</br>
$("#container").ejChart({
primaryXAxis: { visible: true }
});
|
Property:visible
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { visible: true }
});
chart.appendTo('#chart');
|
| zoomFactor of primaryXAxis |
Property:zoomFactor
</br>
</br>
$("#container").ejChart({
primaryXAxis: { zoomFactor: 0.3 }
});
|
Property:zoomFactor
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { zoomFactor: 0.3 }
});
chart.appendTo('#chart');
|
| zoomPosition of primaryXAxis |
Property:zoomPosition
</br>
</br>
$("#container").ejChart({
primaryXAxis: { zoomPosition: 0.3 }
});
|
Property:zoomPosition
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { zoomPosition: 0.3 }
});
chart.appendTo('#chart');
|
| labelBorder of primaryXAxis |
Property:labelBorder
</br>
</br>
$("#container").ejChart({
primaryXAxis: { labelBorder: { color: 'red', width: 2} }
});
|
Property:border
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { border: { color: 'red', width: 3 } }
});
chart.appendTo('#chart');
|
| title of primaryXAxis |
Property:title.text
</br>
</br>
$("#container").ejChart({
primaryXAxis: { title: { text: 'Chart title' } }
});
|
Property:title
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { title: 'Chart title' }
});
chart.appendTo('#chart');
|
| StripLine of primaryXAxis |
Property:stripLine
</br>
</br>
$("#container").ejChart({
primaryXAxis: { stripLine: [] }
});
|
Property:stripLines
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [] }
});
chart.appendTo('#chart');
|
| Multilevel labels of primaryXAxis |
Property:multiLevelLabels
</br>
</br>
$("#container").ejChart({
primaryXAxis: { multiLevelLabels: [] }
});
|
Property:multiLevelLabels
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [] }
});
chart.appendTo('#chart');
|
| skeleton for an axes | Not Applicable |
Property:skeleton
</br>
</br>
let chart: Chart = new Chart({
axes: [ { skeleton: 'yMd' }]
});
chart.appendTo('#chart');
|
| skeleton type for an axes | Not Applicable |
Property:skeletonType
</br>
</br>
let chart: Chart = new Chart({
axes: [ { skeletonType: 'DateTime' }]
});
chart.appendTo('#chart');
|
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Alternate grid band |
Property:alternateGridBand
</br>
</br>
$("#container").ejChart({
primaryYAxis: { alternateGridBand: { even: { fill: 'red }}}
});
|
Not applicable |
| Axis line cross value |
Property:crossesAt
</br>
</br>
$("#container").ejChart({
primaryYAxis: { crossesAt: 0 }
});
|
Property:crossesAt
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { crossesAt: 4}
});
chart.appendTo('#chart');
|
| axis name with which the axis line has to be crossed |
Property:crossesInAxis
</br>
</br>
$("#container").ejChart({
primaryYAxis: { crossesInAxis: '' }
});
|
Property:crossesInAxis
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { crossesInAxis: '' }
});
chart.appendTo('#chart');
|
| axis elements placed with axis line |
Property:showNextToAxisLine
</br>
</br>
$("#container").ejChart({
primaryYAxis: { showNextToAxisLine : true }
});
|
Property:placeNextToAxisLine
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { placeNextToAxisLine: '' }
});
chart.appendTo('#chart');
|
| axis line style |
Property:axisLine.color
</br>
</br>
$("#container").ejChart({
primaryYAxis: { axisLine: { color : 'red' } }
});
|
Property:lineStyle.color
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { lineStyle: { color: 'black' } }
});
chart.appendTo('#chart');
|
| axis line dashArray |
Property:axisLine.color
</br>
</br>
$("#container").ejChart({
primaryYAxis: { axisLine: { dashArray : '10, 5' } }
});
|
Property:lineStyle.dashArray
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { lineStyle: { dashArray: '10, 5' } }
});
chart.appendTo('#chart');
|
| Offset for axis |
Property:axisLine.offset
</br>
</br>
$("#container").ejChart({
primaryYAxis: { axisLine: { offset : 10 } }
});
|
Property:plotOffset
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { plotOffset: 10 }
});
chart.appendTo('#chart');
|
| Visible of an axis |
Property:axisLine.offset
</br>
</br>
$("#container").ejChart({
primaryYAxis: { axisLine: { visible : false } }
});
|
Property:visible
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { visible: false }
});
chart.appendTo('#chart');
|
| Width of an axis |
Property:axisLine.width
</br>
</br>
$("#container").ejChart({
primaryYAxis: { axisLine: { width : 2 } }
});
|
Property:lineStyle.width
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { lineStyle: { width: 3 } }
});
chart.appendTo('#chart');
|
| Column index of an axis |
Property:columnIndex
</br>
</br>
$("#container").ejChart({
primaryYAxis: { columnIndex: 2 }
});
|
Property:columnIndex
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { columnIndex: 2 }
});
chart.appendTo('#chart');
|
| span of an axis to place horizontally or vertically |
Property:columnSpan
</br>
</br>
$("#container").ejChart({
primaryYAxis: { columnIndex: 2 }
});
|
Property:span
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { span: 2 }
});
chart.appendTo('#chart');
|
| Crosshair label of an axis |
Property:crossHairLabel.visible
</br>
</br>
$("#container").ejChart({
primaryYAxis: { crossHairLabel: { visible: true }}
});
|
Property:crossHairTooltip.enable
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { crossHairTooltip: { enable: true }}
});
chart.appendTo('#chart');
|
| Crosshair label color of an axis | Not applicable |
Property:crossHairTooltip.fill
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { crossHairTooltip: { fill: 'red' }}
});
chart.appendTo('#chart');
|
| Crosshair label text style | Not applicable |
Property:crossHairTooltip.textStyle
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { crossHairTooltip: { textStyle: { } }}
});
chart.appendTo('#chart');
|
| Desired interval count for primaryYAxis |
Property:desiredIntervals
</br>
</br>
$("#container").ejChart({
primaryYAxis: { desiredIntervals: 4}
});
|
Property:desiredIntervals
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { desiredIntervals: 4 }
});
chart.appendTo('#chart');
|
| Edges primaryYAxis |
Property:edgeLabelPlacement
</br>
</br>
$("#container").ejChart({
primaryYAxis: { edgeLabelPlacement: 'none' }
});
|
Property:edgeLabelPlacement
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { edgeLabelPlacement: 'Shift' }
});
chart.appendTo('#chart');
|
| Enables trim for axis labels |
Property:enableTrim
</br>
</br>
$("#container").ejChart({
primaryYAxis: { enableTrim: true }
});
|
Property:enableTrim
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { enableTrim: true }
});
chart.appendTo('#chart');
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property:enableAutoIntervalOnZooming
</br>
</br>
$("#container").ejChart({
primaryYAxis: { enableAutoIntervalOnZooming: true }
});
|
Property:enableAutoIntervalOnZooming
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { enableAutoIntervalOnZooming: true }
});
chart.appendTo('#chart');
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property:enableAutoIntervalOnZooming
</br>
</br>
$("#container").ejChart({
primaryYAxis: { enableAutoIntervalOnZooming: true }
});
|
Property:enableAutoIntervalOnZooming
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { enableAutoIntervalOnZooming: true }
});
chart.appendTo('#chart');
|
| Font style for primaryYAxis |
Property:font
</br>
</br>
$("#container").ejChart({
primaryYAxis: { font: { fontFamily: 'Calibri', fontStyle: 'italic', fontWeight: '', opacity: 0.5, size: 12} }
});
|
Property:titleStyle
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { titleStyle: { } }
});
chart.appendTo('#chart');
|
| Indexed for category axis |
Property:isIndexed
</br>
</br>
$("#container").ejChart({
primaryYAxis: { isIndexed: true }
});
|
Property:isIndexed
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { isIndexed: true }
});
chart.appendTo('#chart');
|
| Interval type for date time axis |
Property:intervalType
</br>
</br>
$("#container").ejChart({
primaryYAxis: { intervalType}: 'Auto' }
});
|
Property:intervalType
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { intervalType: 'Auto }
});
chart.appendTo('#chart');
|
| Inversed axis |
Property:isInversed
</br>
</br>
$("#container").ejChart({
primaryYAxis: { isInversed: true }
});
|
Property:isInversed
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { isInversed: true }
});
chart.appendTo('#chart');
|
| Custom label format |
Property:labelFormat
</br>
</br>
$("#container").ejChart({
primaryYAxis: { labelFormat: '{value}K' }
});
|
Property:labelFormat
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { labelFormat: '{value}K' }
});
chart.appendTo('#chart');
|
| labelIntersectAction |
Property:labelIntersectAction
</br>
</br>
$("#container").ejChart({
primaryYAxis: { labelIntersectAction: 'trim' }
});
|
Property:labelIntersectAction
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { labelIntersectAction: 'Trim' }
});
chart.appendTo('#chart');
|
| labelPosition |
Property:labelPosition
</br>
</br>
$("#container").ejChart({
primaryYAxis: { labelPosition: 'inside' }
});
|
Property:labelPosition
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { labelPosition: 'Inside' }
});
chart.appendTo('#chart');
|
| labelPlacement for category axis |
Property:labelPlacement
</br>
</br>
$("#container").ejChart({
primaryYAxis: { labelPlacement: 'onTicks' }
});
|
Property:labelPlacement
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { labelPlacement: 'OnTicks' }
});
chart.appendTo('#chart');
|
| Axis label alignment |
Property:alignment
</br>
</br>
$("#container").ejChart({
primaryYAxis: { alignment: 'center' }
});
|
Not Applicable |
| Rotation of axis labels |
Property:labelRotation
</br>
</br>
$("#container").ejChart({
primaryYAxis: { labelRotation: 45 }
});
|
Property:labelRotation
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { labelRotation: 45 }
});
chart.appendTo('#chart');
|
| Log base value for logarithmic axis |
Property:logBase
</br>
</br>
$("#container").ejChart({
primaryYAxis: { logBase: 10 }
});
|
Property:labelRotation
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { logBase: 10 }
});
chart.appendTo('#chart');
|
| Major grid line |
Property:majorGridLines.visible
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorGridLines: { visible: true} }
});
|
Not Applicable |
| Width of MajorGridLines |
Property:majorGridLines.width
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorGridLines: { width: 2} }
});
|
Property:majorGridLines.width
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { majorGridLines: { width: 2} }
});
chart.appendTo('#chart');
|
| Color of MajorGridLines |
Property:majorGridLines.color
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorGridLines: { color: 'black' } }
});
|
Property:majorGridLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { majorGridLines: { color: 'black' } }
});
chart.appendTo('#chart');
|
| DashArray of MajorGridLines |
Property:majorGridLines.dashArray
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorGridLines: { dashArray: 'black' } }
});
|
Property:majorGridLines.dashArray
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { majorGridLines: { dashArray: 'black' } }
});
chart.appendTo('#chart');
|
| Opacity of major grid line |
Property:majorGridLines.opacity
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorGridLines: { opacity: true} }
});
|
Not Applicable |
| Major Tick line |
Property:majorTickLines.visible
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorTickLines: { visible: true} }
});
|
Not Applicable |
| Width of MajorTickLines |
Property:majorTickLines.width
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorTickLines: { width: 2} }
});
|
Property:majorTickLines.width
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { majorTickLines: { width: 2} }
});
chart.appendTo('#chart');
|
| Height of MajorTickLines |
Property:majorTickLines.size
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorTickLines: { size: 2} }
});
|
Property:majorTickLines.height
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { majorTickLines: { height: 2} }
});
chart.appendTo('#chart');
|
| Color of MajorTickLines |
Property:majorTickLines.color
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorTickLines: { color: 'black' } }
});
|
Property:majorTickLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { majorTickLines: { color: 'black' } }
});
chart.appendTo('#chart');
|
| Opacity of major Tick line |
Property:majorTickLines.opacity
</br>
</br>
$("#container").ejChart({
primaryYAxis: { majorTickLines: { opacity: true} }
});
|
Not Applicable |
| maximum labels of primaryYAxis |
Property:maximumLabels
</br>
</br>
$("#container").ejChart({
primaryYAxis: { maximumLabels: 5 }
});
|
Property:maximumLabels
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { maximumLabels: 4 }
});
chart.appendTo('#chart');
|
| maximum labels width of primaryYAxis to trim |
Property:maximumLabelWidth
</br>
</br>
$("#container").ejChart({
primaryYAxis: { maximumLabelWidth: 40 }
});
|
Property:maximumLabelWidth
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { maximumLabelWidth: 4 }
});
chart.appendTo('#chart');
|
| minor grid line |
Property:minorGridLines.visible
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorGridLines: { visible: true} }
});
|
Not Applicable |
| Width of minorGridLines |
Property:minorGridLines.width
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorGridLines: { width: 2} }
});
|
Property:minorGridLines.width
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { minorGridLines: { width: 2} }
});
chart.appendTo('#chart');
|
| Color of minorGridLines |
Property:minorGridLines.color
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorGridLines: { color: 'black' } }
});
|
Property:minorGridLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { minorGridLines: { color: 'black' } }
});
chart.appendTo('#chart');
|
| DashArray of minorGridLines |
Property:minorGridLines.dashArray
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorGridLines: { dashArray: 'black' } }
});
|
Property:minorGridLines.dashArray
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { minorGridLines: { dashArray: 'black' } }
});
chart.appendTo('#chart');
|
| Opacity of minor grid line |
Property:minorGridLines.opacity
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorGridLines: { opacity: true} }
});
|
Not Applicable |
| minor Tick line |
Property:minorTickLines.visible
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorTickLines: { visible: true} }
});
|
Not Applicable |
| Width of minorTickLines |
Property:minorTickLines.width
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorTickLines: { width: 2} }
});
|
Property:minorTickLines.width
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { minorTickLines: { width: 2} }
});
chart.appendTo('#chart');
|
| Height of minorTickLines |
Property:minorTickLines.size
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorTickLines: { size: 2} }
});
|
Property:minorTickLines.height
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { minorTickLines: { height: 2} }
});
chart.appendTo('#chart');
|
| Color of minorTickLines |
Property:minorTickLines.color
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorTickLines: { color: 'black' } }
});
|
Property:minorTickLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { minorTickLines: { color: 'black' } }
});
chart.appendTo('#chart');
|
| Opacity of minor Tick line |
Property:minorTickLines.opacity
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorTickLines: { opacity: true} }
});
|
Not Applicable |
| Minor ticks per interval of primaryYAxis |
Property:minorTicksPerInterval
</br>
</br>
$("#container").ejChart({
primaryYAxis: { minorTicksPerInterval: 4 }
});
|
Property:minorTickLines.color
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { minorTicksPerInterval: 4 }
});
chart.appendTo('#chart');
|
| name of the primaryYAxis |
Property:name
</br>
</br>
$("#container").ejChart({
primaryYAxis: { name: 'primaryYAxis' }
});
|
Property:name
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { name: 'primaryYAxis' }
});
chart.appendTo('#chart');
|
| Orientation of primaryYAxis |
Property:orientation
</br>
</br>
$("#container").ejChart({
primaryYAxis: { orientation: 'Vertical' }
});
|
Not Applicable |
| Plot offset for primaryYAxis |
Property:plotOffset
</br>
</br>
$("#container").ejChart({
primaryYAxis: { plotOffset: 0 }
});
|
Property:plotOffset
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { plotOffset: 0 }
});
chart.appendTo('#chart');
|
| minimum for primaryYAxis |
Property:range.minimum
</br>
</br>
$("#container").ejChart({
primaryYAxis: { range: { minimum: 10 }}
});
|
Property:minimum
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { minimum: 23 }
});
chart.appendTo('#chart');
|
| maximum for primaryYAxis |
Property:range.maximum
</br>
</br>
$("#container").ejChart({
primaryYAxis: { range: { maximum: 10 }}
});
|
Property:maximum
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { maximum: 23 }
});
chart.appendTo('#chart');
|
| interval for primaryYAxis |
Property:range.interval
</br>
</br>
$("#container").ejChart({
primaryYAxis: { range: { interval: 1 }}
});
|
Property:interval
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { interval: 2 }
});
chart.appendTo('#chart');
|
| RangePadding for primaryYAxis |
Property:rangePadding
</br>
</br>
$("#container").ejChart({
primaryYAxis: { rangePadding: 'None' }}
});
|
Property:rangePadding
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { rangePadding: 'None' }
});
chart.appendTo('#chart');
|
| Rounding Places in primaryYAxis |
Property:roundingPlaces
</br>
</br>
$("#container").ejChart({
primaryYAxis: { roundingPlaces: 3 }
});
|
Property:labelFormat
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { labelFormat: 'n3' }
});
chart.appendTo('#chart');
|
| ScrollBar settings of primaryYAxis |
Property:scrollbarSettings
</br>
</br>
$("#container").ejChart({
primaryYAxis: { scrollbarSettings : { } }
});
|
Not Applicable |
| TickPosition in primaryYAxis |
Property:tickLinesPosition
</br>
</br>
$("#container").ejChart({
primaryYAxis: { tickLinesPosition: 'Inside' }
});
|
Property:tickPosition
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { tickPosition: 'Inside' }
});
chart.appendTo('#chart');
|
| valueType of primaryYAxis |
Property:valueType
</br>
</br>
$("#container").ejChart({
primaryYAxis: { valueType: 'DateTime' }
});
|
Property:valueType
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { valueType: 'DateTime' }
});
chart.appendTo('#chart');
|
| visible of primaryYAxis |
Property:visible
</br>
</br>
$("#container").ejChart({
primaryYAxis: { visible: true }
});
|
Property:visible
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { visible: true }
});
chart.appendTo('#chart');
|
| zoomFactor of primaryYAxis |
Property:zoomFactor
</br>
</br>
$("#container").ejChart({
primaryYAxis: { zoomFactor: 0.3 }
});
|
Property:zoomFactor
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { zoomFactor: 0.3 }
});
chart.appendTo('#chart');
|
| zoomPosition of primaryYAxis |
Property:zoomPosition
</br>
</br>
$("#container").ejChart({
primaryYAxis: { zoomPosition: 0.3 }
});
|
Property:zoomPosition
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { zoomPosition: 0.3 }
});
chart.appendTo('#chart');
|
| labelBorder of primaryYAxis |
Property:labelBorder
</br>
</br>
$("#container").ejChart({
primaryYAxis: { labelBorder: { color: 'red', width: 2} }
});
|
Property:border
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { border: { color: 'red', width: 3 } }
});
chart.appendTo('#chart');
|
| title of primaryYAxis |
Property:title.text
</br>
</br>
$("#container").ejChart({
primaryYAxis: { title: { text: 'Chart title' } }
});
|
Property:title
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { title: 'Chart title' }
});
chart.appendTo('#chart');
|
| StripLine of primaryYAxis |
Property:stripLine
</br>
</br>
$("#container").ejChart({
primaryYAxis: { stripLine: [] }
});
|
Property:stripLines
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { stripLines: [] }
});
chart.appendTo('#chart');
|
| Multilevel labels of primaryYAxis |
Property:multiLevelLabels
</br>
</br>
$("#container").ejChart({
primaryYAxis: { multiLevelLabels: [] }
});
|
Property:multiLevelLabels
</br>
</br>
let chart: Chart = new Chart({
primaryYAxis: { stripLines: [] }
});
chart.appendTo('#chart');
|
| skeleton for an axes | Not Applicable |
Property:skeleton
</br>
</br>
let chart: Chart = new Chart({
axes: [ { skeleton: 'yMd' }]
});
chart.appendTo('#chart');
|
| skeleton type for an axes | Not Applicable |
Property:skeletonType
</br>
</br>
let chart: Chart = new Chart({
axes: [ { skeletonType: 'DateTime' }]
});
chart.appendTo('#chart');
|
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Alternate grid band |
Property:alternateGridBand
</br>
</br>
$("#container").ejChart({
axes: [ { alternateGridBand: { even: { fill: 'red }}}]
});
|
Not applicable |
| Axis line cross value |
Property:crossesAt
</br>
</br>
$("#container").ejChart({
axes: [ { crossesAt: 0 }]
});
|
Property:crossesAt
</br>
</br>
let chart: Chart = new Chart({
axes: [ { crossesAt: 4}]
});
chart.appendTo('#chart');
|
| axis name with which the axis line has to be crossed |
Property:crossesInAxis
</br>
</br>
$("#container").ejChart({
axes: [ { crossesInAxis: '' }]
});
|
Property:crossesInAxis
</br>
</br>
let chart: Chart = new Chart({
axes: [ { crossesInAxis: '' }]
});
chart.appendTo('#chart');
|
| axis elements placed with axis line |
Property:showNextToAxisLine
</br>
</br>
$("#container").ejChart({
axes: [ { showNextToAxisLine : true }]
});
|
Property:placeNextToAxisLine
</br>
</br>
let chart: Chart = new Chart({
axes: [ { placeNextToAxisLine: '' }]
});
chart.appendTo('#chart');
|
| axis line style |
Property:axisLine.color
</br>
</br>
$("#container").ejChart({
axes: [ { axisLine: { color : 'red' } }]
});
|
Property:lineStyle.color
</br>
</br>
let chart: Chart = new Chart({
axes: [ { lineStyle: { color: 'black' } }]
});
chart.appendTo('#chart');
|
| axis line dashArray |
Property:axisLine.color
</br>
</br>
$("#container").ejChart({
axes: [ { axisLine: { dashArray : '10, 5' } }]
});
|
Property:lineStyle.dashArray
</br>
</br>
let chart: Chart = new Chart({
axes: [ { lineStyle: { dashArray: '10, 5' } }]
});
chart.appendTo('#chart');
|
| Offset for axis |
Property:axisLine.offset
</br>
</br>
$("#container").ejChart({
axes: [ { axisLine: { offset : 10 } }]
});
|
Property:plotOffset
</br>
</br>
let chart: Chart = new Chart({
axes: [ { plotOffset: 10 }]
});
chart.appendTo('#chart');
|
| Visible of an axis |
Property:axisLine.offset
</br>
</br>
$("#container").ejChart({
axes: [ { axisLine: { visible : false } }]
});
|
Property:visible
</br>
</br>
let chart: Chart = new Chart({
axes: [ { visible: false }]
});
chart.appendTo('#chart');
|
| Width of an axis |
Property:axisLine.width
</br>
</br>
$("#container").ejChart({
axes: [ { axisLine: { width : 2 } }]
});
|
Property:lineStyle.width
</br>
</br>
let chart: Chart = new Chart({
axes: [ { lineStyle: { width: 3 } }]
});
chart.appendTo('#chart');
|
| Column index of an axis |
Property:columnIndex
</br>
</br>
$("#container").ejChart({
axes: [ { columnIndex: 2 }]
});
|
Property:columnIndex
</br>
</br>
let chart: Chart = new Chart({
axes: [ { columnIndex: 2 }]
});
chart.appendTo('#chart');
|
| span of an axis to place horizontally or vertically |
Property:columnSpan
</br>
</br>
$("#container").ejChart({
axes: [ { columnIndex: 2 }]
});
|
Property:span
</br>
</br>
let chart: Chart = new Chart({
axes: [ { span: 2 }]
});
chart.appendTo('#chart');
|
| Crosshair label of an axis |
Property:crossHairLabel.visible
</br>
</br>
$("#container").ejChart({
axes: [ { crossHairLabel: { visible: true }}]
});
|
Property:crossHairTooltip.enable
</br>
</br>
let chart: Chart = new Chart({
axes: [ { crossHairTooltip: { enable: true }}]
});
chart.appendTo('#chart');
|
| Crosshair label color of an axis | Not applicable |
Property:crossHairTooltip.fill
</br>
</br>
let chart: Chart = new Chart({
axes: [ { crossHairTooltip: { fill: 'red' }}]
});
chart.appendTo('#chart');
|
| Crosshair label text style | Not applicable |
Property:crossHairTooltip.textStyle
</br>
</br>
let chart: Chart = new Chart({
axes: [ { crossHairTooltip: { textStyle: { } }}]
});
chart.appendTo('#chart');
|
| Desired interval count for primaryYAxis |
Property:desiredIntervals
</br>
</br>
$("#container").ejChart({
axes: [ { desiredIntervals: 4}]
});
|
Property:desiredIntervals
</br>
</br>
let chart: Chart = new Chart({
axes: [ { desiredIntervals: 4 }]
});
chart.appendTo('#chart');
|
| Edges primaryYAxis |
Property:edgeLabelPlacement
</br>
</br>
$("#container").ejChart({
axes: [ { edgeLabelPlacement: 'none' }]
});
|
Property:edgeLabelPlacement
</br>
</br>
let chart: Chart = new Chart({
axes: [ { edgeLabelPlacement: 'Shift' }]
});
chart.appendTo('#chart');
|
| Enables trim for axis labels |
Property:enableTrim
</br>
</br>
$("#container").ejChart({
axes: [ { enableTrim: true }]
});
|
Property:enableTrim
</br>
</br>
let chart: Chart = new Chart({
axes: [ { enableTrim: true }]
});
chart.appendTo('#chart');
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property:enableAutoIntervalOnZooming
</br>
</br>
$("#container").ejChart({
axes: [ { enableAutoIntervalOnZooming: true }]
});
|
Property:enableAutoIntervalOnZooming
</br>
</br>
let chart: Chart = new Chart({
axes: [ { enableAutoIntervalOnZooming: true }]
});
chart.appendTo('#chart');
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property:enableAutoIntervalOnZooming
</br>
</br>
$("#container").ejChart({
axes: [ { enableAutoIntervalOnZooming: true }]
});
|
Property:enableAutoIntervalOnZooming
</br>
</br>
let chart: Chart = new Chart({
axes: [ { enableAutoIntervalOnZooming: true }]
});
chart.appendTo('#chart');
|
| Font style for primaryYAxis |
Property:font
</br>
</br>
$("#container").ejChart({
axes: [ { font: { fontFamily: 'Calibri', fontStyle: 'italic', fontWeight: '', opacity: 0.5, size: 12} }]
});
|
Property:titleStyle
</br>
</br>
let chart: Chart = new Chart({
axes: [ { titleStyle: { } }]
});
chart.appendTo('#chart');
|
| Indexed for category axis |
Property:isIndexed
</br>
</br>
$("#container").ejChart({
axes: [ { isIndexed: true }]
});
|
Property:isIndexed
</br>
</br>
let chart: Chart = new Chart({
axes: [ { isIndexed: true }]
});
chart.appendTo('#chart');
|
| Interval type for date time axis |
Property:intervalType
</br>
</br>
$("#container").ejChart({
axes: [ { intervalType}: 'Auto' } ]
});
|
Property:intervalType
</br>
</br>
let chart: Chart = new Chart({
axes: [ { intervalType: 'Auto }]
});
chart.appendTo('#chart');
|
| Inversed axis |
Property:isInversed
</br>
</br>
$("#container").ejChart({
axes: [ { isInversed: true }]
});
|
Property:isInversed
</br>
</br>
let chart: Chart = new Chart({
axes: [ { isInversed: true }]
});
chart.appendTo('#chart');
|
| Custom label format |
Property:labelFormat
</br>
</br>
$("#container").ejChart({
axes: [ { labelFormat: '{value}K' }]
});
|
Property:labelFormat
</br>
</br>
let chart: Chart = new Chart({
axes: [ { labelFormat: '{value}K' }]
});
chart.appendTo('#chart');
|
| labelIntersectAction |
Property:labelIntersectAction
</br>
</br>
$("#container").ejChart({
axes: [ { labelIntersectAction: 'trim' }]
});
|
Property:labelIntersectAction
</br>
</br>
let chart: Chart = new Chart({
axes: [ { labelIntersectAction: 'Trim' }]
});
chart.appendTo('#chart');
|
| labelPosition |
Property:labelPosition
</br>
</br>
$("#container").ejChart({
axes: [ { labelPosition: 'inside' }]
});
|
Property:labelPosition
</br>
</br>
let chart: Chart = new Chart({
axes: [ { labelPosition: 'Inside' }]
});
chart.appendTo('#chart');
|
| labelPlacement for category axis |
Property:labelPlacement
</br>
</br>
$("#container").ejChart({
axes: [ { labelPlacement: 'onTicks' }]
});
|
Property:labelPlacement
</br>
</br>
let chart: Chart = new Chart({
axes: [ { labelPlacement: 'OnTicks' }]
});
chart.appendTo('#chart');
|
| Axis label alignment |
Property:alignment
</br>
</br>
$("#container").ejChart({
axes: [ { alignment: 'center' }]
});
|
Not Applicable |
| Rotation of axis labels |
Property:labelRotation
</br>
</br>
$("#container").ejChart({
axes: [ { labelRotation: 45 }]
});
|
Property:labelRotation
</br>
</br>
let chart: Chart = new Chart({
axes: [ { labelRotation: 45 }]
});
chart.appendTo('#chart');
|
| Log base value for logarithmic axis |
Property:logBase
</br>
</br>
$("#container").ejChart({
axes: [ { logBase: 10 }]
});
|
Property:labelRotation
</br>
</br>
let chart: Chart = new Chart({
axes: [ { logBase: 10 }]
});
chart.appendTo('#chart');
|
| Major grid line |
Property:majorGridLines.visible
</br>
</br>
$("#container").ejChart({
axes: [ { majorGridLines: { visible: true} }]
});
|
Not Applicable |
| Width of MajorGridLines |
Property:majorGridLines.width
</br>
</br>
$("#container").ejChart({
axes: [ { majorGridLines: { width: 2} }]
});
|
Property:majorGridLines.width
</br>
</br>
let chart: Chart = new Chart({
axes: [ { majorGridLines: { width: 2} }]
});
chart.appendTo('#chart');
|
| Color of MajorGridLines |
Property:majorGridLines.color
</br>
</br>
$("#container").ejChart({
axes: [ { majorGridLines: { color: 'black' } }]
});
|
Property:majorGridLines.color
</br>
</br>
let chart: Chart = new Chart({
axes: [ { majorGridLines: { color: 'black' } }]
});
chart.appendTo('#chart');
|
| DashArray of MajorGridLines |
Property:majorGridLines.dashArray
</br>
</br>
$("#container").ejChart({
axes: [ { majorGridLines: { dashArray: 'black' } }]
});
|
Property:majorGridLines.dashArray
</br>
</br>
let chart: Chart = new Chart({
axes: [ { majorGridLines: { dashArray: 'black' } }]
});
chart.appendTo('#chart');
|
| Opacity of major grid line |
Property:majorGridLines.opacity
</br>
</br>
$("#container").ejChart({
axes: [ { majorGridLines: { opacity: true} }]
});
|
Not Applicable |
| Major Tick line |
Property:majorTickLines.visible
</br>
</br>
$("#container").ejChart({
axes: [ { majorTickLines: { visible: true} }]
});
|
Not Applicable |
| Width of MajorTickLines |
Property:majorTickLines.width
</br>
</br>
$("#container").ejChart({
axes: [ { majorTickLines: { width: 2} }]
});
|
Property:majorTickLines.width
</br>
</br>
let chart: Chart = new Chart({
axes: [ { majorTickLines: { width: 2} }]
});
chart.appendTo('#chart');
|
| Height of MajorTickLines |
Property:majorTickLines.size
</br>
</br>
$("#container").ejChart({
axes: [ { majorTickLines: { size: 2} }]
});
|
Property:majorTickLines.height
</br>
</br>
let chart: Chart = new Chart({
axes: [ { majorTickLines: { height: 2} }]
});
chart.appendTo('#chart');
|
| Color of MajorTickLines |
Property:majorTickLines.color
</br>
</br>
$("#container").ejChart({
axes: [ { majorTickLines: { color: 'black' } }]
});
|
Property:majorTickLines.color
</br>
</br>
let chart: Chart = new Chart({
axes: [ { majorTickLines: { color: 'black' } }]
});
chart.appendTo('#chart');
|
| Opacity of major Tick line |
Property:majorTickLines.opacity
</br>
</br>
$("#container").ejChart({
axes: [ { majorTickLines: { opacity: true} }]
});
|
Not Applicable |
| maximum labels of primaryYAxis |
Property:maximumLabels
</br>
</br>
$("#container").ejChart({
axes: [ { maximumLabels: 5 }]
});
|
Property:maximumLabels
</br>
</br>
let chart: Chart = new Chart({
axes: [ { maximumLabels: 4 }]
});
chart.appendTo('#chart');
|
| maximum labels width of primaryYAxis to trim |
Property:maximumLabelWidth
</br>
</br>
$("#container").ejChart({
axes: [ { maximumLabelWidth: 40 }]
});
|
Property:maximumLabelWidth
</br>
</br>
let chart: Chart = new Chart({
axes: [ { maximumLabelWidth: 4 }]
});
chart.appendTo('#chart');
|
| minor grid line |
Property:minorGridLines.visible
</br>
</br>
$("#container").ejChart({
axes: [ { minorGridLines: { visible: true} }]
});
|
Not Applicable |
| Width of minorGridLines |
Property:minorGridLines.width
</br>
</br>
$("#container").ejChart({
axes: [ { minorGridLines: { width: 2} }]
});
|
Property:minorGridLines.width
</br>
</br>
let chart: Chart = new Chart({
axes: [ { minorGridLines: { width: 2} }]
});
chart.appendTo('#chart');
|
| Color of minorGridLines |
Property:minorGridLines.color
</br>
</br>
$("#container").ejChart({
axes: [ { minorGridLines: { color: 'black' } }]
});
|
Property:minorGridLines.color
</br>
</br>
let chart: Chart = new Chart({
axes: [ { minorGridLines: { color: 'black' } }]
});
chart.appendTo('#chart');
|
| DashArray of minorGridLines |
Property:minorGridLines.dashArray
</br>
</br>
$("#container").ejChart({
axes: [ { minorGridLines: { dashArray: 'black' } }]
});
|
Property:minorGridLines.dashArray
</br>
</br>
let chart: Chart = new Chart({
axes: [ { minorGridLines: { dashArray: 'black' } }]
});
chart.appendTo('#chart');
|
| Opacity of minor grid line |
Property:minorGridLines.opacity
</br>
</br>
$("#container").ejChart({
axes: [ { minorGridLines: { opacity: true} }]
});
|
Not Applicable |
| minor Tick line |
Property:minorTickLines.visible
</br>
</br>
$("#container").ejChart({
axes: [ { minorTickLines: { visible: true} }]
});
|
Not Applicable |
| Width of minorTickLines |
Property:minorTickLines.width
</br>
</br>
$("#container").ejChart({
axes: [ { minorTickLines: { width: 2} }]
});
|
Property:minorTickLines.width
</br>
</br>
let chart: Chart = new Chart({
axes: [ { minorTickLines: { width: 2} }]
});
chart.appendTo('#chart');
|
| Height of minorTickLines |
Property:minorTickLines.size
</br>
</br>
$("#container").ejChart({
axes: [ { minorTickLines: { size: 2} }]
});
|
Property:minorTickLines.height
</br>
</br>
let chart: Chart = new Chart({
axes: [ { minorTickLines: { height: 2} }]
});
chart.appendTo('#chart');
|
| Color of minorTickLines |
Property:minorTickLines.color
</br>
</br>
$("#container").ejChart({
axes: [ { minorTickLines: { color: 'black' } }]
});
|
Property:minorTickLines.color
</br>
</br>
let chart: Chart = new Chart({
axes: [ { minorTickLines: { color: 'black' } }]
});
chart.appendTo('#chart');
|
| Opacity of minor Tick line |
Property:minorTickLines.opacity
</br>
</br>
$("#container").ejChart({
axes: [ { minorTickLines: { opacity: true} }]
});
|
Not Applicable |
| Minor ticks per interval of primaryYAxis |
Property:minorTicksPerInterval
</br>
</br>
$("#container").ejChart({
axes: [ { minorTicksPerInterval: 4 }]
});
|
Property:minorTickLines.color
</br>
</br>
let chart: Chart = new Chart({
axes: [ { minorTicksPerInterval: 4 }]
});
chart.appendTo('#chart');
|
| name of the primaryYAxis |
Property:name
</br>
</br>
$("#container").ejChart({
axes: [ { name: 'primaryYAxis' }]
});
|
Property:name
</br>
</br>
let chart: Chart = new Chart({
axes: [ { name: 'primaryYAxis' }]
});
chart.appendTo('#chart');
|
| Orientation of primaryYAxis |
Property:orientation
</br>
</br>
$("#container").ejChart({
axes: [ { orientation: 'Vertical' }]
});
|
Not Applicable |
| Plot offset for primaryYAxis |
Property:plotOffset
</br>
</br>
$("#container").ejChart({
axes: [ { plotOffset: 0 }]
});
|
Property:plotOffset
</br>
</br>
let chart: Chart = new Chart({
axes: [ { plotOffset: 0 }]
});
chart.appendTo('#chart');
|
| minimum for primaryYAxis |
Property:range.minimum
</br>
</br>
$("#container").ejChart({
axes: [ { range: { minimum: 10 }}]
});
|
Property:minimum
</br>
</br>
let chart: Chart = new Chart({
axes: [ { minimum: 23 }]
});
chart.appendTo('#chart');
|
| maximum for primaryYAxis |
Property:range.maximum
</br>
</br>
$("#container").ejChart({
axes: [ { range: { maximum: 10 }}]
});
|
Property:maximum
</br>
</br>
let chart: Chart = new Chart({
axes: [ { maximum: 23 }]
});
chart.appendTo('#chart');
|
| interval for primaryYAxis |
Property:range.interval
</br>
</br>
$("#container").ejChart({
axes: [ { range: { interval: 1 }}]
});
|
Property:interval
</br>
</br>
let chart: Chart = new Chart({
axes: [ { interval: 2 }]
});
chart.appendTo('#chart');
|
| RangePadding for primaryYAxis |
Property:rangePadding
</br>
</br>
$("#container").ejChart({
axes: [ { rangePadding: 'None' }}]
});
|
Property:rangePadding
</br>
</br>
let chart: Chart = new Chart({
axes: [ { rangePadding: 'None' }]
});
chart.appendTo('#chart');
|
| Rounding Places in primaryYAxis |
Property:roundingPlaces
</br>
</br>
$("#container").ejChart({
axes: [ { roundingPlaces: 3 }]
});
|
Property:labelFormat
</br>
</br>
let chart: Chart = new Chart({
axes: [ { labelFormat: 'n3' }]
});
chart.appendTo('#chart');
|
| ScrollBar settings of primaryYAxis |
Property:scrollbarSettings
</br>
</br>
$("#container").ejChart({
axes: [ { scrollbarSettings : { } }]
});
|
Not Applicable |
| TickPosition in primaryYAxis |
Property:tickLinesPosition
</br>
</br>
$("#container").ejChart({
axes: [ { tickLinesPosition: 'Inside' }]
});
|
Property:tickPosition
</br>
</br>
let chart: Chart = new Chart({
axes: [ { tickPosition: 'Inside' }]
});
chart.appendTo('#chart');
|
| valueType of primaryYAxis |
Property:valueType
</br>
</br>
$("#container").ejChart({
axes: [ { valueType: 'DateTime' }]
});
|
Property:valueType
</br>
</br>
let chart: Chart = new Chart({
axes: [ { valueType: 'DateTime' }]
});
chart.appendTo('#chart');
|
| visible of primaryYAxis |
Property:visible
</br>
</br>
$("#container").ejChart({
axes: [ { visible: true }]
});
|
Property:visible
</br>
</br>
let chart: Chart = new Chart({
axes: [ { visible: true }]
});
chart.appendTo('#chart');
|
| zoomFactor of primaryYAxis |
Property:zoomFactor
</br>
</br>
$("#container").ejChart({
axes: [ { zoomFactor: 0.3 }]
});
|
Property:zoomFactor
</br>
</br>
let chart: Chart = new Chart({
axes: [ { zoomFactor: 0.3 }]
});
chart.appendTo('#chart');
|
| zoomPosition of primaryYAxis |
Property:zoomPosition
</br>
</br>
$("#container").ejChart({
axes: [ { zoomPosition: 0.3 }]
});
|
Property:zoomPosition
</br>
</br>
let chart: Chart = new Chart({
axes: [ { zoomPosition: 0.3 }]
});
chart.appendTo('#chart');
|
| labelBorder of primaryYAxis |
Property:labelBorder
</br>
</br>
$("#container").ejChart({
axes: [ { labelBorder: { color: 'red', width: 2} }]
});
|
Property:border
</br>
</br>
let chart: Chart = new Chart({
axes: [ { border: { color: 'red', width: 3 } }]
});
chart.appendTo('#chart');
|
| title of primaryYAxis |
Property:title.text
</br>
</br>
$("#container").ejChart({
axes: [ { title: { text: 'Chart title' } }]
});
|
Property:title
</br>
</br>
let chart: Chart = new Chart({
axes: [ { title: 'Chart title' }]
});
chart.appendTo('#chart');
|
| StripLine of primaryYAxis |
Property:stripLine
</br>
</br>
$("#container").ejChart({
axes: [ { stripLine: [] }]
});
|
Property:stripLines
</br>
</br>
let chart: Chart = new Chart({
axes: [ { stripLines: [] }]
});
chart.appendTo('#chart');
|
| Multilevel labels of axes |
Property:multiLevelLabels
</br>
</br>
$("#container").ejChart({
axes: [ { multiLevelLabels: [] }]
});
|
Property:multiLevelLabels
</br>
</br>
let chart: Chart = new Chart({
axes: [ { stripLines: [] }]
});
chart.appendTo('#chart');
|
| skeleton for an axes | Not Applicable |
Property:skeleton
</br>
</br>
let chart: Chart = new Chart({
axes: [ { skeleton: 'yMd' }]
});
chart.appendTo('#chart');
|
| skeleton type for an axes | Not Applicable |
Property:skeletonType
</br>
</br>
let chart: Chart = new Chart({
axes: [ { skeletonType: 'DateTime' }]
});
chart.appendTo('#chart');
|
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| rows in chart |
Property:rowDefinitions
</br>
</br>
$("#chart").ejChart({
rowDefinitions: [];
});
|
Property:rows
</br>
</br>
let chart: Chart = new Chart({
rows: [];
});
chart.appendTo('#chart');
|
| unit |
Property:unit
</br>
</br>
$("#container").ejChart({
rowDefinitions :[{unit : "percentage"}]
});
|
Not Applicable |
| height of rows in chart |
Property:rowHeight
</br>
</br>
$("#chart").ejChart({
rowDefinitions: [{ rowHeight: '50%'}];
});
|
Property:height
</br>
</br>
let chart: Chart = new Chart({
rows: [ { height: '300'}];
});
chart.appendTo('#chart');
|
| Line customization |
Property:lineColor, lineWidth
</br>
</br>
$("#chart").ejChart({
rowDefinitions: [{ rowHeight: '50%', lineColor: 'brown', lineWidth: 2}];
});
|
Property:border
</br>
</br>
let chart: Chart = new Chart({
rows: [ { height: '300', border: { width: 2, color: 'brown'}}];
});
chart.appendTo('#chart');
|
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| bearFillColor |
Property:bearFillColor
</br>
</br>
$("#chart").ejChart({
series: [{bearFillColor: 'red' }];
});
|
Property:bearFillColor
</br>
</br>
let chart: Chart = new Chart({
series: [{bearFillColor: 'red' }];
});
chart.appendTo('#chart');
|
| Border |
Property:border
</br>
</br>
$("#chart").ejChart({
series: [{ border: { color: 'red', width: 2, dashArray: '10, 5' } }];
});
|
Property:rows
</br>
</br>
let chart: Chart = new Chart({
series: [{ border: { color: 'red', width: 2} }];
});
chart.appendTo('#chart');
|
| BoxPlotMode |
Property:boxPlotMode
</br>
</br>
$("#chart").ejChart({
series: [{ boxPlotMode: 'inclusive' }];
});
|
Property:rows
</br>
</br>
let chart: Chart = new Chart({
series: [{ boxPlotMode: 'Inclusive' }];
});
chart.appendTo('#chart');
|
| Minimum radius of Bubble series |
Property:bubbleOptions.minRadius
</br>
</br>
$("#chart").ejChart({
series: [{ bubbleOptions: { minRadius: 2} }];
});
|
Property:minRadius
</br>
</br>
let chart: Chart = new Chart({
series: [{ minRadius: 2 }];
});
chart.appendTo('#chart');
|
| Maximum radius of Bubble series |
Property:bubbleOptions.maxRadius
</br>
</br>
$("#chart").ejChart({
series: [{ bubbleOptions: { maxRadius: 10 } }];
});
|
Property:maxRadius
</br>
</br>
let chart: Chart = new Chart({
series: [{ maxRadius: 2 }];
});
chart.appendTo('#chart');
|
| bullFillColor |
Property:bullFillColor
</br>
</br>
$("#chart").ejChart({
series: [{bullFillColor: 'red' }];
});
|
Property:bullFillColor
</br>
</br>
let chart: Chart = new Chart({
series: [{bullFillColor: 'red' }];
});
chart.appendTo('#chart');
|
| Cardinal spline tension for spline series |
Property:cardinalSplineTension
</br>
</br>
$("#chart").ejChart({
series: [{ cardinalSplineTension: 0.5 }];
});
|
Property:cardinalSplineTension
</br>
</br>
let chart: Chart = new Chart({
series: [{ cardinalSplineTension: 0.5 }];
});
chart.appendTo('#chart');
|
| Column Width for rectangle series |
Property:columnWidth
</br>
</br>
$("#chart").ejChart({
series: [{ columnWidth: 0.5 }];
});
|
Property:columnWidth
</br>
</br>
let chart: Chart = new Chart({
series: [{ columnWidth: 0.5 }];
});
chart.appendTo('#chart');
|
| Column spacing for rectangle series |
Property:columnSpacing
</br>
</br>
$("#chart").ejChart({
series: [{ columnSpacing: 0.5 }];
});
|
Property:columnSpacing
</br>
</br>
let chart: Chart = new Chart({
series: [{ columnSpacing: 0.5 }];
});
chart.appendTo('#chart');
|
| Topleft radius for rectangle series |
Property:cornerRadius.topLeft
</br>
</br>
$("#chart").ejChart({
series: [{ topLeft: 0 }];
});
|
Property:cornerRadius.topLeft
</br>
</br>
let chart: Chart = new Chart({
series: [{ topLeft: 0 }];
});
chart.appendTo('#chart');
|
| topRight radius for rectangle series |
Property:cornerRadius.topRight
</br>
</br>
$("#chart").ejChart({
series: [{ topRight: 0 }];
});
|
Property:cornerRadius.topRight
</br>
</br>
let chart: Chart = new Chart({
series: [{ topRight: 0 }];
});
chart.appendTo('#chart');
|
| bottomRight radius for rectangle series |
Property:cornerRadius.bottomRight
</br>
</br>
$("#chart").ejChart({
series: [{ bottomRight: 0 }];
});
|
Property:cornerRadius.bottomRight
</br>
</br>
let chart: Chart = new Chart({
series: [{ bottomRight: 0 }];
});
chart.appendTo('#chart');
|
| bottomLeft radius for rectangle series |
Property:cornerRadius.bottomLeft
</br>
</br>
$("#chart").ejChart({
series: [{ bottomLeft: 0 }];
});
|
Property:cornerRadius.bottomLeft
</br>
</br>
let chart: Chart = new Chart({
series: [{ bottomLeft: 0 }];
});
chart.appendTo('#chart');
|
| DashArray property |
Property:dashArray
</br>
</br>
$("#chart").ejChart({
series: [{ dashArray: '10, 5' }];
});
|
Property:dashArray
</br>
</br>
let chart: Chart = new Chart({
series: [{ dashArray: '10, 5' }];
});
chart.appendTo('#chart');
|
| DataSource for series |
Property:dataSource
</br>
</br>
$("#chart").ejChart({
series: [{ dataSource: [] }];
});
|
Property:dashArray
</br>
</br>
let chart: Chart = new Chart({
series: [{ dataSource: [] }];
});
chart.appendTo('#chart');
|
| Draw type for Polar series |
Property:drawType
</br>
</br>
$("#chart").ejChart({
series: [{ drawType: 'Line' }];
});
|
Property:drawType
</br>
</br>
let chart: Chart = new Chart({
series: [{ drawType: 'Line' }];
});
chart.appendTo('#chart');
|
| EmptyPointSettings for series |
Property:emptyPointSettings.visible
</br>
</br>
$("#chart").ejChart({
series: [{ emptyPointSettings: { visible: false } }];
});
|
Not Applicable |
| Empty Point Display mode |
Property:emptyPointSettings.displayMode
</br>
</br>
$("#chart").ejChart({
series: [{ displayMode: 'gap' }];
});
|
Property:emptyPointSettings.displayMode
</br>
</br>
let chart: Chart = new Chart({
series: [{ displayMode: 'Average' }];
});
chart.appendTo('#chart');
|
| Empty Point color |
Property:emptyPointSettings.color
</br>
</br>
$("#chart").ejChart({
series: [{ color: 'red' }];
});
|
Property:emptyPointSettings.fill
</br>
</br>
let chart: Chart = new Chart({
series: [{ fill: 'red' }];
});
chart.appendTo('#chart');
|
| Empty Point Border |
Property:emptyPointSettings.border
</br>
</br>
$("#chart").ejChart({
series: [{ emptyPointSettings: { color: 'red', width: 2 }];
});
|
Property:fill
</br>
</br>
let chart: Chart = new Chart({
series: [{ emptyPointSettings: { color: 'red', width: 2 }];
});
chart.appendTo('#chart');
|
| Enable animation for series |
Property:enableAnimation
</br>
</br>
$("#chart").ejChart({
series: [{ enableAnimation: true }];
});
|
Property:animation.enable
</br>
</br>
let chart: Chart = new Chart({
series: [ animation: { enable: false }];
});
chart.appendTo('#chart');
|
| Animation duration for series |
Property:animationDuration
</br>
</br>
$("#chart").ejChart({
series: [{ animationDuration: 1000 }];
});
|
Property:animation.duration
</br>
</br>
let chart: Chart = new Chart({
series: [ animation: { duration: 1000 }];
});
chart.appendTo('#chart');
|
| Animation delay for series | Not Applicable |
Property:animation.duration
</br>
</br>
let chart: Chart = new Chart({
series: [ animation: { delay: 100 }];
});
chart.appendTo('#chart');
|
| Drag settings for series |
Property:dragSettings
</br>
</br>
$("#chart").ejChart({
series: [{ dragSettings: { mode: 'X' } }];
});
|
Not Applicable |
| Errorbar settings for series |
Property:errorBarSettings
</br>
</br>
$("#chart").ejChart({
series: [{ errorBarSettings: { } }];
});
|
Property:errorBarSettings
</br>
</br>
let chart: Chart = new Chart({
series: [ {errorBarSettings: { }}];
});
|
| Closed series |
Property:isClosed
</br>
</br>
$("#chart").ejChart({
series: [{ isClosed: true }];
});
|
Property:isClosed
</br>
</br>
let chart: Chart = new Chart({
series: [ { isClosed: true }];
});
|
| Stacking Property for series |
Property:isStacking
</br>
</br>
$("#chart").ejChart({
series: [{ isStacking: true }];
});
|
Not Applicable |
| Line cap for series |
Property:lineCap
</br>
</br>
$("#chart").ejChart({
series: [{ lineCap: 'butt' }];
});
|
Not Applicable |
| Line join for series |
Property:lineCap
</br>
</br>
$("#chart").ejChart({
series: [{ lineJoin: 'round' }];
});
|
Not Applicable |
| Opacity for series |
Property:opacity
</br>
</br>
$("#chart").ejChart({
series: [{ opacity: 0.7 }];
});
|
Property:errorBarSettings
</br>
</br>
let chart: Chart = new Chart({
series: [ { opacity: 0.7 }];
});
|
| Outlier settings of series |
Property:outLierSettings
</br>
</br>
$("#chart").ejChart({
series: [{ outLierSettings: { shape: 'rectangle' , size: { height: 30, width: 20}} }];
});
|
Not Applicable |
| Palette |
Property:palette
</br>
</br>
$("#chart").ejChart({
series: [{ palette: "ColorFieldName" }];
});
|
Property:pointColorMapping
</br>
</br>
let chart: Chart = new Chart({
series: [ { pointColorMapping: 'color' }];
});
chart.appendTo('#chart);
|
| Positive fill for waterfall series |
Property:positiveFill
</br>
</br>
$("#chart").ejChart({
series: [{ positiveFill: "red" }];
});
|
Property:pointColorMapping
</br>
</br>
let chart: Chart = new Chart({
series: [ { pointColorMapping: 'color' }];
});
chart.appendTo('#chart);
|
| Show average value in box and whisker series |
Property:showMedian
</br>
</br>
$("#chart").ejChart({
series: [{ showMedian: true }];
});
|
Property:pointColorMapping
</br>
</br>
let chart: Chart = new Chart({
series: [ { showMean: false }];
});
chart.appendTo('#chart);
|
| To group the series of stacking collection. |
Property:stackingGroup
</br>
</br>
$("#chart").ejChart({
series: [{ stackingGroup: 'group' }];
});
|
Property:stackingGroup
</br>
</br>
let chart: Chart = new Chart({
series: [ { stackingGroup: 'group' }];
});
chart.appendTo('#chart);
|
| Specifies the type of the series to render in chart. |
Property:type
</br>
</br>
$("#chart").ejChart({
series: [{ type: 'Line' }];
});
|
Property:type
</br>
</br>
let chart: Chart = new Chart({
series: [ { type: 'Line' }];
});
chart.appendTo('#chart);
|
| Defines the visibility of the series. |
Property:visibility
</br>
</br>
$("#chart").ejChart({
series: [{ visibility: true }];
});
|
Property:visible
</br>
</br>
let chart: Chart = new Chart({
series: [ { visible: true }];
});
chart.appendTo('#chart);
|
| Enables or disables the visibility of legend item. |
Property:visibleOnLegend
</br>
</br>
$("#chart").ejChart({
series: [{ visibleOnLegend : true }];
});
|
Property:toggleVisibility
</br>
</br>
let chart: Chart = new Chart({
legendSettings: [ { toggleVisibility: true }];
});
chart.appendTo('#chart);
|
| Specifies the different types of spline curve. |
Property:splineType
</br>
</br>
$("#chart").ejChart({
series: [{ splineType : 'Natural' }];
});
|
Property:splineType
</br>
</br>
let chart: Chart = new Chart({
legendSettings: [ { splineType: 'Natural' }];
});
chart.appendTo('#chart);
|
| Specifies the name of the x-axis that has to be associated with this series. Add an axis instance with this name to axes collection. |
Property:xAxisName
</br>
</br>
$("#chart").ejChart({
series: [{ xAxisName : 'secondaryXAxis' }];
});
|
Property:xAxisName
</br>
</br>
let chart: Chart = new Chart({
series: [ { xAxisName: 'secondaryXAxis' }];
});
chart.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: Chart = new Chart({
series: [ { xName: 'x' }];
});
chart.appendTo('#chart);
|
| Specifies the name of the y-axis that has to be associated with this series. Add an axis instance with this name to axes collection. |
Property:yAxisName
</br>
</br>
$("#chart").ejChart({
series: [{ yAxisName : 'secondaryYAxis' }];
});
|
Property:yAxisName
</br>
</br>
let chart: Chart = new Chart({
series: [ { yAxisName: 'secondaryYAxis' }];
});
chart.appendTo('#chart);
|
| Name of the property in the datasource that contains y value for the series. |
Property:yName
</br>
</br>
$("#chart").ejChart({
series: [{ yName : 'y' }];
});
|
Property:yName
</br>
</br>
let chart: Chart = new Chart({
series: [ { yName: 'y' }];
});
chart.appendTo('#chart);
|
| Name of the property in the datasource that contains high value for the series. |
Property:high
</br>
</br>
$("#chart").ejChart({
series: [{ high : 'y' }];
});
|
Property:high
</br>
</br>
let chart: Chart = new Chart({
series: [ { high: 'y' }];
});
chart.appendTo('#chart);
|
| Name of the property in the datasource that contains low value for the series. |
Property:low
</br>
</br>
$("#chart").ejChart({
series: [{ low : 'y' }];
});
|
Property:low
</br>
</br>
let chart: Chart = new Chart({
series: [ { low: 'y' }];
});
chart.appendTo('#chart);
|
| Name of the property in the datasource that contains close value for the series. |
Property:close
</br>
</br>
$("#chart").ejChart({
series: [{ close : 'y' }];
});
|
Property:close
</br>
</br>
let chart: Chart = new Chart({
series: [ { close: 'y' }];
});
chart.appendTo('#chart);
|
| Name of the property in the datasource that contains open value for the series. |
Property:open
</br>
</br>
$("#chart").ejChart({
series: [{ open : 'y' }];
});
|
Property:open
</br>
</br>
let chart: Chart = new Chart({
series: [ { open: 'y' }];
});
chart.appendTo('#chart);
|
| Option to add trendlines to chart. |
Property:trendLines
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines : [{}] }];
});
|
Property:trendLines
</br>
</br>
let chart: Chart = new Chart({
series: [{ trendLines : [{}] }];
});
chart.appendTo('#chart);
|
| Options for customizing the appearance of the series or data point while highlighting. |
Property:highlightSettings
</br>
</br>
$("#chart").ejChart({
series: [{ highlightSettings : {} }];
});
|
Not applicable. |
| Options for customizing the appearance of the series/data point on selection. |
Property:selectionSettings
</br>
</br>
$("#chart").ejChart({
series: [{ selectionSettings : {} }];
});
|
Not applicable. |
| visibility of marker |
Property:visible
</br>
</br>
$("#chart").ejChart({
series: [{ marker: { visible: true } ];
});
|
Property:visible
</br>
</br>
let chart: Chart = new Chart({
series: [ { marker: { visible: false } }];
});
chart.appendTo('#chart);
|
| Fill for marker |
Property:fill
</br>
</br>
$("#chart").ejChart({
series: [{ marker: { fill : 'red' } }];
});
|
Property:visible
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { fill : 'red' } }];
});
chart.appendTo('#chart);
|
| Opacity for marker |
Property:opacity
</br>
</br>
$("#chart").ejChart({
series: [{ marker: { opacity : 0.5 } }];
});
|
Property:opacity
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { opacity : 0.5 } }];
});
chart.appendTo('#chart);
|
| Shape of marker |
Property:shape
</br>
</br>
$("#chart").ejChart({
series: [{ marker: { shape : 'Circle' } }];
});
|
Property:shape
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { shape : 'Triangle' } }];
});
chart.appendTo('#chart);
|
| ImageUrl of marker |
Property:imageUrl
</br>
</br>
$("#chart").ejChart({
series: [{ marker: { imageUrl : '' } }];
});
|
Property:imageUrl
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { imageUrl : '' } }];
});
chart.appendTo('#chart);
|
| Border of marker |
Property:border
</br>
</br>
$("#chart").ejChart({
series: [{ marker: { border : { width: 2, color: 'red' } } }];
});
|
Property:shape
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { border : { width: 2, color: 'red' } } }];
});
chart.appendTo('#chart);
|
| Height of marker |
Property:size.height
</br>
</br>
$("#chart").ejChart({
series: [{ marker: { size: { height: 30} } }];
});
|
Property:height
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { height: 25 } }];
});
chart.appendTo('#chart);
|
| Width of marker |
Property:size.width
</br>
</br>
$("#chart").ejChart({
series: [{ marker: { size: { width: 30} } }];
});
|
Property:width
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { width: 25 } }];
});
chart.appendTo('#chart);
|
| Width of marker |
Property:size.width
</br>
</br>
$("#chart").ejChart({
series: [{ marker: { size: { width: 30} } }];
});
|
Property:width
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { width: 25 } }];
});
chart.appendTo('#chart);
|
| DataLabelSettings of marker |
Property:marker.dataLabel
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { } } }];
});
|
Property:marker.dataLabel
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { dataLabel: { } } }];
});
chart.appendTo('#chart);
|
| Visibility of dataLabel |
Property:dataLabel.visible
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { visible: true } } }];
});
|
Property:dataLabel.visible
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { dataLabel: { visible: true } } }];
});
chart.appendTo('#chart);
|
| Text mapping name of dataLabel |
Property:dataLabel.textMappingName
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { textMappingName: '' } } }];
});
|
Property:dataLabel.name
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { dataLabel: { name: '' } } }];
});
chart.appendTo('#chart);
|
| Fill color of data label |
Property:dataLabel.fill
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { fill: 'pink' } } }];
});
|
Property:dataLabel.fill
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { dataLabel: { fill: 'pink' } } }];
});
chart.appendTo('#chart);
|
| Opacity of data label |
Property:dataLabel.opacity
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { opacity: 0.6 } } }];
});
|
Property:dataLabel.fill
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { dataLabel: { opacity: 0.4 } } }];
});
chart.appendTo('#chart);
|
| Text position of data label |
Property:dataLabel.textPosition
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { textPosition: 'middle' } } }];
});
|
Property:dataLabel.position
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { dataLabel: { position: 'Top' } } }];
});
chart.appendTo('#chart);
|
| Alignment of data label |
Property:dataLabel.verticalAlignment
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { verticalAlignment: 'near' } } }];
});
|
Property:dataLabel.alignment
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { dataLabel: { alignment: 'Near' } } }];
});
chart.appendTo('#chart);
|
| Border of data label |
Property:dataLabel.border
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { border: { color: 'blue', width: 2, opacity: 0.4} } } }];
});
|
Property:dataLabel.alignment
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { dataLabel: { border: { color: 'blue', width: 2 } } } }];
});
chart.appendTo('#chart);
|
| Offset for data label |
Property:dataLabel.offset
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { offset: { x: 5, y: 6 }} } }];
});
|
Not Applicable |
| Margin of data label |
Property:dataLabel.border
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { margin: { top: 10, bottom: 10, left: 10, right: 10}} } }];
});
|
Property:dataLabel.margin
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: { dataLabel: { margin: { top: 10, bottom: 10, left: 10, right: 10 } } } }];
});
chart.appendTo('#chart);
|
| Font of data label |
Property:dataLabel.border
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { font: { fontFamily: 'SegoeUI', fontStyle: 'italic', fontWeight: '600', opacity: 0.5, size: 12, color: 'red' }} } }];
});
|
Property:dataLabel.margin
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: {dataLabel: { font: { fontFamily: 'SegoeUI', fontStyle: 'italic', fontWeight: '600', opacity: 0.5, size: 12, color: 'red' }} } }];
});
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: Chart = new Chart({
series: [{ marker: {dataLabel: { template: '
|
| Rounded corner radius X | Not Applicable |
Property:dataLabel.rx
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: {dataLabel: { rx: 10 } } }];
});
chart.appendTo('#chart);
|
| Rounded corner radius Y | Not Applicable |
Property:dataLabel.ry
</br>
</br>
let chart: Chart = new Chart({
series: [{ marker: {dataLabel: { ry: 10 } } }];
});
chart.appendTo('#chart);
|
| Maximum Label width for data label |
Property:dataLabel.maximumLabelWidth
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { maximumLabelWidth: 20}} } }];
});
|
Not Applicable |
| Enable wrapping of text for data label |
Property:dataLabel.enableWrap
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { enableWrap: true }} } }];
});
|
Not Applicable |
| To show contrast color for data label |
Property:dataLabel.showContrastColor
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { showContrastColor: true }} } }];
});
|
Not Applicable |
| To show edge label for data label |
Property:dataLabel.showEdgeLabels
</br>
</br>
$("#chart").ejChart({
series: [{ marker: {dataLabel: { showEdgeLabels: true }} } }];
});
|
Not Applicable |
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Trendlines settings |
Property:series.trendLines
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: []}]
});
|
Property:series.trendLines
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: []}]
});
chart.appendTo('#chart');
|
| Visibility of trendline |
Property:trendLines.visibility
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ visibility: true ]}]
});
|
Not applicable |
| Type of trendLine |
Property:trendLines.type
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [type: 'linear' ]}]
});
|
Property:trendLines.type
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ type: 'Polynomial']}]
});
chart.appendTo('#chart');
|
| Name of trendLine |
Property:trendLines.name
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ name: 'trendLine' ]}]
});
|
Property:trendLines.name
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ name: 'trendLine']}]
});
chart.appendTo('#chart');
|
| Period of trendLine |
Property:trendLines.period
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ period: 45 ]}]
});
|
Property:trendLines.period
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ period: 45]}]
});
chart.appendTo('#chart');
|
| Polynomial order for Polynomial type trendLines |
Property:trendLines.polynomialOrder
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ polynomialOrder: 3 ]}]
});
|
Property:trendLines.polynomialOrder
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ polynomialOrder: 3]}]
});
chart.appendTo('#chart');
|
| Backward forecost for trendLines |
Property:trendLines.backwardforecast
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ backwardforecast: 3 ]}]
});
|
Property:trendLines.backwardforecast
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ backwardforecast: 3]}]
});
chart.appendTo('#chart');
|
| Forward forecost for trendLines |
Property:trendLines.forwardForecast
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ forwardForecast: 3 ]}]
});
|
Property:trendLines.forwardForecast
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ forwardForecast: 3]}]
});
chart.appendTo('#chart');
|
| Fill for trendLines |
Property:trendLines.fill
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ fill: '#EEFFCC' ]}]
});
|
Property:trendLines.fill
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ fill: 'EEFFCC']}]
});
chart.appendTo('#chart');
|
| Width for trendLines |
Property:trendLines.width
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ width: 2 ]}]
});
|
Property:trendLines.width
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ width: 2]}]
});
chart.appendTo('#chart');
|
| Intercept value for trendLines |
Property:trendLines.intercept
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ intercept: 2 ]}]
});
|
Property:trendLines.intercept
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ intercept: 2]}]
});
chart.appendTo('#chart');
|
| Legend shape for trendLines | Not Applicable |
Property:trendLines.legendShape
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ legendShape: 'Rectangle']}]
});
chart.appendTo('#chart');
|
| Animation settings for trendLines | Not Applicable |
Property:trendLines.animation
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ animation: { enable: true }]}]
});
chart.appendTo('#chart');
|
| Marker settings for trendLines | Not Applicable |
Property:trendLines.marker
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ {marker: { visible: true }}]}]
});
chart.appendTo('#chart');
|
| Tooltip for trendLines |
Property:trendLines.tooltip
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ { tooltip: { } } ]}]
});
|
Property:trendLines.enableTooltip
</br>
</br>
let chart: Chart = new Chart({
series: [ { trendLines: [ {enableTooltip: true }]}]
});
chart.appendTo('#chart');
|
| DashArray for trendLines |
Property:trendLines.dashArray
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ { dashArray: '10, 5' } ]}]
});
|
Not Applicable. |
| Visible on legend for trendLines |
Property:trendLines.visibleOnLegend
</br>
</br>
$("#chart").ejChart({
series: [{ trendLines: [ { visibleOnLegend: true } ]}]
});
|
Not Applicable. |
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Default behaviour for striplines |
Property:primaryXAxis.stripLines
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { visible: true }]}
});
|
Property:primaryXAxis.stripLines
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { visible: true }]}
});
chart.appendTo('#chart');
|
| border for stripline |
Property:stripLines.borderColor
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { borderColor: 'pink' }]}
});
|
Property:stripLines.border
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { border: { color: 'red', width: 2} }]}
});
chart.appendTo('#chart');
|
| Background color for stripline |
Property:stripLines.color
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { color: 'pink' }]}
});
|
Property:stripLines.border
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { color: 'red'}]}
});
chart.appendTo('#chart');
|
| Start value for stripline |
Property:stripLines.start
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { start: 10 }]}
});
|
Property:stripLines.start
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { start: 5}]}
});
chart.appendTo('#chart');
|
| End value for stripline |
Property:stripLines.end
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { end: 10 }]}
});
|
Property:stripLines.end
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { end: 5}]}
});
chart.appendTo('#chart');
|
| StartfromAxis for stripline |
Property:stripLines.startFromAxis
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { startFromAxis: true }]}
});
|
Property:stripLines.startFromAxis
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { startFromAxis: true}]}
});
chart.appendTo('#chart');
|
| Text in stripline |
Property:stripLines.text
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { text: 'StripLine; }]}
});
|
Property:stripLines.text
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { text: 'stripline'}]}
});
chart.appendTo('#chart');
|
| Text alignment in stripline |
Property:stripLines.textAlignment
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { textAlignment: 'Far; }]}
});
|
Property:stripLines.horizontalAlignment
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { horizontalAlignment: 'Far'}]}
});
chart.appendTo('#chart');
|
| Vertical Text alignment in stripline | Not Applicable |
Property:stripLines.verticalAlignment
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { verticalAlignment: 'Far'}]}
});
chart.appendTo('#chart');
|
| Size of stripline |
Property:stripLines.width
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { width: 10; }]}
});
|
Property:stripLines.size
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { size: 10 }]}
});
chart.appendTo('#chart');
|
| ZIndex of stripline |
Property:stripLines.zIndex
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { zIndex: 'Behind' }]}
});
|
Property:stripLines.size
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { zIndex: 'Behind' }]}
});
chart.appendTo('#chart');
|
| Font style of stripline |
Property:stripLines.fontStyle
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { stripLines: [ { fontStyle: {} }]}
});
|
Property:stripLines.textStyle
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { stripLines: [ { textStyle: {} }]}
});
chart.appendTo('#chart');
|
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Default behaviour for multilevelLabels |
Property:primaryXAxis.multilevelLabels
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { visible: true }]}
});
|
Property:primaryXAxis.multilevelLabels
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { multilevelLabels: [ { }]}
});
chart.appendTo('#chart');
|
| Default behaviour for multilevelLabels |
Property:primaryXAxis.multilevelLabels
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { visible: true }]}
});
|
Property:primaryXAxis.multilevelLabels
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { multilevelLabels: [ { }]}
});
chart.appendTo('#chart');
|
| Text alignment for multilevelLabels |
Property:multiLevelLabels.textAlignment
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { textAlignment: 'Near' }]}
});
|
Property:multilevelLabels.alignment
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { multilevelLabels: [ {alignment: 'Near' }]}
});
chart.appendTo('#chart');
|
| Text overflow for multilevelLabels |
Property:multiLevelLabels.textOverFlow
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { textOverFlow: 'Trim' }]}
});
|
Property:multiLevelLabels.overFlow
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { multilevelLabels: [ {overFlow: 'Trim' }]}
});
chart.appendTo('#chart');
|
| Border for multilevelLabels |
Property:multiLevelLabels.border
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { border: { width: 2, color: 'red', type: 'brace' } }]}
});
|
Property:multiLevelLabels.border
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { multilevelLabels: [ { border: { width: 2, color: 'red', type: 'brace' } }]}
});
chart.appendTo('#chart');
|
| Start value for label |
Property:multiLevelLabels.start
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { start: 45 } }]}
});
|
Property:multiLevelLabels.categories.start
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { multilevelLabels: [ { categories: [ { start: 45}] } }]}
});
chart.appendTo('#chart');
|
| End value for label |
Property:multiLevelLabels.start
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { end: 45 } }]}
});
|
Property:multiLevelLabels.categories.end
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { multilevelLabels: [ { categories: [ { end: 45}] } }]}
});
chart.appendTo('#chart');
|
| Text for label |
Property:multiLevelLabels.text
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { text: 'Start' } }]}
});
|
Property:multiLevelLabels.categories.text
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { multilevelLabels: [ { categories: [ { text: 'text' }] } }]}
});
chart.appendTo('#chart');
|
| maximum text width for label |
Property:multiLevelLabels.maximumTextWidth
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { maximumTextWidth: 10 } }]}
});
|
Property:multiLevelLabels.categories.maximumTextWidth
</br>
</br>
let chart: Chart = new Chart({
primaryXAxis: { multilevelLabels: [ { categories: [ { maximumTextWidth: 20 }] } }]}
});
chart.appendTo('#chart');
|
| level of labels |
Property:multiLevelLabels.level
</br>
</br>
$("#chart").ejChart({
primaryXAxis: { multilevelLabels: [ { level: 2 } }]}
});
|
Not applicable. Categories are used |
| 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: Chart = new Chart({
});
chart.appendTo('#chart');
chart.width = '400';
chart.refresh();
|
| Export |
Property:chart.export()
</br>
</br>
$("#chart").ejChart({
export: () {
}
});
|
Property:chart.export()
</br>
</br>
let chart: Chart = new Chart({
});
chart.export('JPEG', 'chart');
chart.appendTo('#chart');
|
Property:chart.print()
</br>
</br>
$("#chart").ejChart({
print: () {
}
});
|
Property:chart.print()
</br>
</br>
let chart: Chart = new Chart({
});
chart.print('chart');
chart.appendTo('#chart');
|
|
| AddSeries | Not Applicable |
Property:chart.addSeries()
</br>
</br>
let chart: Chart = new Chart({
});
chart.appendTo('#chart');
chart.addSeries();
|
| RemoveSeries | Not Applicable |
Property:chart.removeSeries()
</br>
</br>
let chart: Chart = new Chart({
});
chart.appendTo('#chart');
chart.removeSeries();
|
| 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: Chart = new Chart({
animationComplete: () => {
}
});
chart.appendTo('#chart');
|
| Fires on axis label click |
Property:axisLabelClick
</br>
</br>
$("#chart").ejChart({
axisLabelClick: () {
}
});
|
Not applicable |
| Fires before axis label render |
Property:axisLabelRendering
</br>
</br>
$("#chart").ejChart({
axisLabelRendering: () {
}
});
|
Property:axisLabelRender()
</br>
</br>
let chart: Chart = new Chart({
axisLabelRender: () => {
}
});
chart.appendTo('#chart');
|
| Fires on axis label mouseMove |
Property:axisLabelMouseMove
</br>
</br>
$("#chart").ejChart({
axisLabelMouseMove: () {
}
});
|
Not applicable |
| Fires on axis label initialize |
Property:axisLabelInitialize
</br>
</br>
$("#chart").ejChart({
axisLabelInitialize: () {
}
});
|
Not applicable |
| Fires before axis range calculation |
Property:axesRangeCalculate
</br>
</br>
$("#chart").ejChart({
axesRangeCalculate: () {
}
});
|
Property:axisRangeCalculated()
</br>
</br>
let chart: Chart = new Chart({
axisRangeCalculated: () => {
}
});
chart.appendTo('#chart');
|
| Fires on axis title rendering |
Property:axisTitleRendering
</br>
</br>
$("#chart").ejChart({
axisTitleRendering: () {
}
});
|
Not applicable |
| 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: Chart = new Chart({
resized: () => {
}
});
chart.appendTo('#chart');
|
| Fires on chart click |
Property:chartClick
</br>
</br>
$("#chart").ejChart({
chartClick: () {
}
});
|
Property:chartMouseClick
</br>
</br>
let chart: Chart = new Chart({
chartMouseClick: () => {
}
});
chart.appendTo('#chart');
|
| Fires on chart mouse move |
Property:chartMouseMove
</br>
</br>
$("#chart").ejChart({
chartMouseMove: () {
}
});
|
Property:chartMouseMove
</br>
</br>
let chart: Chart = new Chart({
chartMouseMove: () => {
}
});
chart.appendTo('#chart');
|
| Fires on chart mouse leave |
Property:chartMouseLeave
</br>
</br>
$("#chart").ejChart({
chartMouseLeave: () {
}
});
|
Property:chartMouseLeave
</br>
</br>
let chart: Chart = new Chart({
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: Chart = new Chart({
chartmouseUp: () => {
}
});
chart.appendTo('#chart');
|
| Fires on chart mouse down | Not Applicable |
Property:chartmouseDown
</br>
</br>
let chart: Chart = new Chart({
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 the dragging is started |
Property:dragStart
</br>
</br>
$("#chart").ejChart({
dragStart: () {
}
});
|
Not applicable |
| Fires while dragging |
Property:dragging
</br>
</br>
$("#chart").ejChart({
dragging: () {
}
});
|
Not applicable |
| Fires when the dragging is completed |
Property:dragEnd
</br>
</br>
$("#chart").ejChart({
dragEnd: () {
}
});
|
Property:dragComplete
</br>
</br>
let chart: Chart = new Chart({
dragComplete: () => {
}
});
chart.appendTo('#chart');
|
| 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: Chart = new Chart({
loaded: () => {
}
});
chart.appendTo('#chart');
|
| Fires before rendering the data labels. |
Property:displayTextRendering
</br>
</br>
$("#chart").ejChart({
displayTextRendering: () {
}
});
|
Property:textRender
</br>
</br>
let chart: Chart = new Chart({
textRender: () => {
}
});
chart.appendTo('#chart');
|
| Fires, when error bar is rendering. |
Property:errorBarRendering
</br>
</br>
$("#chart").ejChart({
errorBarRendering: () {
}
});
|
Not applicable |
| Fires during the calculation of legend bounds. |
Property:legendBoundsCalculate
</br>
</br>
$("#chart").ejChart({
legendBoundsCalculate: () {
}
});
|
Not applicable |
| 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: Chart = new Chart({
legendRender: () => {
}
});
chart.appendTo('#chart');
|
| Fires before loading the chart. |
Property:load
</br>
</br>
$("#chart").ejChart({
load: () {
}
});
|
Property:load
</br>
</br>
let chart: Chart = new Chart({
load: () => {
}
});
chart.appendTo('#chart');
|
| Fires, when multi level labels are rendering. |
Property:multiLevelLabelRendering
</br>
</br>
$("#chart").ejChart({
multiLevelLabelRendering: () {
}
});
|
Property:axisMultiLabelRender
</br>
</br>
let chart: Chart = new Chart({
axisMultiLabelRender : () => {
}
});
chart.appendTo('#chart');
|
| Fires on clicking a point in chart. |
Property:pointRegionClick
</br>
</br>
$("#chart").ejChart({
pointRegionClick: () {
}
});
|
Property:pointClick
</br>
</br>
let chart: Chart = new Chart({
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: Chart = new Chart({
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: Chart = new Chart({
pointRender : () => {
}
});
chart.appendTo('#chart');
|
| Fires after selected the data in chart. |
Property:rangeSelected
</br>
</br>
$("#chart").ejChart({
rangeSelected: () {
}
});
|
Not applicable |
| Fires after selecting a series. |
Property:seriesRegionClick
</br>
</br>
$("#chart").ejChart({
seriesRegionClick: () {
}
});
|
Not applicable |
| Fires before rendering a series. |
Property:seriesRendering
</br>
</br>
$("#chart").ejChart({
seriesRendering: () {
}
});
|
Property:seriesRender
</br>
</br>
let chart: Chart = new Chart({
seriesRender : () => {
}
});
chart.appendTo('#chart');
|
| Fires before rendering the marker symbols. |
Property:symbolRendering
</br>
</br>
$("#chart").ejChart({
symbolRendering: () {
}
});
|
Not applicable |
| Fires before rendering the trendline |
Property:trendlineRendering
</br>
</br>
$("#chart").ejChart({
trendlineRendering: () {
}
});
|
Not applicable |
| 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: Chart = new Chart({
tooltipRender : () => {
}
});
chart.appendTo('#chart');
|
| Fires before rendering crosshair tooltip in axis |
Property:trackAxisToolTip
</br>
</br>
$("#chart").ejChart({
trackAxisToolTip: () {
}
});
|
Not applicable |
| Fires before rendering trackball tooltip. |
Property:trackToolTip
</br>
</br>
$("#chart").ejChart({
trackToolTip: () {
}
});
|
Not applicable |
| Event triggered when scroll starts. |
Property:scrollStart
</br>
</br>
$("#chart").ejChart({
scrollStart: () {
}
});
|
Property:scrollStart
</br>
</br>
let chart: Chart = new Chart({
scrollStart : () => {
}
});
chart.appendTo('#chart');
|
| Event triggered when scroll ends. |
Property:scrollEnd
</br>
</br>
$("#chart").ejChart({
scrollEnd: () {
}
});
|
Property:scrollEnd
</br>
</br>
let chart: Chart = new Chart({
scrollEnd: () => {
}
});
chart.appendTo('#chart');
|
| Event triggered when scroll changes. |
Property:scrollChange
</br>
</br>
$("#chart").ejChart({
scrollChange: () {
}
});
|
Property:scrollChange
</br>
</br>
let chart: Chart = new Chart({
scrollChange: () => {
}
});
chart.appendTo('#chart');
|
| Fires while performing rectangle zooming in chart. |
Property:zoomComplete
</br>
</br>
$("#chart").ejChart({
zoomComplete: () {
}
});
|
Property:zoomComplete
</br>
</br>
let chart: Chart = new Chart({
zoomComplete: () => {
}
});
chart.appendTo('#chart');
|
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| selected data index |
Property:selectedDataPointIndexes:
</br>
</br>
$("#chart").ejChart({
selectedDataPointIndexes: [ { seriesIndex: 0, pointIndex: 1}]
});
|
Property:selectedDataIndexes
</br>
</br>
let chart: Chart = new Chart({
selectedDataIndexes: [ { series: 0, point: 1}]
});
chart.appendTo('#chart');
|
| sideBySideSeriesPlacement for column based series |
Property:sideBySideSeriesPlacement:
</br>
</br>
$("#chart").ejChart({
sideBySideSeriesPlacement
});
|
Property:sideBySidePlacement
</br>
</br>
let chart: Chart = new Chart({
sideBySidePlacement: true
});
chart.appendTo('#chart');
|
| ZoomSettings |
Property:zooming:
</br>
</br>
$("#chart").ejChart({
zooming: {
enable: true,
enabledeferredZoom: true,
enablePinch: true,
enableMouseWheel: true,
enableSrollBar: true,
toolBarItems: [],
type: 'X'
}
});
|
Property:zoomSettings
</br>
</br>
let chart: Chart = new Chart({
zoomSettings: {
enable: true,
enablePinchZooming: true,
enableDefferedZooming: true
enableMouseWheelZooming: true,
enableSelectionZooming: true,
enableScrollBar: true
}
});
chart.appendTo('#chart');
|
| Background color of the chart |
Property:background
</br>
</br>
$("#container").ejChart({
background: 'transparent'
});
|
Property:background
</br>
</br>
let chart: Chart = new Chart({
background: '#EEFFCC'
});
chart.appendTo('#chart');
|
| URL of the image to be used as chart background. |
Property:backGroundImageUrl
</br>
</br>
$("#container").ejChart({
backGroundImageUrl : '../images/chart/wheat.png'
});
|
Not Applicable |
| Customizing border of the chart |
Property:border
</br>
</br>
$("#container").ejChart({
border: { width: 2, color: '#CCEEFF', opacity: 0.5}
});
|
Property:border
</br>
</br>
let chart: Chart = new Chart({
border: { width: 2, color: '#CCEEFF'}
});
chart.appendTo('#chart');
|
| This provides options for customizing export settings |
Property:exportSettings
</br>
</br>
$("#container").ejChart({
exportSettings: { filename : "chart", angle: '45' }
});
|
Property:export()
</br>
</br>
let chart: Chart = new Chart({
border: { width: 2, color: '#CCEEFF'}
});
chart.appendTo('#chart');
chart.export( |
| ChartArea customization |
Property:chartArea
</br>
</br>
$("#container").ejChart({
chartArea: { background: 'transparent', border: { opacity: 0.3, color: 'red', width: 2}}
});
|
Property:chartArea
</br>
</br>
let chart: Chart = new Chart({
chartArea: { background: 'transparent', border: { width: 2, color: '#CCEEFF'} }
});
chart.appendTo('#chart');
chart.export(
|