import "@arcgis/charts-components/components/arcgis-chart";
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:
- Introduction to charts
- Tutorial: Display a chart
- Tutorial: Create a heat chart
- Tutorial: Modify a chart
Demos
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 |
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
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
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
autoDisposeChart: boolean
Auto-disposes the chart when a new one is created in the same container.
- Attribute
- auto-dispose-chart
- Default value
- undefined
autoInverseDataLabelTextColor
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
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
<arcgis-chart layer-item-id="05e015c5f0314db9a487a9b46cb37eca" chart-index="2"></arcgis-chart>
- Attribute
- chart-index
- Default value
- undefined
chartLimits
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
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
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
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
disableInteractions: boolean
Disables all interactions on the chart.
- Attribute
- disable-interactions
- Default value
- false
disableTogglingLegendItems
disableTogglingLegendItems: boolean
Disables the toggling of series via the legend items.
- Attribute
- disable-toggling-legend-items
- Default value
- undefined
enableConfiguration
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
enableResponsiveFeatures: boolean
Enables the responsive features.
- Attribute
- enable-responsive-features
- Default value
- undefined
errorPolicy
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
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
filterByExtent: boolean
When true
, all chart elements are filtered based on view extent.
- Attribute
- filter-by-extent
- Default value
- undefined
filterBySelection
filterBySelection: boolean
When true
, all chart elements are filtered based on selection.
- Attribute
- filter-by-selection
- Default value
- undefined
gaugeInnerLabelFormatter
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
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
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
hideLicenseWatermark: boolean
Hides the license watermark.
- Attribute
- hide-license-watermark
- Default value
- undefined
hideLoaderAnimation
hideLoaderAnimation: boolean
Hides the loader animation (curtain and spinner), showed by default at every update.
- Attribute
- hide-loader-animation
- Default value
- undefined
ignoreSmoothRenderingLimit
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
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
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
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
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
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
<arcgis-chart layer-item-id="05e015c5f0314db9a487a9b46cb37eca" chart-index="2"></arcgis-chart>
- Attribute
- layer-item-id
- Default value
- undefined
layerRendererChangePolicy
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
legendPosition: "bottom" | "left" | "right" | "top"
Used to set the legend's position on the chart.
- Attribute
- legend-position
- Default value
- undefined
legendValueLabelFormatter
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
legendVisibility: boolean
When true
, the legend is visible on the chart.
- Attribute
- legend-visibility
- Default value
- undefined
loaderColors
loaderColors: LoaderColors
Defines the colors for the loader animation.
- Default value
- undefined
model
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
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 tofalse
)
- Attribute
- null-as-valid
- Default value
- false
placeholder
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
queueChartCreation: boolean
Builds the charts one by one rather than all at the same time.
- Attribute
- queue-chart-creation
- Default value
- undefined
replaceNoValueCategoryWithZero
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
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
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
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
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
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
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
selectionData: SelectionData
When this property is set, it will apply a selection on the chart matching the provided selection.
- Default value
- undefined
selectionTheme
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
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
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
syncSelection: boolean
Whether to synchronize the selection between chart components from the same layer.
- Attribute
- sync-selection
- Default value
- false
syncSelectionsBetweenChartAndLayerViewPolicy
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
timeZone: string
Used to set a custom time zone for the chart.
- Attribute
- time-zone
- Default value
- undefined
tooltipFormatter
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
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
useAnimatedCharts: boolean
Enables the animations on the chart.
- Attribute
- use-animated-charts
- Default value
- undefined
usePopupTemplateFieldsInfo
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
Used to access the LayerView instance in order to perform client-side queries.
- Default value
- undefined
viewTimeExtentChangePolicy
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
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
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
clearSelection(): Promise<void>
Clears all selection on the chart.
- Returns
- Promise<void>
componentOnReady
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
Example
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
errorAlert(errorMessage?: string): Promise<void>
Triggers an alert to display an error message.
Parameters
Parameter | Type | Optional? |
---|---|---|
errorMessage | string | undefined |
- Returns
- Promise<void>
exportAsCSV
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
exportAsImage(format?: DownloadableChartImagesTypes): Promise<void>
Export the current chart as an image.
Parameters
Parameter | Type | Optional? |
---|---|---|
format | "jpeg" | "png" | "svg" |
- Returns
- Promise<void>
loadModel
loadModel(): Promise<void>
Returns a promise that resolves when the chart model is fully loaded.
- Returns
- Promise<void>
notify
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
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
resetZoom(): Promise<void>
Resets the chart zoom to bring it back to full extent
- Returns
- Promise<void>
switchSelection
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
arcgisAxesMinMaxChange: CustomEvent<{
bounds: Array<CalculatedMinMaxBoundsPayload>;
model: ChartModel | undefined;
}>
Event triggered once the chart axes min/max values are computed
arcgisBadDataWarningRaise
arcgisBadDataWarningRaise: CustomEvent<DataWarningObject>
Event triggered when an error is detected with the data set
arcgisChartNotFoundWarning
arcgisChartNotFoundWarning: CustomEvent<string>
Event triggered when the chart is not found for the given chartIndex
property.
arcgisConfigChange
arcgisConfigChange: CustomEvent<{
newConfig: WebChart | undefined;
oldConfig: WebChart | undefined;
functionCalled: string | undefined;
}>
Event triggered when the chart config is changed
arcgisDataFetchComplete
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
arcgisDataProcessComplete: CustomEvent<{
chartData: WebChartDataTypes;
model: ChartModel | undefined;
}>
Event triggered once the chart data has been processed
arcgisDataProcessError
arcgisDataProcessError: CustomEvent<void>
Event triggered when an error occurred while fetching of processing the data for the chart
arcgisLegendItemVisibilityChange
arcgisLegendItemVisibilityChange: CustomEvent<{
legendItemVisibility: LegendItemVisibility;
model: ChartModel | undefined;
}>
Event triggered once a legend item visibility has been changed
arcgisNoRenderPropChange
arcgisNoRenderPropChange: CustomEvent<{
propName: string;
value: number | boolean | WebChartLegendPositions | MapView | SceneView | undefined;
model: ChartModel | undefined;
}>
Event triggered when a no-render prop is changed
arcgisRuntimeError
arcgisRuntimeError: CustomEvent<void>
Event triggered when an error occurred that prevents the chart from being created or updated
arcgisSelectionComplete
arcgisSelectionComplete: CustomEvent<{
selectionData: SelectionData;
model: ChartModel | undefined;
}>
Event triggered when a selection is applied to the chart
arcgisSeriesColorChange
arcgisSeriesColorChange: CustomEvent<{
data: PieSlicesSymbols | SeriesSymbolsMap;
colorMatchApplied: boolean;
model: ChartModel | undefined;
}>
Event triggered once the chart series color have been assigned
arcgisSeriesOrder
arcgisSeriesOrder: CustomEvent<Array<string>>
Event carrying the series id as they have been sorted following the orderOptions
instructions
arcgisUpdateComplete
arcgisUpdateComplete: CustomEvent<ValidationStatus>
Event triggered once the chart is updated
Slots
Name | Description |
---|---|
action-bar | Slot for adding a |