Chart

ESM:

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

CDN:

No specific import is needed for this component.

The ArcGIS Chart component renders various chart types based on the provided model.

Supported chart types include bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, histograms and radar charts.

The Chart component can be rendered using an existing model from a web map or feature layer, or by creating a new model.

Demos

Bar Chart

Box Plot

Line Chart

Combo Bar Line Chart

Gauge

Histogram

Pie Chart

Scatterplot

Radar Chart

Bar charts summarize and compare categorical data using proportional bar lengths to represent values.

Box plots visualize and compare the distribution and central tendency of numeric values through their quartiles.

Line charts visualize change over a continuous range, such as time or distance. They highlight overall trends and enable easy comparison of multiple data series simultaneously.

Combo bar line charts combine bar and line charts to visualize data across categories, time, or both—enabling flexible comparisons in a single view.

Gauges visualize a single metric within a quantitative context defined by minimum and maximum values.

Histograms visualize the distribution of a continuous numeric variable by showing the frequency of values within defined intervals.

Pie charts group data into slices to visualize part-to-whole relationships, with each slice representing a category’s proportion of the total.

Scatterplots visualize the relationship between two numeric variables, with one plotted along the x-axis and the other along the y-axis.

Radar charts visualize multivariate data across multiple variables, with each variable represented along a separate axis arranged in a circular layout.

Properties

Property	Attribute	Type
`actionMode`	`action-mode`	`"monoSelection" \| "multiSelection" \| "multiSelectionWithCtrlKey" \| "none" \| "zoom"`
`autoDisposeChart`	`auto-dispose-chart`	`boolean`
`chartLimits`		`ChartElementLimit`
`chartWillRender`		`(((props: { chartConfig: WebChart \| WebGaugeChart; data?: WebChartDataTypes \| undefined; slices?: Array<WebChartPieChartSlice> \| undefined; }) => Promise<WebChart \| WebGaugeChart>))`
`componentVersion`	`component-version`	`"beta" \| "stable"`
`cursorRange`	`cursor-range`	`"multi-axes" \| "x-axis" \| "y-axis"`
`dataLabelFormatter`		`(((category: string, value?: number \| undefined, percent?: number \| undefined, originalCategory?: WebChartDataItemValue) => string)) \| (((count: number, binMinValue: number, binMaxValue: number) => string)) \| (((statValue: number, percent?: number \| undefined) => string)) \| (((x: number, y: number, sizePolicyValue?: number \| undefined) => string))`
`disableInteractions`	`disable-interactions`	`boolean`
`disableTogglingLegendItems`	`disable-toggling-legend-items`	`boolean`
`enableConfiguration`	`enable-configuration`	`boolean`
`enableResponsiveFeatures`	`enable-responsive-features`	`boolean`
`errorPolicy`	`error-policy`	`"ignore" \| "throw"`
`featureIndex`	`feature-index`	`number`
`filterByExtent`	`filter-by-extent`	`boolean`
`filterBySelection`	`filter-by-selection`	`boolean`
`gaugeInnerLabelFormatter`		`(((value?: number \| undefined) => string))`
`guideTooltipFormatter`		`(((props: GuideTooltipFormatCallbackProps) => string))`
`hideEmptySeries`	`hide-empty-series`	`boolean`
`hideLicenseWatermark`	`hide-license-watermark`	`boolean`
`hideLoaderAnimation`	`hide-loader-animation`	`boolean`
`ignoreSmoothRenderingLimit`	`ignore-smooth-rendering-limit`	`boolean`
`ignoreViewExtent`	`ignore-view-extent`	`boolean`
`layer`		`FeatureLayer \| FeatureLayerView \| SubtypeSublayer`
`layerFieldsChangePolicy`	`layer-fields-change-policy`	`"ignore" \| "refresh"`
`layerFilterChangePolicy`	`layer-filter-change-policy`	`"ignore" \| "refresh"`
`layerRendererChangePolicy`	`layer-renderer-change-policy`	`"ignore" \| "refresh"`
`legendPosition`	`legend-position`	`"bottom" \| "left" \| "right" \| "top"`
`legendValueLabelFormatter`		`(((value?: number \| undefined, percent?: number \| undefined) => string))`
`legendVisibility`	`legend-visibility`	`boolean`
`loaderColors`		`LoaderColors`
`messageOptions`		`MessageOptions`
`model`		`ChartModel \| WebChart`
`placeholder`	`placeholder`	`string`
`queueChartCreation`	`queue-chart-creation`	`boolean`
`replaceNoValueCategoryWithZero`	`replace-no-value-category-with-zero`	`boolean`
`returnFeaturesExtent`	`return-features-extent`	`boolean`
`returnSelectionIndexes`	`return-selection-indexes`	`boolean`
`returnSelectionOIDs`	`return-selection-oi-ds`	`boolean`
`rotation`	`rotation`	`boolean`
`runtimeDataFilters`		`{ distance?: number \| undefined; gdbVersion?: string \| undefined; geometry?: IExtent \| IEnvelope \| IPoint \| IPolygon \| IPolygonWithCurves \| IPolyline \| undefined; objectIds?: Array<number> \| undefined; spatialRelationship?: "intersects" \| "contains" \| "crosses" \| "disjoint" \| "envelope-intersects" \| "index-intersects" \| "overlaps" \| "touches" \| "within" \| "relation" \| undefined; timeExtent?: [number, number] \| undefined; units?: RESTUnits \| undefined; where?: string \| undefined; }`
`secondaryYAxisLabelFormatter`		`(((value: string \| number \| Date \| null, originalValue?: WebChartDataItemValue) => string))`
`selectionData`		`SelectionData`
`selectionTheme`		`SelectionTheme`
`setTimeBinningInfoWhenNotProvided`	`set-time-binning-info-when-not-provided`	`boolean`
`syncSelection`	`sync-selection`	`boolean`
`syncSelectionsBetweenChartAndLayerViewPolicy`	`sync-selections-between-chart-and-layer-view-policy`	`"disabled" \| "enabled"`
`timeZone`	`time-zone`	`string`
`tooltipFormatter`		`(((category: string, value?: number \| undefined, percent?: number \| undefined, originalCategory?: WebChartDataItemValue) => string)) \| (((count: number, binMinValue: number, binMaxValue: number) => string)) \| (((props: BarAndLineTooltipFormatCallbackProps) => string)) \| (((props: BoxPlotTooltipFormatCallbackProps) => string)) \| (((x: number, y: number, sizePolicyValue?: number \| undefined) => string))`
`updateSplitBySeries`		`MissingSplitBySeriesProps`
`useAnimatedCharts`	`use-animated-charts`	`boolean`
`usePopupTemplateFieldsInfo`	`use-popup-template-fields-info`	`boolean`
`view`		`MapView \| SceneView`
`viewTimeExtentChangePolicy`	`view-time-extent-change-policy`	`"ignore" \| "refresh"`
`xAxisLabelFormatter`		`(((value: string \| number \| Date \| null, originalValue?: WebChartDataItemValue) => string))`
`yAxisLabelFormatter`		`(((value: string \| number \| Date \| null, originalValue?: WebChartDataItemValue) => string))`

actionMode

Property

actionMode: "monoSelection" | "multiSelection" | "multiSelectionWithCtrlKey" | "none" | "zoom"

Not applicable to gauge. Defines the cursor behavior on the chart (zoom, selection...).

Attribute: action-mode
Default value: undefined

autoDisposeChart

Property

autoDisposeChart: boolean

Auto-disposes the chart when a new one is created in the same container.

Attribute: auto-dispose-chart
Default value: undefined

chartLimits

Property

chartLimits: ChartElementLimit

Used to customize the number maximum of bars allowed on the chart. The chart's behavior once that limit is reached can be adjusted through the behaviorAfterLimit nested property, to either reject the creation or update of the chart, or render the elements up to the given limits.

Default value: undefined

chartWillRender

Property

chartWillRender: (((props: {
    chartConfig: WebChart | WebGaugeChart;
    data?: WebChartDataTypes | undefined;
    slices?: Array<WebChartPieChartSlice> | undefined;
}) => Promise<WebChart | WebGaugeChart>))

Lifecycle function executed after the data has been processed and before the chart renders. Can be used to alter the config from information extracted from the data for instance.

Default value: undefined

componentVersion

Property

componentVersion: "beta" | "stable"

Whether to use the stable version of the component or the beta version.

Attribute: component-version
Default value: "stable"

cursorRange

Property

cursorRange: "multi-axes" | "x-axis" | "y-axis"

Sets the cursor range:

CursorRange.MultiAxes: allows to draw a free rectangle
CursorRange.XAxis: allows to draw a rectangle bound to the x-axis
CursorRange.YAxis: allows to draw a rectangle bound to the y-axis
undefined: defaults to a preset behavior according to the chart type and action mode

Attribute: cursor-range
Default value: undefined

dataLabelFormatter

Property

dataLabelFormatter: (((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))

A callback function used to format the data labels. If the returned string contains HTML tags they will be interpreted as such.

Default value: undefined

disableInteractions

Property

disableInteractions: boolean

Disables all interactions on the chart.

Attribute: disable-interactions
Default value: false

disableTogglingLegendItems

Property

disableTogglingLegendItems: boolean

Disables the toggling of series via the legend items.

Attribute: disable-toggling-legend-items
Default value: undefined

enableConfiguration

Property

enableConfiguration: boolean

Whether to use features uniquely designed for a chart currently being configured by a user via the UI.

Attribute: enable-configuration
Default value: false

enableResponsiveFeatures

Property

enableResponsiveFeatures: boolean

Enables the responsive features.

Attribute: enable-responsive-features
Default value: undefined

errorPolicy

Property

errorPolicy: "ignore" | "throw"

Whether to display an error alert and hide the chart when it can't be created or updated.

Attribute: error-policy
Default value: "throw"

featureIndex

Property

featureIndex: number

The index of the feature to be rendered. Only used when the gauge is a feature-based gauge.

Attribute: feature-index
Default value: undefined

filterByExtent

Property

filterByExtent: boolean

When true, all chart elements are filtered based on view extent.

Attribute: filter-by-extent
Default value: undefined

filterBySelection

Property

filterBySelection: boolean

When true, all chart elements are filtered based on selection.

Attribute: filter-by-selection
Default value: undefined

gaugeInnerLabelFormatter

Property

gaugeInnerLabelFormatter: (((value?: number | undefined) => string))

A callback function used to format the gauge inner label. If the returned string contains HTML tags they will be interpreted as such.

Default value: undefined

guideTooltipFormatter

Property

guideTooltipFormatter: (((props: GuideTooltipFormatCallbackProps) => string))

A callback function used to format the axes guides tooltip. If the returned string contains HTML tags they will be interpreted as such.

Default value: undefined

hideEmptySeries

Property

hideEmptySeries: boolean

When true, the empty series are completely hidden from the chart and the legend. For example a series can be empty after applying a data filter, filter by attribute or geometry (as when using the filter by extent).

Attribute: hide-empty-series
Default value: undefined

hideLicenseWatermark

Property

hideLicenseWatermark: boolean

Hides the license watermark.

Attribute: hide-license-watermark
Default value: undefined

hideLoaderAnimation

Property

hideLoaderAnimation: boolean

Hides the loader animation (curtain and spinner), showed by default at every update.

Attribute: hide-loader-animation
Default value: undefined

ignoreSmoothRenderingLimit

Property

ignoreSmoothRenderingLimit: boolean

When true, disables the default setting that uses debounce functions to handle the visibility of markers that are outside of the plotting area when the min/max bound changes and/or when a zoom action is performed (via chart cursor or scrollbar), to increase performance. This property will be set when the chart is created and cannot be updated after that. It's recommended that this property should only be set to true for small datasets. When left undefined, will be treated as false.

Attribute: ignore-smooth-rendering-limit
Default value: undefined

ignoreViewExtent

Property

ignoreViewExtent: boolean

This property will be effective when the component's view is provided or when the layer is set to a FeatureLayerView. By default the queries made by the chart will consider the view's extent as the unique geometry filter applicable. This implies ignoring any geometry passed through the config (component.config.dataFilters) or the runtime filters (component.runtimeDataFilters). Setting this property to false signals the queries to ignore the view's extent, whether an additional geometry filter is provided or not.

Attribute: ignore-view-extent
Default value: false

layer

Property

layer: FeatureLayer | FeatureLayerView | SubtypeSublayer

Used to perform queries. If the layer is a FeatureLayerView or if the layer and the view property are both provided, the queries will be executed client-side.

Default value: undefined

layerFieldsChangePolicy

Property

layerFieldsChangePolicy: "ignore" | "refresh"

Allows the chart to update automatically when the layer's fields change. Applies when the field list (fields) in the feature layer is updated.

Attribute: layer-fields-change-policy
Default value: "refresh"

layerFilterChangePolicy

Property

layerFilterChangePolicy: "ignore" | "refresh"

Whether the chart should be refreshed when the layer's filter (definitionExpression) changes.

Attribute: layer-filter-change-policy
Default value: "refresh"

layerRendererChangePolicy

Property

layerRendererChangePolicy: "ignore" | "refresh"

Allows the chart to update automatically when the layer's renderer changes. Applies when the color match feature is enabled.

Attribute: layer-renderer-change-policy
Default value: "refresh"

legendPosition

Property

legendPosition: "bottom" | "left" | "right" | "top"

Used to set the legend's position on the chart.

Attribute: legend-position
Default value: undefined

legendValueLabelFormatter

Property

legendValueLabelFormatter: (((value?: number | undefined, percent?: number | undefined) => string))

A callback function used to format the legend value labels. If the returned string contains HTML tags they will be interpreted as such. If provided, the formatter will be used if at least WebChartPieChartLegend.displayNumericValue or WebChartPieChartLegend.displayPercentage is true.

Default value: undefined

legendVisibility

Property

legendVisibility: boolean

When true, the legend is visible on the chart.

Attribute: legend-visibility
Default value: undefined

loaderColors

Property

loaderColors: LoaderColors

Defines the colors for the loader animation.

Default value: undefined

messageOptions

Property

messageOptions: MessageOptions

Used to set the options available to handle specific messages displayed by the chart.

Default value: undefined

model

Property

model: ChartModel | WebChart

Instance of an ArcGIS Chart Model. Provides an API to interact with the chart's configuration.

Note: This property has a union type of ChartModel | WebChart meaning a raw chart config object can be passed to it instead, however it is recommended to use a ChartModel instance whenever possible.

Default value: undefined

placeholder

Property

placeholder: string

A placeholder string to provides a brief hint to the user indicating needed information for creating a chart.

Attribute: placeholder
Default value: undefined

queueChartCreation

Property

queueChartCreation: boolean

Builds the charts one by one rather than all at the same time.

Attribute: queue-chart-creation
Default value: undefined

replaceNoValueCategoryWithZero

Property

replaceNoValueCategoryWithZero: boolean

When true, the chart's dataItems associated with empty (no value) categories (from only a Count aggregation) will be populated with 0s, via the completeDataForEmptyCategoriesWithZeros method.

Attribute: replace-no-value-category-with-zero
Default value: undefined

returnFeaturesExtent

Property

returnFeaturesExtent: boolean

When true, the features extent will be returned through the arcgisDataProcessComplete and arcgisSelectionComplete events payload. Applies only to:

charts using an aggregation
data source using a feature layer compatible with envelope aggregation The extent (IExtent) is returned through a property called arcgis_charts_features_extent.

Attribute: return-features-extent
Default value: undefined

returnSelectionIndexes

Property

returnSelectionIndexes: boolean

When true, the selection indexes will be computed whenever a selection is made on or passed to the chart.

Attribute: return-selection-indexes
Default value: undefined

returnSelectionOIDs

Property

returnSelectionOIDs: boolean

When true, the object ids will be computed whenever a selection is made on or passed to the chart. Only considered for a data source using a feature layer.

Attribute: return-selection-oi-ds
Default value: undefined

rotation

Property

rotation: boolean

Applicable to bar chart, line chart, combo bar-line and box plot. When true, the chart is rotated 90 degrees so that the x-axis becomes vertical and the y-axis becomes horizontal.

Attribute: rotation
Default value: undefined

runtimeDataFilters

Property

runtimeDataFilters: {
    distance?: number | undefined;
    gdbVersion?: string | undefined;
    geometry?: IExtent | IEnvelope | IPoint | IPolygon | IPolygonWithCurves | IPolyline | undefined;
    objectIds?: Array<number> | undefined;
    spatialRelationship?: "intersects" | "contains" | "crosses" | "disjoint" | "envelope-intersects" | "index-intersects" | "overlaps" | "touches" | "within" | "relation" | undefined;
    timeExtent?: [number, number] | undefined;
    units?: RESTUnits | undefined;
    where?: string | undefined;
}

Applies runtime data filters to the chart's.

Default value: undefined

secondaryYAxisLabelFormatter

Property

secondaryYAxisLabelFormatter: (((value: string | number | Date | null, originalValue?: WebChartDataItemValue) => string))

A callback function used to format the secondary y-axis labels. If the returned string contains HTML tags they will be interpreted as such. The property will be effective only if 3 axes are defined (dual axis chart).

Default value: undefined

selectionData

Property

selectionData: SelectionData

When this property is set, it will apply a selection on the chart matching the provided selection.

Default value: undefined

selectionTheme

Property

selectionTheme: SelectionTheme

Used to provide a customized theme for the selected and non selected elements. If no style is provided for the selected elements, a default selection is applied. If no style is provided for the non selected elements, the chart's style is applied.

Default value: undefined

setTimeBinningInfoWhenNotProvided

Property

setTimeBinningInfoWhenNotProvided: boolean

When true, the series properties unit and size become optional and will be automatically set to values that fit the data set. Used when creating or updating a chart compatible with time binning.

Attribute: set-time-binning-info-when-not-provided
Default value: undefined

syncSelection

Property

syncSelection: boolean

Whether to synchronize the selection between chart components from the same layer.

Attribute: sync-selection
Default value: false

syncSelectionsBetweenChartAndLayerViewPolicy

Property

syncSelectionsBetweenChartAndLayerViewPolicy: "disabled" | "enabled"

Determines whether the selections from the chart should be synchronized with the layer view and vice versa.

Attribute: sync-selections-between-chart-and-layer-view-policy
Default value: "disabled

timeZone

Property

timeZone: string

Used to set a custom time zone for the chart.

Attribute: time-zone
Default value: undefined

tooltipFormatter

Property

tooltipFormatter: (((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))

A callback function used to format the tooltips. If the returned string contains HTML tags they will be interpreted as such.

Default value: undefined

updateSplitBySeries

Property

updateSplitBySeries: MissingSplitBySeriesProps

Whether to update the series when the data updates while the chart uses a split-by field configuration. If addMissingSeries is set to true the missing series will be added to cover the split-by values not referenced by the config. The default information from the property updateSplitBySeries.seriesTemplate will be applied to the new series.

Default value: undefined

useAnimatedCharts

Property

useAnimatedCharts: boolean

Enables the animations on the chart.

Attribute: use-animated-charts
Default value: undefined

usePopupTemplateFieldsInfo

Property

usePopupTemplateFieldsInfo: boolean

Allows the use of the fields alias from the layer.popupTemplate when rendering the field names on the chart (e.g. tooltips, axes, legend).

Attribute: use-popup-template-fields-info
Default value: undefined

view

Property

view: MapView | SceneView

Used to access the LayerView instance in order to perform client-side queries.

Default value: undefined

viewTimeExtentChangePolicy

Property

viewTimeExtentChangePolicy: "ignore" | "refresh"

Whether the chart should be refreshed when the view's time extent changes. This is not currently supported on histogram. Setting the property to "refresh" won't have any effect on that chart.

Attribute: view-time-extent-change-policy
Default value: "ignore"

xAxisLabelFormatter

Property

xAxisLabelFormatter: (((value: string | number | Date | null, originalValue?: WebChartDataItemValue) => string))

Indicates whether to show the ArcGIS charts notify panel. False by default A callback function used to format the x-axis labels. If the returned string contains HTML tags they will be interpreted as such.

Default value: undefined

yAxisLabelFormatter

Property

yAxisLabelFormatter: (((value: string | number | Date | null, originalValue?: WebChartDataItemValue) => string))

A callback function used to format the y-axis labels. If the returned string contains HTML tags they will be interpreted as such.

Default value: undefined

Slots

Name	Description
`action-bar`	Slot for adding a `charts-action-bar` component or `calcite-action-bar`.

Events

Event	Type
`arcgisAxesMinMaxChange`	`CustomEvent<{ bounds: Array<CalculatedMinMaxBoundsPayload>; model: ChartModel \| undefined; }>`
`arcgisBadDataWarningRaise`	`DataWarningObject`
`arcgisConfigChange`	`CustomEvent<{ newConfig: WebChart \| undefined; oldConfig: WebChart \| undefined; functionCalled: string \| undefined; }>`
`arcgisDataFetchComplete`	`WebChartBoxPlotDataItem \| WebChartGenericDataItem \| WebChartHistogramDataItem \| WebChartScatterplotDataItem`
`arcgisDataProcessComplete`	`CustomEvent<{ chartData: WebChartDataTypes; model: ChartModel \| undefined; }>`
`arcgisDataProcessError`	`CustomEvent<void>`
`arcgisLegendItemVisibilityChange`	`CustomEvent<{ legendItemVisibility: LegendItemVisibility; model: ChartModel \| undefined; }>`
`arcgisNoRenderPropChange`	`CustomEvent<{ propName: string; value: boolean \| WebChartLegendPositions; model: ChartModel \| undefined; }>`
`arcgisRuntimeError`	`CustomEvent<void>`
`arcgisSelectionComplete`	`CustomEvent<{ selectionData: SelectionData; model: ChartModel \| undefined; }>`
`arcgisSeriesColorChange`	`CustomEvent<{ data: PieSlicesSymbols \| SeriesSymbolsMap; colorMatchApplied: boolean; model: ChartModel \| undefined; }>`
`arcgisSeriesOrder`	`Array<string>`
`arcgisUpdateComplete`	`ValidationStatus`

arcgisAxesMinMaxChange

Event

arcgisAxesMinMaxChange: CustomEvent<{
    bounds: Array<CalculatedMinMaxBoundsPayload>;
    model: ChartModel | undefined;
}>

Event triggered once the chart axes min/max values are computed

arcgisBadDataWarningRaise

Event

arcgisBadDataWarningRaise: DataWarningObject

Event triggered when an error is detected with the data set

arcgisConfigChange

Event

arcgisConfigChange: CustomEvent<{
    newConfig: WebChart | undefined;
    oldConfig: WebChart | undefined;
    functionCalled: string | undefined;
}>

Event triggered when the chart config is changed

arcgisDataFetchComplete

Event

arcgisDataFetchComplete: WebChartBoxPlotDataItem | WebChartGenericDataItem | WebChartHistogramDataItem | WebChartScatterplotDataItem

Event triggered once the chart data has been fetched but not yet fully processed. For instance it can be useful for a pie chart to see all the slices before they get grouped into an 'other' slice during the post-processing step.

arcgisDataProcessComplete

Event

arcgisDataProcessComplete: CustomEvent<{
    chartData: WebChartDataTypes;
    model: ChartModel | undefined;
}>

Event triggered once the chart data has been processed

arcgisDataProcessError

Event

arcgisDataProcessError: CustomEvent<void>

Event triggered when an error occurred while fetching of processing the data for the chart

arcgisLegendItemVisibilityChange

Event

arcgisLegendItemVisibilityChange: CustomEvent<{
    legendItemVisibility: LegendItemVisibility;
    model: ChartModel | undefined;
}>

Event triggered once a legend item visibility has been changed

arcgisNoRenderPropChange

Event

arcgisNoRenderPropChange: CustomEvent<{
    propName: string;
    value: boolean | WebChartLegendPositions;
    model: ChartModel | undefined;
}>

Event triggered when a no-render prop is changed

arcgisRuntimeError

Event

arcgisRuntimeError: CustomEvent<void>

Event triggered when an error occurred that prevents the chart from being created or updated

arcgisSelectionComplete

Event

arcgisSelectionComplete: CustomEvent<{
    selectionData: SelectionData;
    model: ChartModel | undefined;
}>

Event triggered when a selection is applied to the chart

arcgisSeriesColorChange

Event

arcgisSeriesColorChange: CustomEvent<{
    data: PieSlicesSymbols | SeriesSymbolsMap;
    colorMatchApplied: boolean;
    model: ChartModel | undefined;
}>

Event triggered once the chart series color have been assigned

arcgisSeriesOrder

Event

arcgisSeriesOrder: Array<string>

Event carrying the series id as they have been sorted following the orderOptions instructions

arcgisUpdateComplete

Event

arcgisUpdateComplete: ValidationStatus

Event triggered once the chart is updated

Methods

Method	Signature
`clearSelection`	`clearSelection(): Promise<void>`
`componentOnReady`	`componentOnReady(): Promise<void>`
`errorAlert`	`errorAlert(errorMessage?: string): Promise<void>`
`exportAsCSV`	`exportAsCSV(options?: CSVOptions): Promise<void>`
`exportAsImage`	`exportAsImage(format?: DownloadableChartImagesTypes): Promise<void>`
`notify`	`notify(message?: string, heading?: string, options?: NotifyOptions): Promise<void>`
`refresh`	`refresh(props?: { updateData?: boolean; resetAxesBounds?: boolean; updateExtent?: boolean; }): Promise<void>`
`resetZoom`	`resetZoom(): Promise<void>`
`switchSelection`	`switchSelection(): Promise<void>`

clearSelection

Method

clearSelection(): Promise<void>

Clears all selection on the chart.

Returns: 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 arcgisChart = document.querySelector("arcgis-chart");
document.body.append(arcgisChart);
await arcgisChart.componentOnReady();
console.log("arcgis-chart is ready to go!");

Returns: Promise<void>

errorAlert

Method

errorAlert(errorMessage?: string): Promise<void>

Triggers an alert to display an error message.

Parameters

Parameter	Type	Optional?
errorMessage	`string \| undefined`

Returns: Promise<void>

exportAsCSV

Method

exportAsCSV(options?: CSVOptions): Promise<void>

Export the current chart's data as a CSV file.

Parameters

Parameter	Type	Optional?
options	`CSVOptions \| undefined`

Returns: Promise<void>

exportAsImage

Method

exportAsImage(format?: DownloadableChartImagesTypes): Promise<void>

Export the current chart as an image.

Parameters

Parameter	Type	Optional?
format	`"jpeg" \| "png" \| "svg"`

Returns: Promise<void>

notify

Method

notify(message?: string, heading?: string, options?: NotifyOptions): Promise<void>

Notify method allows passing external messages to the chart component. It can be used to pass validation or information messages. In a situation where a config update is overriding your notification modal, consider waiting for the arcgisUpdateComplete event.

Parameters

Parameter	Type	Optional?
message	`string \| undefined`
heading	`string \| undefined`
options	`NotifyOptions \| undefined`

Returns: Promise<void>

refresh

Method

refresh(props?: { updateData?: boolean; resetAxesBounds?: boolean; updateExtent?: boolean; }): Promise<void>

Re-render the chart.

Parameters

Parameter	Type	Optional?
props	`undefined \| { updateData?: boolean \| undefined; resetAxesBounds?: boolean \| undefined; updateExtent?: boolean \| undefined; }`

Returns: Promise<void>

resetZoom

Method

resetZoom(): Promise<void>

Resets the chart zoom to bring it back to full extent

Returns: Promise<void>

switchSelection

Method

switchSelection(): Promise<void>

Switches the selection on the chart.

Returns: Promise<void>