arcgis-charts-action-bar | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/charts-components/components/arcgis-charts-action-bar";

Inheritance:: ArcgisChartsActionBar→PublicLitElement

Since: ArcGIS Maps SDK for JavaScript 4.29

The Charts Action Bar component provides context-specific actions such as rotation, zooming, and filtering, as well as general actions like exporting the chart as an image or CSV file. This component is designed to be used with a chart component and is not intended for standalone use.

See also

Tutorial: Chart and map interactions

Demo

Properties

Property	Attribute	Type
`actionBarSelectionMode`	`action-bar-selection-mode`	`Extract<ActionModes, "monoSelection" \| "multiSelection" \| "multiSelectionWithCtrlKey"> \| undefined`
`chartElement`		`ArcgisChart \| undefined`
`chartType`	`chart-type`	`ChartTypes \| undefined`
`clearSelectionState`	`clear-selection-state`	`ActionState`
`clearSelectionTitle`	`clear-selection-title`	`string \| undefined`
`clearSelectionToggle`	`clear-selection-toggle`	`ActionToggle`
`disableCSVExportForChartTypes`		`WebChartTypes[]`
`editChartState`	`edit-chart-state`	`ActionState`
`editChartTitle`	`edit-chart-title`	`string \| undefined`
`editChartToggle`	`edit-chart-toggle`	`ActionToggle`
`expanded`	`expanded`	`boolean`
`exportActionState`	`export-action-state`	`ActionState`
`exportAsCSVState`	`export-as-csv-state`	`ActionState`
`exportAsCSVTitle`	`export-as-csv-title`	`string \| undefined`
`exportAsImageState`	`export-as-image-state`	`ActionState`
`exportAsImageTitle`	`export-as-image-title`	`string \| undefined`
`filterByExtentState`	`filter-by-extent-state`	`ActionState`
`filterByExtentTitle`	`filter-by-extent-title`	`string \| undefined`
`filterByExtentToggle`	`filter-by-extent-toggle`	`ActionToggle`
`filterBySelectionState`	`filter-by-selection-state`	`ActionState`
`filterBySelectionTitle`	`filter-by-selection-title`	`string \| undefined`
`filterBySelectionToggle`	`filter-by-selection-toggle`	`ActionToggle`
`forceDisableActions`	`force-disable-actions`	`boolean`
`fullExtentState`	`full-extent-state`	`ActionState`
`fullExtentTitle`	`full-extent-title`	`string \| undefined`
`fullExtentToggle`	`full-extent-toggle`	`ActionToggle`
`hiddenActions`		`DefaultChartActions[]`
`legendState`	`legend-state`	`ActionState`
`legendTitle`	`legend-title`	`string \| undefined`
`legendToggle`	`legend-toggle`	`ActionToggle`
`messageOverrides`		`Record<string, unknown> \| undefined`
`rotateChartState`	`rotate-chart-state`	`ActionState`
`rotateChartTitle`	`rotate-chart-title`	`string \| undefined`
`rotateChartToggle`	`rotate-chart-toggle`	`ActionToggle`
`selectionState`	`selection-state`	`ActionState`
`selectionTitle`	`selection-title`	`string \| undefined`
`selectionToggle`	`selection-toggle`	`ActionToggle`
`switchSelectionState`	`switch-selection-state`	`ActionState`
`switchSelectionTitle`	`switch-selection-title`	`string \| undefined`
`switchSelectionToggle`	`switch-selection-toggle`	`ActionToggle`
`zoomState`	`zoom-state`	`ActionState`
`zoomTitle`	`zoom-title`	`string \| undefined`
`zoomToggle`	`zoom-toggle`	`ActionToggle`

actionBarSelectionMode

Property

Type: Extract<ActionModes, "monoSelection" | "multiSelection" | "multiSelectionWithCtrlKey"> | undefined

Defines which selection mode the slotted action bar should use.

monoSelection: Select a single data point/series, new selection replaces the previous one.
multiSelection: Select multiple data points/series, new selection adds to the previous one.
multiSelectionWithCtrlKey: Select multiple data points/series while holding the Ctrl key (Cmd key on Mac), new selection adds to the previous one.

Attribute: action-bar-selection-mode
Default value: "multiSelectionWithCtrlKey"

chartElement

Property

Type: ArcgisChart | undefined

Chart element reference with which the action bar is associated.

chartType

Property

Type: ChartTypes | undefined

Chart type used to determine which default actions to display.

Attribute: chart-type

clearSelectionState

Property

Type: ActionState

When disabled, interaction with the clear selection action is prevented and the component is displayed with lower opacity.

Attribute: clear-selection-state
Default value: "enabled"

clearSelectionTitle

Property

Type: string | undefined

Custom title for the clear selection action.

Attribute: clear-selection-title

clearSelectionToggle

Property

Type: ActionToggle

When active, the clear selection action is highlighted.

Attribute: clear-selection-toggle
Default value: "inactive"

disableCSVExportForChartTypes

Property

Type: WebChartTypes[]

The CSV export action is disabled for certain chart types.

Modify this property to add or remove chart types from the list of disabled types.

editChartState

Property

Type: ActionState

When disabled, interaction with the edit chart action is prevented and the component is displayed with lower opacity.

Attribute: edit-chart-state
Default value: "disabled"

editChartTitle

Property

Type: string | undefined

Custom title for the edit chart action.

Attribute: edit-chart-title

editChartToggle

Property

Type: ActionToggle

When active, the edit chart action is highlighted.

Attribute: edit-chart-toggle
Default value: "inactive"

expanded

Property

Type: boolean

When true, the action bar is expanded.

Attribute: expanded
Default value: false

exportActionState

Property

Type: ActionState

When disabled, interaction with the export action is prevented and the component is displayed with lower opacity.

Attribute: export-action-state
Default value: "enabled"

exportAsCSVState

Property

Type: ActionState

When disabled, interaction with the download CSV is prevented and the component is displayed with lower opacity.

Attribute: export-as-csv-state
Default value: "enabled"

exportAsCSVTitle

Property

Type: string | undefined

Custom title for the download CSV action.

Attribute: export-as-csv-title

exportAsImageState

Property

Type: ActionState

When disabled, interaction with the download image is prevented and the component is displayed with lower opacity.

Attribute: export-as-image-state
Default value: "enabled"

exportAsImageTitle

Property

Type: string | undefined

Custom title for the download chart action.

Attribute: export-as-image-title

filterByExtentState

Property

Type: ActionState

When disabled, interaction with the filter by extent action is prevented and the component is displayed with lower opacity.

Attribute: filter-by-extent-state
Default value: "enabled"

filterByExtentTitle

Property

Type: string | undefined

Custom title for the filter by extent action.

Attribute: filter-by-extent-title

filterByExtentToggle

Property

Type: ActionToggle

When active, the filter by extent action is highlighted.

Attribute: filter-by-extent-toggle
Default value: "inactive"

filterBySelectionState

Property

Type: ActionState

When disabled, interaction with the filter by selection action is prevented and the component is displayed with lower opacity.

Attribute: filter-by-selection-state
Default value: "enabled"

filterBySelectionTitle

Property

Type: string | undefined

Custom title for the filter by selection action.

Attribute: filter-by-selection-title

filterBySelectionToggle

Property

Type: ActionToggle

When active, the filter by selection action is highlighted.

Attribute: filter-by-selection-toggle
Default value: "inactive"

forceDisableActions

Property

Type: boolean

When true, overrides the individual settings for each action to instead force disable them all.

Attribute: force-disable-actions
Default value: false

fullExtentState

Property

Type: ActionState

When disabled, interaction with the full extent action is prevented and the component is displayed with lower opacity.

Attribute: full-extent-state
Default value: "enabled"

fullExtentTitle

Property

Type: string | undefined

Custom title for the full extent action.

Attribute: full-extent-title

fullExtentToggle

Property

Type: ActionToggle

When active, the full extent action is highlighted.

Attribute: full-extent-toggle
Default value: "inactive"

hiddenActions

Property

Type: DefaultChartActions[]

Holds a list of actions to hide from the action bar.

Note: The edit chart action is hidden by default. To show it, remove its value from this array.

legendState

Property

Type: ActionState

When disabled, interaction with the legend action is prevented and the component is displayed with lower opacity.

Attribute: legend-state
Default value: "enabled"

legendTitle

Property

Type: string | undefined

Custom title for the legend action.

Attribute: legend-title

legendToggle

Property

Type: ActionToggle

When active, the legend action is highlighted.

Attribute: legend-toggle
Default value: "inactive"

messageOverrides

Property

Type: Record<string, unknown> | undefined

Overwrite localized strings for this component.

rotateChartState

Property

Type: ActionState

When disabled, interaction with the rotate chart action is prevented and the component is displayed with lower opacity.

Attribute: rotate-chart-state
Default value: "enabled"

rotateChartTitle

Property

Type: string | undefined

Custom title for the rotate chart action.

Attribute: rotate-chart-title

rotateChartToggle

Property

Type: ActionToggle

When active, the rotate chart action is highlighted.

Attribute: rotate-chart-toggle
Default value: "inactive"

selectionState

Property

Type: ActionState

When disabled, interaction with the selection action is prevented and the component is displayed with lower opacity.

Attribute: selection-state
Default value: "enabled"

selectionTitle

Property

Type: string | undefined

Custom title for the selection action.

Attribute: selection-title

selectionToggle

Property

Type: ActionToggle

When active, the selection action is highlighted.

Attribute: selection-toggle
Default value: "inactive"

switchSelectionState

Property

Type: ActionState

When disabled, interaction with the switch selection action is prevented and the component is displayed with lower opacity.

Attribute: switch-selection-state
Default value: "enabled"

switchSelectionTitle

Property

Type: string | undefined

Custom title for the switch selection action.

Attribute: switch-selection-title

switchSelectionToggle

Property

Type: ActionToggle

When active, the switch selection action is highlighted.

Attribute: switch-selection-toggle
Default value: "inactive"

zoomState

Property

Type: ActionState

When disabled, interaction with the zoom action is prevented and the component is displayed with lower opacity.

Attribute: zoom-state
Default value: "enabled"

zoomTitle

Property

Type: string | undefined

Custom title for the zoom action.

Attribute: zoom-title

zoomToggle

Property

Type: ActionToggle

When active, the zoom action is highlighted.

Attribute: zoom-toggle
Default value: "inactive"

Methods

Method	Signature
`componentOnReady` inherited	`componentOnReady(): Promise<this>`

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: PublicLitElement

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisChartsActionBar = document.querySelector("arcgis-charts-action-bar");
document.body.append(arcgisChartsActionBar);
await arcgisChartsActionBar.componentOnReady();
console.log("arcgis-charts-action-bar is ready to go!");

Events

Name	Type
`arcgisActionBarToggle`	CustomEvent<boolean>
`arcgisDefaultActionSelect`	CustomEvent<DefaultActionSelectPayload>

arcgisActionBarToggle

Event

arcgisActionBarToggle: CustomEvent<boolean>

Event triggered once action bar expand is toggled.

arcgisDefaultActionSelect

Event

arcgisDefaultActionSelect: CustomEvent<DefaultActionSelectPayload>

Event triggered once a default action is selected.

Slots

Name	Description
`custom-action-top`	A slot for adding custom `calcite-action` to the top of the default actions.
`custom-action-below`	A slot for adding custom `calcite-action` to the bottom of the default actions.