Skip to content

Chart

ESM:
Use dark colors for code blocksCopy
1
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.

See also:

Demos

Bar ChartBox PlotLine ChartCombo Bar Line ChartGaugeHeat ChartHistogramPie ChartScatterplotRadar 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

PropertyAttributeType
actionMode
reflected
action-mode"monoSelection" | "multiSelection" | "multiSelectionWithCtrlKey" | "none" | "zoom"
allow-using-object-id-statboolean
auto-dispose-chartboolean
autoInverseDataLabelTextColorauto-inverse-data-label-text-colorboolean
chartIndex
reflected
chart-indexnumber
chartLimitsChartElementLimit
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))
disable-interactionsboolean
disable-toggling-legend-itemsboolean
enable-configurationboolean
enable-responsive-featuresboolean
errorPolicy
reflected
error-policy"ignore" | "throw"
featureIndex
reflected
feature-indexnumber
filter-by-extentboolean
filter-by-selectionboolean
gaugeInnerLabelFormatter(((value?: number | undefined) => string))
guideTooltipFormatter(((props: GuideTooltipFormatCallbackProps) => string))
hide-empty-seriesboolean
hide-license-watermarkboolean
hide-loader-animationboolean
ignore-smooth-rendering-limitboolean
ignore-view-extentboolean
layerFeatureLayer | FeatureLayerView | SubtypeSublayer
layer-fields-change-policy"ignore" | "refresh"
layer-filter-change-policy"ignore" | "refresh"
layerItemId
reflected
layer-item-idstring
layer-renderer-change-policy"ignore" | "refresh"
legend-position"bottom" | "left" | "right" | "top"
legendValueLabelFormatter(((value?: number | undefined, percent?: number | undefined) => string))
legend-visibilityboolean
loaderColorsLoaderColors
modelChartModel | WebChart
nullAsValid
reflected
null-as-validboolean
placeholder
reflected
placeholderstring
queue-chart-creationboolean
replace-no-value-category-with-zeroboolean
return-features-extentboolean
return-selection-indexesboolean
return-selection-oi-dsboolean
rotation
reflected
rotationboolean
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))
selectionDataSelectionData
selectionThemeSelectionTheme
set-time-binning-info-when-not-providedboolean
show-ui-messagesboolean
syncSelection
reflected
sync-selectionboolean
sync-selections-between-chart-and-layer-view-policy"disabled" | "enabled"
timeZone
reflected
time-zonestring
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))
updateSplitBySeriesMissingSplitBySeriesProps
use-animated-chartsboolean
use-popup-template-fields-infoboolean
viewMapView | SceneView
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

reflected
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

reflected
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

reflected
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

reflected
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
1
<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

reflected
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

reflected
Property
disableInteractions: boolean

Disables all interactions on the chart.

Attribute
disable-interactions
Default value
false

disableTogglingLegendItems

reflected
Property
disableTogglingLegendItems: boolean

Disables the toggling of series via the legend items.

Attribute
disable-toggling-legend-items
Default value
undefined

enableConfiguration

reflected
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

reflected
Property
enableResponsiveFeatures: boolean

Enables the responsive features.

Attribute
enable-responsive-features
Default value
undefined

errorPolicy

reflected
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

reflected
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

reflected
Property
filterByExtent: boolean

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

Attribute
filter-by-extent
Default value
undefined

filterBySelection

reflected
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

reflected
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

reflected
Property
hideLicenseWatermark: boolean

Hides the license watermark.

Attribute
hide-license-watermark
Default value
undefined

hideLoaderAnimation

reflected
Property
hideLoaderAnimation: boolean

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

Attribute
hide-loader-animation
Default value
undefined

ignoreSmoothRenderingLimit

reflected
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

reflected
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

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

reflected
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

reflected
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

reflected
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
1
<arcgis-chart layer-item-id="05e015c5f0314db9a487a9b46cb37eca" chart-index="2"></arcgis-chart>
Attribute
layer-item-id
Default value
undefined

layerRendererChangePolicy

reflected
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

reflected
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

reflected
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

reflected
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

reflected
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

reflected
Property
queueChartCreation: boolean

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

Attribute
queue-chart-creation
Default value
undefined

replaceNoValueCategoryWithZero

reflected
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

reflected
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

reflected
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

reflected
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

reflected
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

reflected
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

reflected
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

reflected
Property
syncSelection: boolean

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

Attribute
sync-selection
Default value
false

syncSelectionsBetweenChartAndLayerViewPolicy

reflected
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

reflected
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

reflected
Property
useAnimatedCharts: boolean

Enables the animations on the chart.

Attribute
use-animated-charts
Default value
undefined

usePopupTemplateFieldsInfo

reflected
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

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

Default value
undefined

viewTimeExtentChangePolicy

reflected
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

MethodSignature
clearSelectionclearSelection(): Promise<void>
componentOnReadycomponentOnReady(): Promise<void>
errorAlerterrorAlert(errorMessage?: string): Promise<void>
exportAsCSVexportAsCSV(options?: CSVOptions): Promise<void>
exportAsImageexportAsImage(format?: DownloadableChartImagesTypes): Promise<void>
loadModelloadModel(): Promise<void>
notifynotify(message?: string, heading?: string, options?: NotifyOptions): Promise<void>
refreshrefresh(props?: { updateData?: boolean; resetAxesBounds?: boolean; }): Promise<void>
resetZoomresetZoom(): Promise<void>
switchSelectionswitchSelection(): 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
1
2
3
4
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
ParameterTypeOptional?
errorMessagestring | undefined
Returns
Promise<void>

exportAsCSV

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

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

Parameters
ParameterTypeOptional?
optionsCSVOptions | undefined
Returns
Promise<void>

exportAsImage

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

Export the current chart as an image.

Parameters
ParameterTypeOptional?
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
ParameterTypeOptional?
messagestring | undefined
headingstring | undefined
optionsNotifyOptions | undefined
Returns
Promise<void>

refresh

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

Re-render the chart.

Parameters
ParameterTypeOptional?
propsundefined | { 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

EventType
arcgisAxesMinMaxChangeCustomEvent<{ bounds: Array<CalculatedMinMaxBoundsPayload>; model: ChartModel | undefined; }>
arcgisBadDataWarningRaiseCustomEvent<DataWarningObject>
arcgisChartNotFoundWarningCustomEvent<string>
arcgisConfigChangeCustomEvent<{ newConfig: WebChart | undefined; oldConfig: WebChart | undefined; functionCalled: string | undefined; }>
arcgisDataFetchCompleteCustomEvent<WebChartBoxPlotDataItem | WebChartGenericDataItem | WebChartHistogramDataItem | WebChartScatterplotDataItem>
arcgisDataProcessCompleteCustomEvent<{ chartData: WebChartDataTypes; model: ChartModel | undefined; }>
arcgisDataProcessErrorCustomEvent<void>
arcgisLegendItemVisibilityChangeCustomEvent<{ legendItemVisibility: LegendItemVisibility; model: ChartModel | undefined; }>
arcgisNoRenderPropChangeCustomEvent<{ propName: string; value: number | boolean | WebChartLegendPositions | MapView | SceneView | undefined; model: ChartModel | undefined; }>
arcgisRuntimeErrorCustomEvent<void>
arcgisSelectionCompleteCustomEvent<{ selectionData: SelectionData; model: ChartModel | undefined; }>
arcgisSeriesColorChangeCustomEvent<{ data: PieSlicesSymbols | SeriesSymbolsMap; colorMatchApplied: boolean; model: ChartModel | undefined; }>
arcgisSeriesOrderCustomEvent<Array<string>>
arcgisUpdateCompleteCustomEvent<ValidationStatus>

arcgisAxesMinMaxChange

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

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

bubbles
composed
cancelable

arcgisBadDataWarningRaise

Event
arcgisBadDataWarningRaise: CustomEvent<DataWarningObject>

Event triggered when an error is detected with the data set

bubbles
composed
cancelable

arcgisChartNotFoundWarning

Event
arcgisChartNotFoundWarning: CustomEvent<string>

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

bubbles
composed
cancelable

arcgisConfigChange

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

Event triggered when the chart config is changed

bubbles
composed
cancelable

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.

bubbles
composed
cancelable

arcgisDataProcessComplete

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

Event triggered once the chart data has been processed

bubbles
composed
cancelable

arcgisDataProcessError

Event
arcgisDataProcessError: CustomEvent<void>

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

bubbles
composed
cancelable

arcgisLegendItemVisibilityChange

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

Event triggered once a legend item visibility has been changed

bubbles
composed
cancelable

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

bubbles
composed
cancelable

arcgisRuntimeError

Event
arcgisRuntimeError: CustomEvent<void>

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

bubbles
composed
cancelable

arcgisSelectionComplete

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

Event triggered when a selection is applied to the chart

bubbles
composed
cancelable

arcgisSeriesColorChange

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

Event triggered once the chart series color have been assigned

bubbles
composed
cancelable

arcgisSeriesOrder

Event
arcgisSeriesOrder: CustomEvent<Array<string>>

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

bubbles
composed
cancelable

arcgisUpdateComplete

Event
arcgisUpdateComplete: CustomEvent<ValidationStatus>

Event triggered once the chart is updated

bubbles
composed
cancelable

Slots

NameDescription
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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.