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.

The ArcGIS charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering. It also supports general actions like exporting the chart as an image or CSV. This component is designed to be used with a chart component and is not intended for standalone use.

Demo

Properties

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

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]

disabledExportAction

Property

disabledExportAction: boolean

When true, the export action is disabled.

Attribute: disabled-export-action
Default value: false

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

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<"zoom" | "legend" | "fullExtent" | "filterBySelection" | "filterByExtent" | "rotateChart" | "selection" | "clearSelection" | "switchSelection" | "editChart" | "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"

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.

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

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>