Charts Action Bar

ESM:

Use dark colors for code blocksCopy
import "@arcgis/charts-components/components/arcgis-charts-action-bar";

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.29

The ArcGIS Charts Action Bar component enhances chart functionality by providing 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.

Demo

Properties

Property	Attribute	Type
`actionBarSelectionMode` reflected	`action-bar-selection-mode`	`"monoSelection" \| "multiSelection" \| "multiSelectionWithCtrlKey"`
`chartElement`		`HTMLArcgisChartElement`
`chartType` reflected	`chart-type`	`"barSeries" \| "boxPlotSeries" \| "comboLineAndBarSeries" \| "gaugeSeries" \| "heatSeries" \| "histogramSeries" \| "lineSeries" \| "pieSeries" \| "radarSeries" \| "scatterSeries"`
`clearSelectionState` reflected	`clear-selection-state`	`"disabled" \| "enabled"`
`clearSelectionTitle` reflected	`clear-selection-title`	`string`
`clearSelectionToggle` reflected	`clear-selection-toggle`	`"active" \| "inactive"`
`disableCSVExportForChartTypes` reflected		`Array<"number" \| "chart" \| "chartText" \| "chartOverlay" \| "chartOverlays" \| "chartLegend" \| "cursorCrosshair" \| "chartAxis" \| "gaugeAxisTick" \| "gaugeNeedle" \| "category" \| "date" \| "chartGuide" \| "scatterSeries" \| "pieSeries" \| "pieTick" \| "gaugeSeries" \| "lineSeries" \| "barSeries" \| "histogramSeries" \| "boxPlotSeries" \| "radarSeries" \| "comboLineAndBarSeries" \| "heatSeries" \| "buffer" \| "sizeScale" \| "calendarDateParts">`
`editChartState` reflected	`edit-chart-state`	`"disabled" \| "enabled"`
`editChartTitle` reflected	`edit-chart-title`	`string`
`editChartToggle` reflected	`edit-chart-toggle`	`"active" \| "inactive"`
`expanded` reflected	`expanded`	`boolean`
`exportActionState` reflected	`export-action-state`	`"disabled" \| "enabled"`
`exportAsCSVState` reflected	`export-as-csv-state`	`"disabled" \| "enabled"`
`exportAsCSVTitle` reflected	`export-as-csv-title`	`string`
`exportAsImageState` reflected	`export-as-image-state`	`"disabled" \| "enabled"`
`exportAsImageTitle` reflected	`export-as-image-title`	`string`
`filterByExtentState` reflected	`filter-by-extent-state`	`"disabled" \| "enabled"`
`filterByExtentTitle` reflected	`filter-by-extent-title`	`string`
`filterByExtentToggle` reflected	`filter-by-extent-toggle`	`"active" \| "inactive"`
`filterBySelectionState` reflected	`filter-by-selection-state`	`"disabled" \| "enabled"`
`filterBySelectionTitle` reflected	`filter-by-selection-title`	`string`
`filterBySelectionToggle` reflected	`filter-by-selection-toggle`	`"active" \| "inactive"`
`forceDisableActions` reflected	`force-disable-actions`	`boolean`
`fullExtentState` reflected	`full-extent-state`	`"disabled" \| "enabled"`
`fullExtentTitle` reflected	`full-extent-title`	`string`
`fullExtentToggle` reflected	`full-extent-toggle`	`"active" \| "inactive"`
`hiddenActions`		`Array<"legend" \| "zoom" \| "editChart" \| "fullExtent" \| "filterBySelection" \| "filterByExtent" \| "rotateChart" \| "selection" \| "clearSelection" \| "switchSelection" \| "exportAsImage" \| "exportAsCSV">`
`legendState` reflected	`legend-state`	`"disabled" \| "enabled"`
`legendTitle` reflected	`legend-title`	`string`
`legendToggle` reflected	`legend-toggle`	`"active" \| "inactive"`
`messageOverrides`		`Record<string, unknown>`
`rotateChartState` reflected	`rotate-chart-state`	`"disabled" \| "enabled"`
`rotateChartTitle` reflected	`rotate-chart-title`	`string`
`rotateChartToggle` reflected	`rotate-chart-toggle`	`"active" \| "inactive"`
`selectionState` reflected	`selection-state`	`"disabled" \| "enabled"`
`selectionTitle` reflected	`selection-title`	`string`
`selectionToggle` reflected	`selection-toggle`	`"active" \| "inactive"`
`switchSelectionState` reflected	`switch-selection-state`	`"disabled" \| "enabled"`
`switchSelectionTitle` reflected	`switch-selection-title`	`string`
`switchSelectionToggle` reflected	`switch-selection-toggle`	`"active" \| "inactive"`
`zoomState` reflected	`zoom-state`	`"disabled" \| "enabled"`
`zoomTitle` reflected	`zoom-title`	`string`
`zoomToggle` reflected	`zoom-toggle`	`"active" \| "inactive"`

actionBarSelectionMode

Property

actionBarSelectionMode: "monoSelection" | "multiSelection" | "multiSelectionWithCtrlKey"

Action bar selection mode. Defines which selection mode the slotted action bar should use.

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

chartElement

Property

chartElement: HTMLArcgisChartElement

Chart element reference with which the action bar is associated.

Default value: undefined

chartType

Property

chartType: "barSeries" | "boxPlotSeries" | "comboLineAndBarSeries" | "gaugeSeries" | "heatSeries" | "histogramSeries" | "lineSeries" | "pieSeries" | "radarSeries" | "scatterSeries"

Chart type used to determine which default actions to display.

Attribute: chart-type
Default value: undefined

clearSelectionState

Property

clearSelectionState: "disabled" | "enabled"

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

clearSelectionTitle: string

Custom title for the clear selection action.

Attribute: clear-selection-title
Default value: undefined

clearSelectionToggle

Property

clearSelectionToggle: "active" | "inactive"

When active, the clear selection action is highlighted.

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

disableCSVExportForChartTypes

Property

disableCSVExportForChartTypes: Array<"number" | "chart" | "chartText" | "chartOverlay" | "chartOverlays" | "chartLegend" | "cursorCrosshair" | "chartAxis" | "gaugeAxisTick" | "gaugeNeedle" | "category" | "date" | "chartGuide" | "scatterSeries" | "pieSeries" | "pieTick" | "gaugeSeries" | "lineSeries" | "barSeries" | "histogramSeries" | "boxPlotSeries" | "radarSeries" | "comboLineAndBarSeries" | "heatSeries" | "buffer" | "sizeScale" | "calendarDateParts">

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.

Default value: [WebChartTypes.ScatterSeries, WebChartTypes.BoxPlotSeries]

editChartState

Property

editChartState: "disabled" | "enabled"

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

editChartTitle: string

Custom title for the edit chart action.

Attribute: edit-chart-title
Default value: undefined

editChartToggle

Property

editChartToggle: "active" | "inactive"

When active, the edit chart action is highlighted.

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

expanded

Property

expanded: boolean

When true, the action bar is expanded.

Attribute: expanded
Default value: false

exportActionState

Property

exportActionState: "disabled" | "enabled"

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

exportAsCSVState: "disabled" | "enabled"

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

exportAsCSVTitle: string

Custom title for the download CSV action.

Attribute: export-as-csv-title
Default value: undefined

exportAsImageState

Property

exportAsImageState: "disabled" | "enabled"

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

exportAsImageTitle: string

Custom title for the download chart action.

Attribute: export-as-image-title
Default value: undefined

filterByExtentState

Property

filterByExtentState: "disabled" | "enabled"

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

filterByExtentTitle: string

Custom title for the filter by extent action.

Attribute: filter-by-extent-title
Default value: undefined

filterByExtentToggle

Property

filterByExtentToggle: "active" | "inactive"

When active, the filter by extent action is highlighted.

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

filterBySelectionState

Property

filterBySelectionState: "disabled" | "enabled"

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

filterBySelectionTitle: string

Custom title for the filter by selection action.

Attribute: filter-by-selection-title
Default value: undefined

filterBySelectionToggle

Property

filterBySelectionToggle: "active" | "inactive"

When active, the filter by selection action is highlighted.

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

forceDisableActions

Property

forceDisableActions: 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

fullExtentState: "disabled" | "enabled"

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

fullExtentTitle: string

Custom title for the full extent action.

Attribute: full-extent-title
Default value: undefined

fullExtentToggle

Property

fullExtentToggle: "active" | "inactive"

When active, the full extent action is highlighted.

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

hiddenActions

Property

hiddenActions: Array<"legend" | "zoom" | "editChart" | "fullExtent" | "filterBySelection" | "filterByExtent" | "rotateChart" | "selection" | "clearSelection" | "switchSelection" | "exportAsImage" | "exportAsCSV">

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.

Default value: ["editChart"]

legendState

Property

legendState: "disabled" | "enabled"

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

legendTitle: string

Custom title for the legend action.

Attribute: legend-title
Default value: undefined

legendToggle

Property

legendToggle: "active" | "inactive"

When active, the legend action is highlighted.

Attribute: legend-toggle
Default value: "inactive"

messageOverrides

Property

messageOverrides: Record<string, unknown>

Overwrite localized strings for this component

rotateChartState

Property

rotateChartState: "disabled" | "enabled"

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

rotateChartTitle: string

Custom title for the rotate chart action.

Attribute: rotate-chart-title
Default value: undefined

rotateChartToggle

Property

rotateChartToggle: "active" | "inactive"

When active, the rotate chart action is highlighted.

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

selectionState

Property

selectionState: "disabled" | "enabled"

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

selectionTitle: string

Custom title for the selection action.

Attribute: selection-title
Default value: undefined

selectionToggle

Property

selectionToggle: "active" | "inactive"

When active, the selection action is highlighted.

Attribute: selection-toggle
Default value: "inactive"

switchSelectionState

Property

switchSelectionState: "disabled" | "enabled"

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

switchSelectionTitle: string

Custom title for the switch selection action.

Attribute: switch-selection-title
Default value: undefined

switchSelectionToggle

Property

switchSelectionToggle: "active" | "inactive"

When active, the switch selection action is highlighted.

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

zoomState

Property

zoomState: "disabled" | "enabled"

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

zoomTitle: string

Custom title for the zoom action.

Attribute: zoom-title
Default value: undefined

zoomToggle

Property

zoomToggle: "active" | "inactive"

When active, the zoom action is highlighted.

Attribute: zoom-toggle
Default value: "inactive"

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocksCopy
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!");

Returns: Promise<void>

Events

Event	Type
`arcgisActionBarToggle`	`CustomEvent<boolean>`
`arcgisDefaultActionSelect`	`CustomEvent<{ actionId: DefaultChartActions; actionActive: boolean; }>`

arcgisActionBarToggle

Event

arcgisActionBarToggle: CustomEvent<boolean>

Event triggered once action bar expand is toggled

arcgisDefaultActionSelect

Event

arcgisDefaultActionSelect: CustomEvent<{
    actionId: DefaultChartActions;
    actionActive: boolean;
}>

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.

custom-action-top

Slot

A slot for adding custom calcite-action to the top of the default actions.

custom-action-below

Slot

A slot for adding custom calcite-action to the bottom of the default actions.