Represents the AccumulationChart control.
<div id="accumulation"/>
<script>
var accObj = new AccumulationChart({});
accObj.appendTo("#accumulation");
</script>Options to improve accessibility for accumulation chart elements.
The accumulationDataLabelModule is used to manipulate and add data labels in an accumulation chart.
The accumulationHighlightModule is used to manipulate and add highlights to the accumulation chart.
The accumulationLegendModule is used to manipulate and add a legend in an accumulation chart.
The accumulationSelectionModule is used to manipulate and add selection in accumulation chart.
The accumulationTooltipModule is used to manipulate and add tooltips to an accumulation chart.
boolean
To enable export feature in blazor chart.
Defaults to false
The annotationModule is used to manipulate and add annotations in the chart.
AccumulationAnnotationSettingsModel[]
Annotations are used to highlight specific data points or areas in the chart, providing additional context and information.
string
The background color of the chart, which accepts values in hex or rgba formats as valid CSS color strings.
Defaults to null
string
The background image of the chart accepts a string value as a URL link or the location of an image.
Defaults to null
Options for customizing the appearance of the border in the chart by using the color and width properties in the border.
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.
Options to customize the label that appears at the center of the accumulation chart.
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 ”
boolean
If set to true, enables animation for the accumulation chart.
Defaults to true
boolean
If set to true, enables the border in pie and accumulation charts when the mouse moves over a data point.
Defaults to true
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
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
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
If set to true, labels for the points will be placed smartly to avoid overlapping.
Defaults to true
Export
The exportModule is used to export the accumulation chart.
string
Customize the focus border color. If not specified, the element will use the default focus border color.
Defaults to null
number
Customize the focus border margin. If not specified, the element will use the default focus border margin.
Defaults to 0
number
Customize the focus border width. If not specified, the element will use the default focus border width.
Defaults to 1.5
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
string
Defines the color used to highlight a data point on mouse hover.
Defaults to ”
Specifies whether points in the accumulation chart should be highlighted. Accepts the following values:
Defaults to None
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:
Defaults to None
boolean
When set to true, allows for the selection of multiple data points.
Note that
selectionModemust be set toPointfor multi-selection to be enabled.
Defaults to false
The legend provides descriptive information about the data points displayed in the accumulation chart, helping to understand what each point represents.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
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.
Specifies the point indexes to be selected when the accumulation chart is initially loaded.
Note that
selectionModemust be set toPointfor this feature to work.
<div id='Pie'></div>let pie: AccumulationChart = new AccumulationChart({
...
selectionMode: 'Point',
selectedDataIndexes: [ { series: 0, point: 1},
{ series: 2, point: 3} ],
...
});
pie.appendTo('#Pie');Defaults to []
Specifies whether points in the accumulation chart can be selected. Accepts the following values:
Defaults to None
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:
Defaults to None
The configuration for series in the accumulation chart.
string
The subtitle is positioned below the main title and provides further details about the data represented in the accumulation chart.
Defaults to null
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.
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:
Defaults to ‘Material’
string
The title is displayed at the top of the chart to provide information about the plotted data.
Defaults to null
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.
Tooltips display information about the data points when the mouse hovers over a point.
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
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
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
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
Adding unload event to persist data when enable persistence true
Returns void
Method to calculate bounds for accumulation chart.
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
Removing unload event to persist data when enable persistence true
Returns void
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
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
Handling unload event to persist data when enable persistence true
Returns void
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
Applies all the pending property changes and render the component again.
Returns void
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
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
Dynamically injects the required modules to the component.
| Parameter | Type | Description |
|---|---|---|
| moduleList | Function[] |
? |
Returns void
EmitType<IAfterExportEventArgs>
Triggers after the export is completed.
EmitType<IAccAnimationCompleteEventArgs>
Triggers after the animation for the series is completed.
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.
Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.
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.
EmitType<IAccBeforeResizeEventArgs>
Triggers before the window resize event occurs. This event allows for modifications to the accumulation chart size before resizing.
EmitType<IMouseEventArgs>
Triggers when double-clicking the accumulation chart.
EmitType<IMouseEventArgs>
Triggers when clicking on the accumulation chart.
EmitType<IMouseEventArgs>
Triggers on the mouse down event within the accumulation chart.
EmitType<IMouseEventArgs>
Triggers when the cursor leaves the accumulation chart.
EmitType<IMouseEventArgs>
Triggers when hovering over the accumulation chart.
EmitType<IMouseEventArgs>
Triggers on the mouse up event within the accumulation chart.
EmitType<IAccLegendClickEventArgs>
Triggers after the legend is clicked.
EmitType<ILegendRenderEventArgs>
Triggers before the legend gets rendered. This allows the customization of legend before rendering on the accumulation chart.
Triggers before the accumulation chart loads. This event allows for customization and configuration before the accumulation chart is rendered.
Triggers after the accumulation chart has been loaded.
EmitType<IPointEventArgs>
Triggers when a point in the accumulation chart is clicked.
EmitType<IPointEventArgs>
Triggers when a point in the accumulation chart is moved.
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.
Triggers after the window resize event completes.
EmitType<IAccSelectionCompleteEventArgs>
Triggers after the selection is completed.
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.
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.
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.