Contents
- Accumulation Chart
- Annotation
- Series
- DataLabel
- Legend
- Methods
- Events
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 20244 minutes to read
This article describes the API migration process of Accumulation chart component from Essential® JS 1 to Essential® JS 2.
Accumulation Chart
</code></td>| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| annotations |
Property:Annotations
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations())
|
Property:annotations
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Annotations())
|
| background |
Property:Background
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Background())
|
Property:Background
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Background())
|
| border |
Property:Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Border(b => b.Color("red").Width("2")))
|
Property:Border
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Background()).Border(b => b.Color("red").Width("2")))
|
| DataSource | Not applicable |
Property:DataSource
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.DataSource())
|
| Animation after legend click | Not applicable |
Property:EnableAnimation
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.EnableAnimation(true))
|
| Persisting component's state between page reloads. | Not applicable |
Property:EnablePersistance
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.EnablePersistance(true))
|
| Enabling smart labels |
Property:Series.EnableSmartLabels
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.EnableSmartLabels(true)))
|
Property:EnableSmartLabels
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.EnableSmartLabels(true)))
|
| Height of Chart |
Property:Size.Height
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Size(s => s.Height("400")))
|
Property:Height
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Height("400"))
|
| Multi selection |
Property:SelectionSettings.Type
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SelectionSettings(s => s.Type("multiple")))
|
Property:IsMultiSelect
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.IsMultiSelect(true))
|
| legend Settings |
Property:Legend
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend())
|
Property:LegendSettings
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(true))
|
| Margin for the chart |
Property:Margin
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Margin(m => m.Top("10").Bottom("10")))
|
Property:Margin
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Margin(m => m.Top("10").Bottom("10")))
|
| SelectedDataIndexes |
Property:SelectedDataPointIndexes
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SelectedDataPointIndexes())
|
Property:SelectedDataIndexes
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.SelectedDataIndexes(s => s.Series("0").Point("1"))
|
| Selection Mode |
Property:SelectionSettings.Mode
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SelectionSettings(s => s.Mode("point")))
|
Property:selectionMode
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.SelectionSettings(s => s.Mode("Point"))
|
| Series |
Property:Series
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series())
|
Property:Series
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series())
|
| Title text |
Property:Title.Text
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Title(t => t.Text("pie chart"))
|
Property:Title
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Title(t => t.Text("pie chart"))
|
| Title Styles |
Property:TitleStyle
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.TitleStyle(t => t.FontFamily("SegoeUI"))
|
Property:TitleStyle
</br>
</br>
@(Html.EJS().AccumulationChart("Container")
.TitleStyle(t => t.FontFamily("SegoeUI"))
|
| Sub Title text |
Property:subTitle.text
</br>
</br>
@(Html.EJ().Chart("Container")
.subTitle(t => t.Text("chart"))
|
Property:subTitle
</br>
</br>
@(Html.EJ().AccumulationChart("Container")
.subTitle(t => t.Text("chart"))
|
| Sub title Styles |
Property:Title
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SubTitleStyle(s => s.Font()))
|
Property:SubTitleStyle
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.SubTitleStyle(s => s.Font()))
|
| tooltip |
Property:Series.ToolTip
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Tooltip()))
|
Property:Tooltip
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Tooltip()))
|
| Width of Chart |
Property:Size.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Size(s => s.Width("400")))
|
Property:Width
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Size(s => s.Width("400")))
|
Annotation
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Content |
Property:Annotations.Content
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.Content("divID")))
|
Property:Annotations.Content
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Annotations(a => a.Content("divID")))
|
| coordinateUnits |
Property:Annotations.CoordinateUnit
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.CoordinateUnit("pixel")))
|
Property:Annotations.CoordinateUnit
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Annotations(a => a.CoordinateUnit("pixel")))
|
| description | Not Applicable |
Property:Description
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Annotations(a => a.Description("")))
|
| horizontalAlignment for annotation |
Property:Annotations.HorizontalAlignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.HorizontalAlignment("middle")))
|
Property:annotations.horizontalAlignment
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Annotations(a => a.HorizontalAlignment("center")))
|
| margin for annotation |
Property:Annotations.Margin
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.Margin(m => m.Top("10").Bottom("10"))))
|
Not applicable |
| Opacity for annotation |
Property:Annotations.Opacity
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.Opacity("0.5")))
|
Not applicable |
| Region for annotation with respect to chart or series |
Property:Annotations.Region
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.Region("chart") ))
|
Property:Annotations.Region
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Annotations(a => a.Region("chart") ))
|
| verticalAlignment for annotation |
Property:Annotations.VerticalAlignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.VerticalAlignment("middle")))
|
Property:Annotations.VerticalAlignment
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Annotations(a => a.VerticalAlignment("center")))
|
| Visibility of annotations |
Property:Annotations.Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.Visible(true)))
|
Not applicable |
| X offset for annotation |
Property:Annotations.X
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.X("50")))
|
Property:Annotations.X
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Annotations(a => a.X("50")))
|
| Y offset for annotation |
Property:Annotations.Y
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Annotations(a => a.Y("150")))
|
Property:Annotations.Y
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Annotations(a => a.Y("150")))
|
Series
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| series |
Property:Series
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series())
|
Property:Series
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series())
|
| animation for series |
Property:EnableAnimation
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.EnableAnimation(true)))
|
Property:Animation.Enable
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Animation(a => a.Enable(true))))
|
| animation duration for series |
Property:AnimationDuration
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.AnimationDuration("1000")))
|
Property:Animation.Duration
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Animation(a => a.Duration("1000"))))
|
| animation delay for series | Not Applicable |
Property:Animation.Delay
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Animation(a => a.Delay("1000"))))
|
| Border for series |
Property:Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Border(b => b.Color("red").Width("2"))))
|
Property:Border
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Border(b => b.Color("red").Width("2"))))
|
| DataLabel for series |
Property:DataLabel
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.DataLabel()))
|
Property:DataLabel
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel()))
|
| DataSource for series |
Property:DataSource
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.DataSource()))
|
Property:DataSource
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataSource()))
|
| enableTooltip for series |
Property:Tooltip.Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.ToolTip(t =>t.Visible(true))))
|
Property:EnableTooltip
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.EnableTooltip(true)))
|
| start angle |
Property:StartAngle
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.StartAngle("90")))
|
Property:StartAngle
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.StartAngle("90")))
|
| end angle |
Property:EndAngle
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.EndAngle("190")))
|
Property:EndAngle
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.EndAngle("190")))
|
| explode |
Property:Explode
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Explode(true)))
|
Property:Explode
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Explode(true)))
|
| explodeAll |
Property:ExplodeAll
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.ExplodeAll(true)))
|
Property:ExplodeAll
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.ExplodeAll(true)))
|
| explodeIndex |
Property:ExplodeIndex
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.ExplodeIndex("0")))
|
Property:ExplodeIndex
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.EExplodeIndex("1")))
|
| explodeOffset |
Property:ExplodeOffset
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.ExplodeOffset("30%")))
|
Property:ExplodeOffset
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.ExplodeOffset("30%")))
|
| gapRatio |
Property:GapRatio
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.GapRatio("0.6")))
|
Property:GapRatio
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.GapRatio("0.6")))
|
| gapWidth |
Property:GapWidth
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.GapWidth("5")))
|
Not Applicable |
| inner radius of the accumulation chart |
Property:InnerRadius
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.InnerRadius("30%")))
|
Property:innerRadius
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.InnerRadius("30%")))
|
| Legend shape of the series | Not applicable |
Property:LegendShape
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.LegendShape("Rectangle")))
|
| name of the series |
Property:Name
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Name("")))
|
Property:Name
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Name("")))
|
| neck height for funnel series |
Property:NeckHeight
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.NeckHeight("50")))
|
Property:NeckHeight
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.NeckHeight("50")))
|
| neck width for funnel series |
Property:NeckWidth
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.NeckWidth("50")))
|
Property:NeckWidth
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.NeckWidth("50")))
|
| opacity for series |
Property:Opacity
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Opacity("0.5")))
|
Property:Opacity
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Opacity("0.5")))
|
| palettes for series |
Property:Palette
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Palette()))
|
Property:Palettes
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Palette()))
|
| point color mapping name for series |
Property:PointColorMappingName
</br>
</br>
(Html.EJ().Chart("chartContainer")
.Series(s => s.PointColorMappingName("color")))
|
Property:PointColorMapping
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.PointColorMapping("color")))
|
| Mode of pyramid series |
Property:PyramidMode
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.PyramidMode("Surface")))
|
Property:PyramidMode
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.PyramidMode("Linear")))
|
| query for datasource for series |
Property:Query
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Query()))
|
Property:Query
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Query()))
|
| Radius of Pie series |
Property:PieCoefficient
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.PieCoefficient("0.5")))
|
Property:Radius
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Radius("0.5")))
|
| Selection Style of Accumulation chart | Not applicable |
Property:SelectionStyle
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.SelectionStyle()))
|
| tooltip Mapping name | Not applicable |
Property:TooltipMappingName
</br>
</br>
(Html.EJS().AccumulationChart("container")
.Series(s => s.TooltipMappingName()))
|
| Type of series |
Property:Type
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Type("")))
|
Property:Type
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Type("")))
|
| Name of the property in the datasource that contains x value for the series. |
Property:XName
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.XName("x")))
|
Property:XName
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.XName("x")))
|
| Name of the property in the datasource that contains x value for the series. |
Property:YName
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.YName("y")))
|
Property:YName
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.YName("y")))
|
| Width of funnel series |
Property:FunnelWidth
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.FunnelWidth("100")))
|
Property:Width
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.Width("100")))
|
| Grouping | Not Applicable |
Property:GroupTo
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.GroupTo("1")))
|
| GroupMode | Not Applicable |
Property:GroupMode
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.GroupMode("Point")))
|
DataLabel
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| dataLabel |
Property:Series.Marker.DataLabel
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Marker(m => m.DataLabel(d => d.Visible(true)))))
|
Property:Series.DataLabel
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel(d => d.Visible(true))))
|
| border of dataLabel |
Property:Series.Marker.DataLabel.Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Marker(m => m.DataLabel(d => d.Boder(
b => b.Color("red").Width("2")
)))))
|
Property:Border
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel(d => d.Boder(
b => b.Color("red").Width("2")))))
|
| connector style for dataLabel connector line |
Property:ConnectorLine
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Marker(m => m.DataLabel(d => d.ConnectorLine(
c => c.Type("Curve').Width("2")
)))))
|
Property:connectorStyle
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel(d => d.ConnectorLine(
c => c.Type("Curve').Width("2")
))))
|
| Fill for dataLabel |
Property:Fill
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Marker(m => m.DataLabel(d => d.Fill("red")
))))
|
Property:Fill
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel(d => d.Fill("red")
)))
|
| font for dataLabel |
Property:Font
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Marker(m => m.DataLabel(d => d.Font()
))))
|
Property:font
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel(d => d.Font()
)))
|
| position |
Property:Position
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Marker(m => m.DataLabel(d => d.Position("Inside")
))))
|
Property:Position
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel(d => d.Position("Outside")
)))
|
| Rounded corner radius X | Not Applicable |
Property:DataLabel.Rx
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel(d => d.Rx("10"))))
|
| Rounded corner radius Y | Not Applicable |
Property:DataLabel.Ry
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel(d => d.Ry("10"))))
|
| HTML template in dataLabel |
Property:DataLabel.Template
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Series(s => s.Marker(m => m.DataLabel(d => d.Template("chart")
))))
|
Property:DataLabel.Template
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Series(s => s.DataLabel(d => d.Template("chart")
)))
|
Legend
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Default legend |
Property:Visible
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Visible(true)))
|
Property:Visible
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Visible(true)))
|
| Legend height |
Property:Size.Height
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Size(s => s.Height("10"))))
|
Property:Height
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Height("10")))
|
| Legend width |
Property:Size.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Size(s => s.Width"10"))))
|
Property:Width
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Width("10")))
|
| Legend location in chart |
Property:Location
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Location(loc => loc.X("10").Y("20"))))
|
Property:Location
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Location(loc => loc.X("10").Y("20"))))
|
| Legend position in chart |
Property:Position
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Position("Top")))
|
Property:Position
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Position("Top")))
|
| Legend padding | Not applicable |
Property:Padding
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Padding("8")))
|
| Legend alignment |
Property:Alignment
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Alignment("center")))
|
Property:Alignment
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Alignment("center")))
|
| text style for legend |
Property:Font
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Font()))
|
Property:TextStyle
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Font()))
|
| shape height of legend |
Property:ItemStyle.Height
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.ItemStyle(i => i.Height("10"))))
|
Property:ShapeHeight
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.ShapeHeight("10")))
|
| shape width of legend |
Property:ItemStyle.Width
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.ItemStyle(i => i.Width("10"))))
|
Property:ShapeWidth </br> </br> @(Html.EJS().AccumulationChart("container") .LegendSettings(l => l.ShapeWidth("10"))) </code> |
| shape border of legend |
Property:ItemStyle.Border
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.ItemStyle(i => i.Border())))
|
Not Applicable |
| shape padding of legend |
Property:ItemPadding
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.ItemPadding("10")))
|
Property:ShapePadding
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.ShapePadding("10")))
|
| Background of legend |
Property:Background
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Background("transparent")))
|
Property:Backgorund
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Background("transparent")))
|
| Opacity of legend |
Property:Opacity
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Opacity("0.5")))
|
Property:Opacity
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Opacity("0.5")))
|
| Toggle visibility of series while legend click |
Property:ToggleSeriesVisibility
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.ToggleSeriesVisibility("true")))
|
Property:ToggleVisibility
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.ToggleVisibility<("true")))
|
| Title for legend |
Property:Title
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Title(t => t.Text("chartText"))))
|
Not applicable |
| Text Overflow for legend |
Property:TextOverFlow
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.TextOverFlow("Trim")))
|
Property:TextStyle.TextOverFlow
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendSettings(l => l.Text(t => t.TextOverFlow("trim"))))
|
| Text width for legend while setting text overflow |
Property:TextWidth
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.TextWidth("20")))
|
Not applicable |
| Scroll bar for legend |
Property:EnableScrollBar
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.EnableScrollBar(true)))
|
Not applicable |
| Row count for legend |
Property:RowCount
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.RowCount("3")))
|
Not applicable |
| Column count for legend |
Property:ColumnCount
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.ColumnCount("2")))
|
Not applicable |
| Color for legend items |
Property:Fill
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Legend(l => l.Fill("red")))
|
Not applicable |
Methods
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| animation for series |
Property:Chart.Animate
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Animate()
|
Not applicable |
| Redraw for chart |
Property:Chart.Redraw
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Redraw()
|
Property:Chart.Refresh()
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Refresh()
|
| Export |
Property:Chart.Export()
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Export()
|
Property:Chart.Export()
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Export()
|
Property:Chart.Print()
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Print()
|
Property:Chart.Print()
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Print()
|
|
| AddSeries | Not Applicable |
Property:Chart.AddSeries()
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.AddSeries()
|
| RemoveSeries | Not Applicable |
Property:Chart.RemoveSeries()
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.RemoveSeries()
|
Events
| Behaviour | API in Essential® JS 1 | API in Essential® JS 2 |
| Fires on annotation click |
Property:AnnotationClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AnnotationClick())
|
Not applicable |
| Fires after animation |
Property:AnimationComplete
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AnnotationComplete())
|
Property:AnimationComplete()
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.AnnotationComplete())
|
| Fires on after chart resize |
Property:AfterResize
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.AfterResize())
|
Not applicable |
| Fires on before chart resize |
Property:BeforeResize
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.BeforeResize())
|
Property:Resized
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Resized())
|
| Fires on chart click |
Property:ChartClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartClick())
|
Property:ChartMouseClick
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.ChartMouseClick())
|
| Fires on chart mouse move |
Property:ChartMouseMove
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartMouseMove())
|
Property:ChartMouseMove
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.ChartMouseClick())
|
| Fires on chart mouse leave |
Property:ChartMouseLeave
</br>
</br>
$("#chart").ejChart({
@(Html.EJ().Chart("chartContainer")
.ChartMouseLeave())
|
Property:chartMouseLeave
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.ChartMouseLeave())
|
| Fires on before chart double click |
Property:ChartDoubleClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartDoubleClick())
|
Not applicable |
| Fires on chart mouse up | Not Applicable |
Property:ChartmouseUp
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.ChartmouseUp())
|
| Fires on chart mouse down | Not Applicable |
Property:ChartmouseDown
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.ChartmouseDown())
|
| Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area |
Property:ChartAreaBoundsCalculate
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ChartAreaBoundsCalculate())
|
Not applicable |
| Fires when chart is destroyed completely. |
Property:Destroy
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Destroy())
|
Not applicable |
| Fires after chart is created. |
Property:Create
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Create())
|
Property:Loaded
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Loaded())
|
| Fires before rendering the data labels. |
Property:DisplayTextRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.DisplayTextRendering())
|
Property:TextRender
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.TextRender())
|
| Fires on clicking the legend item. |
Property:LegendItemClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.LegendItemClick())
|
Not applicable |
| Fires when moving mouse over legend item |
Property:LegendItemMouseMove
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.LegendItemMouseMove())
|
Not applicable |
| Fires before rendering the legend item. |
Property:LegendItemRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.LegendItemRendering())
|
Property:LegendRender
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.LegendRender())
|
| Fires before loading the chart. |
Property:Load
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.Load())
|
Property:Load
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.Load())
|
| Fires on clicking a point in chart. |
Property:PointRegionClick
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PointRegionClick())
|
Property:PointClick
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.PointClick())
|
| Fires when mouse is moved over a point. |
Property:PointRegionMouseMove
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PointRegionMouseMove())
|
Property:PointMove
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.PointMove())
|
| Fires before rendering chart. |
Property:PreRender
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.PreRender())
|
Not applicable |
| Fires when point render. | Not Applicable |
Property:PointRender
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.PointRender())
|
| Fires before rendering a series. |
Property:SeriesRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SeriesRendering())
|
Property:SeriesRender
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.SeriesRender())
|
| Fires before rendering the Chart title. |
Property:TitleRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.TitleRendering())
|
Not applicable |
| Fires before rendering the Chart sub title. |
Property:SubTitleRendering
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.SubTitleRendering())
|
Not applicable |
| Fires before rendering the tooltip. |
Property:ToolTipInitialize
</br>
</br>
@(Html.EJ().Chart("chartContainer")
.ToolTipInitialize())
|
Property:TooltipRender
</br>
</br>
@(Html.EJS().AccumulationChart("container")
.TooltipRender())
|