Chart

ESM:

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

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.32

The ArcGIS Chart component renders a chart based on the provided model. Get started by reading the Introduction to charts page.

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

Demos

Bar Chart

Box Plot

Line Chart

Combo Bar Line Chart

Gauge

Heat Chart

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.

Heat charts visualize data density or intensity across two dimensions, using color gradients to represent 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` reflected	`action-mode`	`"monoSelection" \| "multiSelection" \| "multiSelectionWithCtrlKey" \| "none" \| "zoom"`
`allowUsingObjectIdStat` reflected	`allow-using-object-id-stat`	`boolean`
`autoDisposeChart` reflected	`auto-dispose-chart`	`boolean`
`autoInverseDataLabelTextColor`	`auto-inverse-data-label-text-color`	`boolean`
`chartIndex` reflected	`chart-index`	`number`
`chartLimits`		`ChartElementLimit`
`chartWillRender`		`(((props: { chartConfig: WebChart \| WebGaugeChart; data?: WebChartDataTypes \| undefined; slices?: Array<WebChartPieChartSlice> \| undefined; }) => Promise<WebChart \| WebGaugeChart>))`
`cursorRange` reflected	`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, dataContext?: WebChartDataItem \| undefined) => string))`
`disableInteractions` reflected	`disable-interactions`	`boolean`
`disableTogglingLegendItems` reflected	`disable-toggling-legend-items`	`boolean`
`enableConfiguration` reflected	`enable-configuration`	`boolean`
`enableResponsiveFeatures` reflected	`enable-responsive-features`	`boolean`
`errorPolicy` reflected	`error-policy`	`"ignore" \| "throw"`
`featureIndex` reflected	`feature-index`	`number`
`filterByExtent` reflected	`filter-by-extent`	`boolean`
`filterBySelection` reflected	`filter-by-selection`	`boolean`
`gaugeInnerLabelFormatter`		`(((value?: number \| undefined) => string))`
`guideTooltipFormatter`		`(((props: GuideTooltipFormatCallbackProps) => string))`
`hideEmptySeries` reflected	`hide-empty-series`	`boolean`
`hideLicenseWatermark` reflected	`hide-license-watermark`	`boolean`
`hideLoaderAnimation` reflected	`hide-loader-animation`	`boolean`
`ignoreSmoothRenderingLimit` reflected	`ignore-smooth-rendering-limit`	`boolean`
`ignoreViewExtent` reflected	`ignore-view-extent`	`boolean`
`layer`		`FeatureLayer \| FeatureLayerView \| SubtypeSublayer`
`layerFieldsChangePolicy` reflected	`layer-fields-change-policy`	`"ignore" \| "refresh"`
`layerFilterChangePolicy` reflected	`layer-filter-change-policy`	`"ignore" \| "refresh"`
`layerItemId` reflected	`layer-item-id`	`string`
`layerRendererChangePolicy` reflected	`layer-renderer-change-policy`	`"ignore" \| "refresh"`
`legendPosition` reflected	`legend-position`	`"bottom" \| "left" \| "right" \| "top"`
`legendValueLabelFormatter`		`(((value?: number \| undefined, percent?: number \| undefined) => string))`
`legendVisibility` reflected	`legend-visibility`	`boolean`
`loaderColors`		`LoaderColors`
`model`		`ChartModel \| WebChart`
`nullAsValid` reflected	`null-as-valid`	`boolean`
`placeholder` reflected	`placeholder`	`string`
`queueChartCreation` reflected	`queue-chart-creation`	`boolean`
`replaceNoValueCategoryWithZero` reflected	`replace-no-value-category-with-zero`	`boolean`
`returnFeaturesExtent` reflected	`return-features-extent`	`boolean`
`returnSelectionIndexes` reflected	`return-selection-indexes`	`boolean`
`returnSelectionOIDs` reflected	`return-selection-oi-ds`	`boolean`
`rotation` reflected	`rotation`	`boolean`
`runtimeDataFilters`		`{ spatialRelationship?: "intersects" \| "contains" \| "crosses" \| "disjoint" \| "envelope-intersects" \| "index-intersects" \| "overlaps" \| "touches" \| "within" \| "relation" \| undefined; distance?: number \| undefined; gdbVersion?: string \| undefined; geometry?: IPoint \| IPolyline \| IPolygon \| IPolygonWithCurves \| IEnvelope \| IExtent \| undefined; objectIds?: Array<number> \| 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` reflected	`set-time-binning-info-when-not-provided`	`boolean`
`showUIMessages` reflected	`show-ui-messages`	`boolean`
`syncSelection` reflected	`sync-selection`	`boolean`
`syncSelectionsBetweenChartAndLayerViewPolicy` reflected	`sync-selections-between-chart-and-layer-view-policy`	`"disabled" \| "enabled"`
`timeZone` reflected	`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, dataContext?: WebChartDataItem \| undefined) => string))`
`updateSplitBySeries`		`MissingSplitBySeriesProps`
`useAnimatedCharts` reflected	`use-animated-charts`	`boolean`
`usePopupTemplateFieldsInfo` reflected	`use-popup-template-fields-info`	`boolean`
`view`		`MapView \| SceneView`
`viewTimeExtentChangePolicy` reflected	`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

allowUsingObjectIdStat

Property

allowUsingObjectIdStat: boolean

Whether to allow the object id to be used as a statistic other than COUNT.

Attribute: allow-using-object-id-stat
Default value: false

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

autoInverseDataLabelTextColor

Property

autoInverseDataLabelTextColor: boolean

When true, the data label text color is automatically inverted based on the data label background color. For example if the data label is dark, and it's on top of a dark color series area, the text color will eventually be set to either the chart's background color or white.

Attribute: auto-inverse-data-label-text-color
Default value: undefined

chartIndex

Property

chartIndex: number

The index of the chart to be rendered from the layer. Must be used in conjunction with the layerItemId or layer property.

If a layer or layerItemId is set without chartIndex, the first chart in the layer will be rendered.

If the chartIndex is out of bounds, the first chart in the layer will be rendered and a warning event will be emitted.

Example

Use dark colors for code blocksCopy
<arcgis-chart layer-item-id="05e015c5f0314db9a487a9b46cb37eca" chart-index="2"></arcgis-chart>

Attribute: chart-index
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

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, dataContext?: WebChartDataItem | 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"

layerItemId

Property

layerItemId: string

Layer item ID associated with the chart to be rendered. Can be used in conjunction with the chartIndex property.

If layerItemId is set without chartIndex, the first chart in the layer will be rendered.

Example

Use dark colors for code blocksCopy
<arcgis-chart layer-item-id="05e015c5f0314db9a487a9b46cb37eca" chart-index="2"></arcgis-chart>

Attribute: layer-item-id
Default value: undefined

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

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

nullAsValid

Property

nullAsValid: boolean

Whether to consider a null statistic as valid. If set to false and the data has only null values, the chart's dataset will be considered empty:

the corresponding warning event will be sent
the "no data" message will be displayed (unless showUIMesssages is set to false)

Attribute: null-as-valid
Default value: false

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: {
    spatialRelationship?: "intersects" | "contains" | "crosses" | "disjoint" | "envelope-intersects" | "index-intersects" | "overlaps" | "touches" | "within" | "relation" | undefined;
    distance?: number | undefined;
    gdbVersion?: string | undefined;
    geometry?: IPoint | IPolyline | IPolygon | IPolygonWithCurves | IEnvelope | IExtent | undefined;
    objectIds?: Array<number> | 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

showUIMessages

Property

showUIMessages: boolean

Whether to display or hide all UI messages (e.g. no data warnings, or when the logarithmic scale can't be applied to an axis when the data contains values <= 0).

Attribute: show-ui-messages
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, dataContext?: WebChartDataItem | 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

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>`
`loadModel`	`loadModel(): Promise<void>`
`notify`	`notify(message?: string, heading?: string, options?: NotifyOptions): Promise<void>`
`refresh`	`refresh(props?: { updateData?: boolean; resetAxesBounds?: 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>

loadModel

Method

loadModel(): Promise<void>

Returns a promise that resolves when the chart model is fully loaded.

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; }): Promise<void>

Re-render the chart.

Parameters

Parameter	Type	Optional?
props	`undefined \| { updateData?: boolean \| undefined; resetAxesBounds?: 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>

Events

Event	Type
`arcgisAxesMinMaxChange`	`CustomEvent<{ bounds: Array<CalculatedMinMaxBoundsPayload>; model: ChartModel \| undefined; }>`
`arcgisBadDataWarningRaise`	`CustomEvent<DataWarningObject>`
`arcgisChartNotFoundWarning`	`CustomEvent<string>`
`arcgisConfigChange`	`CustomEvent<{ newConfig: WebChart \| undefined; oldConfig: WebChart \| undefined; functionCalled: string \| undefined; }>`
`arcgisDataFetchComplete`	`CustomEvent<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: number \| boolean \| WebChartLegendPositions \| MapView \| SceneView \| undefined; model: ChartModel \| undefined; }>`
`arcgisRuntimeError`	`CustomEvent<void>`
`arcgisSelectionComplete`	`CustomEvent<{ selectionData: SelectionData; model: ChartModel \| undefined; }>`
`arcgisSeriesColorChange`	`CustomEvent<{ data: PieSlicesSymbols \| SeriesSymbolsMap; colorMatchApplied: boolean; model: ChartModel \| undefined; }>`
`arcgisSeriesOrder`	`CustomEvent<Array<string>>`
`arcgisUpdateComplete`	`CustomEvent<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: CustomEvent<DataWarningObject>

Event triggered when an error is detected with the data set

arcgisChartNotFoundWarning

Event

arcgisChartNotFoundWarning: CustomEvent<string>

Event triggered when the chart is not found for the given chartIndex property.

arcgisConfigChange

Event

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

Event triggered when the chart config is changed

arcgisDataFetchComplete

Event

arcgisDataFetchComplete: CustomEvent<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: number | boolean | WebChartLegendPositions | MapView | SceneView | undefined;
    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: CustomEvent<Array<string>>

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

arcgisUpdateComplete

Event

arcgisUpdateComplete: CustomEvent<ValidationStatus>

Event triggered once the chart is updated

Slots

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

action-bar

Slot

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