AccumulationChart

3 Oct 202515 minutes to read

Represents the AccumulationChart control.

<div id="accumulation"/>
<script>
  var accObj = new AccumulationChart({});
  accObj.appendTo("#accumulation");
</script>

Properties

accessibility AccessibilityModel

Options to improve accessibility for accumulation chart elements.

accumulationDataLabelModule AccumulationDataLabel

The accumulationDataLabelModule is used to manipulate and add data labels in an accumulation chart.

accumulationHighlightModule AccumulationHighlight

The accumulationHighlightModule is used to manipulate and add highlights to the accumulation chart.

accumulationLegendModule AccumulationLegend

The accumulationLegendModule is used to manipulate and add a legend in an accumulation chart.

accumulationSelectionModule AccumulationSelection

The accumulationSelectionModule is used to manipulate and add selection in accumulation chart.

accumulationTooltipModule AccumulationTooltip

The accumulationTooltipModule is used to manipulate and add tooltips to an accumulation chart.

allowExport boolean

To enable export feature in blazor chart.

Defaults to false

annotationModule AccumulationAnnotation

The annotationModule is used to manipulate and add annotations in the chart.

annotations AccumulationAnnotationSettingsModel[]

Annotations are used to highlight specific data points or areas in the chart, providing additional context and information.

background string

The background color of the chart, which accepts values in hex or rgba formats as valid CSS color strings.

Defaults to null

backgroundImage string

The background image of the chart accepts a string value as a URL link or the location of an image.

Defaults to null

border BorderModel

Options for customizing the appearance of the border in the chart by using the color and width properties in the border.

center PieCenterModel

The center property allows changing the center position of the pie chart using the x and y properties.
By default, the center value of the pie series is set to 50% for both the x and y coordinates.

centerLabel CenterLabelModel

Options to customize the label that appears at the center of the accumulation chart.

dataSource Object|DataManager

Specifies the data source for the accumulation chart. It can be an array of JSON objects, or an instance of DataManager.

<div id='Pie'></div>
let dataManager: DataManager = new DataManager({
 url: https://services.syncfusion.com/js/production/api/orders'
});
let query: Query = new Query().take(5);
let pie: AccumulationChart = new AccumulationChart({
...
    dataSource: dataManager,
    series: [{
       xName: 'CustomerID ',
       yName: 'Freight',
       query: query
   }],
...
});
pie.appendTo('#Pie');

Defaults to ’’

enableAnimation boolean

If set to true, enables animation for the accumulation chart.

Defaults to true

enableBorderOnMouseMove boolean

If set to true, enables the border in pie and accumulation charts when the mouse moves over a data point.

Defaults to true

enableExport boolean

When set to true, it enables exporting the accumulation chart to various formats such as JPEG, PNG, SVG, PDF, XLSX, or CSV.

Defaults to true

enableHtmlSanitizer boolean

Specifies whether to display or remove the untrusted HTML values in the Accumulation Chart component.
If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.

Defaults to false

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableSmartLabels boolean

If set to true, labels for the points will be placed smartly to avoid overlapping.

Defaults to true

exportModule Export

The exportModule is used to export the accumulation chart.

focusBorderColor string

Customize the focus border color.
If not specified, the element will use the default focus border color.

Defaults to null

focusBorderMargin number

Customize the focus border margin.
If not specified, the element will use the default focus border margin.

Defaults to 0

focusBorderWidth number

Customize the focus border width.
If not specified, the element will use the default focus border width.

Defaults to 1.5

height string

The height of the chart as a string, allowing input in formats such as ‘100px’ or ‘100%’.
If specified as ‘100%’, the chart will render to the full height of its parent element.

Defaults to null

highlightColor string

Defines the color used to highlight a data point on mouse hover.

Defaults to ’’

highlightMode AccumulationHighlightMode

Specifies whether points in the accumulation chart should be highlighted.
Accepts the following values:

  • None: Disables the highlighting of points.
  • Point: Highlights an individual point on hover.

Defaults to None

highlightPattern SelectionPattern

Specifies the pattern used for highlighting series or data points.
The highlightPattern property determines how the data points or series are visually highlighted.
The available options are:

  • None: No highlighting pattern.
  • Chessboard: Applies a chessboard pattern for highlighting.
  • Dots: Applies a dot pattern for highlighting.
  • DiagonalForward: Applies a forward diagonal line pattern for highlighting.
  • Crosshatch: Applies a crosshatch pattern for highlighting.
  • Pacman: Applies a Pacman pattern for highlighting.
  • DiagonalBackward: Applies a backward diagonal line pattern for highlighting.
  • Grid: Applies a grid pattern for highlighting.
  • Turquoise: Applies a turquoise pattern for highlighting.
  • Star: Applies a star pattern for highlighting.
  • Triangle: Applies a triangle pattern for highlighting.
  • Circle: Applies a circle pattern for highlighting.
  • Tile: Applies a tile pattern for highlighting.
  • HorizontalDash: Applies a horizontal dash pattern for highlighting.
  • VerticalDash: Applies a vertical dash pattern for highlighting.
  • Rectangle: Applies a rectangle pattern for highlighting.
  • Box: Applies a box pattern for highlighting.
  • VerticalStripe: Applies a vertical stripe pattern for highlighting.
  • HorizontalStripe: Applies a horizontal stripe pattern for highlighting.
  • Bubble: Applies a bubble pattern for highlighting.

Defaults to None

isMultiSelect boolean

When set to true, allows for the selection of multiple data points.

Note that selectionMode must be set to Point for multi-selection to be enabled.

Defaults to false

legendSettings LegendSettingsModel

The legend provides descriptive information about the data points displayed in the accumulation chart, helping to understand what each point represents.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

margin MarginModel

Options to customize the margins around the accumulation chart, including the left, right, top, and bottom margins.
These margins define the space between the outer edge of the accumulation chart and its chart area.

noDataTemplate string|Function

Specifies the template to be displayed when the chart has no data.
This property enables the users to display customized messages, images, or other UI elements in place of an empty chart.
It provides a better user experience by offering context when no data points are available.

Defaults to null

selectedDataIndexes IndexesModel[]

Specifies the point indexes to be selected when the accumulation chart is initially loaded.

Note that selectionMode must be set to Point for this feature to work.
```html

```typescript
let pie: AccumulationChart = new AccumulationChart({
...
  selectionMode: 'Point',
  selectedDataIndexes: [ { series: 0, point: 1},
                         { series: 2, point: 3} ],
...
});
pie.appendTo('#Pie');

Defaults to []

selectionMode AccumulationSelectionMode

Specifies whether points in the accumulation chart can be selected.
Accepts the following values:

  • None: Disables the selection of points.
  • Point: Enables the selection of individual points.

Defaults to None

selectionPattern SelectionPattern

Specifies the selection pattern for series or data points.
The selectionPattern property determines how the selected data points or series are visually represented.
The available options are:

  • None: No selection pattern is applied.
  • Chessboard: Applies a chessboard pattern as the selection effect.
  • Dots: Applies a dot pattern as the selection effect.
  • DiagonalForward: Applies a forward diagonal line pattern as the selection effect.
  • Crosshatch: Applies a crosshatch pattern as the selection effect.
  • Pacman: Applies a Pacman pattern as the selection effect.
  • DiagonalBackward: Applies a backward diagonal line pattern as the selection effect.
  • Grid: Applies a grid pattern as the selection effect.
  • Turquoise: Applies a turquoise pattern as the selection effect.
  • Star: Applies a star pattern as the selection effect.
  • Triangle: Applies a triangle pattern as the selection effect.
  • Circle: Applies a circle pattern as the selection effect.
  • Tile: Applies a tile pattern as the selection effect.
  • HorizontalDash: Applies a horizontal dash pattern as the selection effect.
  • VerticalDash: Applies a vertical dash pattern as the selection effect.
  • Rectangle: Applies a rectangle pattern as the selection effect.
  • Box: Applies a box pattern as the selection effect.
  • VerticalStripe: Applies a vertical stripe pattern as the selection effect.
  • HorizontalStripe: Applies a horizontal stripe pattern as the selection effect.
  • Bubble: Applies a bubble pattern as the selection effect.

Defaults to None

series AccumulationSeriesModel[]

The configuration for series in the accumulation chart.

subTitle string

The subtitle is positioned below the main title and provides further details about the data represented in the accumulation chart.

Defaults to null

subTitleStyle TitleStyleSettingsModel

Options for customizing the appearance of the subtitle, which displays information about the plotted data below the main title.
Use the fontFamily, size, fontStyle, fontWeight, and color properties in Font to adjust the subtitle’s appearance.

theme AccumulationTheme

The theme applied to the accumulation chart for visual styling.
Choose from predefined themes to change the overall look and feel of the accumulation chart.
The available themes are:

  • Fabric
  • FabricDark
  • Bootstrap4
  • Bootstrap
  • BootstrapDark
  • HighContrastLight
  • HighContrast
  • Tailwind
  • TailwindDark
  • Bootstrap5
  • Bootstrap5Dark
  • Fluent
  • FluentDark
  • Fluent2
  • Fluent2Dark
  • Fluent2HighContrast
  • Material3
  • Material3Dark
  • Material
  • MaterialDark

Defaults to ‘Material’

title string

The title is displayed at the top of the chart to provide information about the plotted data.

Defaults to null

titleStyle TitleStyleSettingsModel

Options for customizing the appearance of the title, which displays information about the plotted data.
Use the fontFamily, size, fontStyle, fontWeight, and color properties in Font to adjust the title’s appearance.

tooltip TooltipSettingsModel

Tooltips display information about the data points when the mouse hovers over a point.

useGroupingSeparator boolean

When set to true, a grouping separator will be used for numbers to separate groups of thousands in the accumulation chart.

Defaults to false

width string

The width of the chart as a string, allowing input in formats such as ‘100px’ or ‘100%’.
If specified as ‘100%’, the chart will render to the full width of its parent element.

Defaults to null

Methods

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

calculateBounds

Method to calculate bounds for accumulation chart.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

export

Export method for the chart.

Parameter Type Description
type ExportType The type of export.
fileName string The name of the file for export.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

print

Handles the print method for accumulation chart control.

Parameter Type Description
id (optional) string[] | string | Element The id of the accumulation chart to be printed on the page.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

setAnnotationValue

Method to set the annotation content dynamically for accumulation.

Parameter Type Description
annotationIndex number The index of the annotation.
content string The content to set for the annotation.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

afterExport EmitType<IAfterExportEventArgs>

Triggers after the export is completed.

animationComplete EmitType<IAccAnimationCompleteEventArgs>

Triggers after the animation for the series is completed.

annotationRender EmitType<IAnnotationRenderEventArgs>

Triggers before the annotation gets rendered. This event allows for modifications of the annotation content and its location before it is rendered on the accumulation chart.

beforeExport EmitType<IExportEventArgs>

Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.

beforePrint EmitType<IPrintEventArgs>

Triggers before the print process starts. This event allows for the modification of the accumulation chart’s HTML content before it is sent to the printer.

beforeResize EmitType<IAccBeforeResizeEventArgs>

Triggers before the window resize event occurs. This event allows for modifications to the accumulation chart size before resizing.

chartDoubleClick EmitType<IMouseEventArgs>

Triggers when double-clicking the accumulation chart.

chartMouseClick EmitType<IMouseEventArgs>

Triggers when clicking on the accumulation chart.

chartMouseDown EmitType<IMouseEventArgs>

Triggers on the mouse down event within the accumulation chart.

chartMouseLeave EmitType<IMouseEventArgs>

Triggers when the cursor leaves the accumulation chart.

chartMouseMove EmitType<IMouseEventArgs>

Triggers when hovering over the accumulation chart.

chartMouseUp EmitType<IMouseEventArgs>

Triggers on the mouse up event within the accumulation chart.

legendClick EmitType<IAccLegendClickEventArgs>

Triggers after the legend is clicked.

legendRender EmitType<ILegendRenderEventArgs>

Triggers before the legend gets rendered. This allows the customization of legend before rendering on the accumulation chart.

load EmitType<IAccLoadedEventArgs>

Triggers before the accumulation chart loads. This event allows for customization and configuration before the accumulation chart is rendered.

loaded EmitType<IAccLoadedEventArgs>

Triggers after the accumulation chart has been loaded.

pointClick EmitType<IPointEventArgs>

Triggers when a point in the accumulation chart is clicked.

pointMove EmitType<IPointEventArgs>

Triggers when a point in the accumulation chart is moved.

pointRender EmitType<IAccPointRenderEventArgs>

Triggers before each point in the series gets rendered. This allows for the customization of each data point before it is rendered on the accumulation chart.

resized EmitType<IAccResizeEventArgs>

Triggers after the window resize event completes.

selectionComplete EmitType<IAccSelectionCompleteEventArgs>

Triggers after the selection is completed.

seriesRender EmitType<IAccSeriesRenderEventArgs>

Triggers before the series gets rendered. This event allows for the customization of series properties before they are rendered on the accumulation chart.

textRender EmitType<IAccTextRenderEventArgs>

Triggers before the data label for the series gets rendered. This allows customization of data labels before they are rendered on the accumulation chart.

tooltipRender EmitType<ITooltipRenderEventArgs>

Triggers before the tooltip for the series gets rendered. This event allows customization of the tooltip properties such as text, style, and template before it is rendered on the accumulation chart.