Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/references/charts-components/arcgis-chart/ below:

Chart | ArcGIS Maps SDK for JavaScript 4.33

Use dark colors for code blocks Copy

1
import "@arcgis/charts-components/components/arcgis-chart";

No specific import is needed for this component.

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

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

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

See also:

• Introduction to Charts components
• Tutorial: Display and create charts components

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

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

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

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

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

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

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

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

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

action-mode

"monoSelection" | "multiSelection" | "multiSelectionWithCtrlKey" | "none" | "zoom"

auto-dispose-chart

boolean

ChartElementLimit

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

component-version

"beta" | "stable"

cursor-range

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

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

disable-interactions

boolean

disable-toggling-legend-items

boolean

enable-configuration

boolean

enable-responsive-features

boolean

error-policy

"ignore" | "throw"

feature-index

number

filter-by-extent

boolean

filter-by-selection

boolean

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

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

hide-empty-series

boolean

hide-license-watermark

boolean

hide-loader-animation

boolean

ignore-smooth-rendering-limit

boolean

ignore-view-extent

boolean

layer-fields-change-policy

"ignore" | "refresh"

layer-filter-change-policy

"ignore" | "refresh"

layer-renderer-change-policy

"ignore" | "refresh"

legend-position

"bottom" | "left" | "right" | "top"

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

legend-visibility

boolean

LoaderColors

MessageOptions

ChartModel | WebChart

placeholder

string

queue-chart-creation

boolean

replace-no-value-category-with-zero

boolean

return-features-extent

boolean

return-selection-indexes

boolean

return-selection-oi-ds

boolean

rotation

boolean

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

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

SelectionData

SelectionTheme

set-time-binning-info-when-not-provided

boolean

sync-selection

boolean

sync-selections-between-chart-and-layer-view-policy

"disabled" | "enabled"

time-zone

string

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

MissingSplitBySeriesProps

use-animated-charts

boolean

use-popup-template-fields-info

boolean

view-time-extent-change-policy

"ignore" | "refresh"

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

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

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

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

Attribute

action-mode

Default value

undefined

autoDisposeChart: boolean

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

Attribute

auto-dispose-chart

Default value

undefined

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

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

Property

componentVersion: "beta" | "stable"

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

Attribute

component-version

Default value

"stable"

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

Property

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

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

Default value

undefined

disableInteractions: boolean

Disables all interactions on the chart.

Attribute

disable-interactions

Default value

false

disableTogglingLegendItems: boolean

Disables the toggling of series via the legend items.

Attribute

disable-toggling-legend-items

Default value

undefined

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: boolean

Enables the responsive features.

Attribute

enable-responsive-features

Default value

undefined

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: 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: boolean

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

Attribute

filter-by-extent

Default value

undefined

filterBySelection: boolean

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

Attribute

filter-by-selection

Default value

undefined

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

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: 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: boolean

Hides the license watermark.

Attribute

hide-license-watermark

Default value

undefined

hideLoaderAnimation: boolean

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

Attribute

hide-loader-animation

Default value

undefined

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: 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

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: "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: "ignore" | "refresh"

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

Attribute

layer-filter-change-policy

Default value

"refresh"

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: "bottom" | "left" | "right" | "top"

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

Attribute

legend-position

Default value

undefined

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: boolean

When true, the legend is visible on the chart.

Attribute

legend-visibility

Default value

undefined

Property

loaderColors: LoaderColors

Defines the colors for the loader animation.

Default value

undefined

Property

messageOptions: MessageOptions

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

Default value

undefined

Property

model: ChartModel | WebChart

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

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

Default value

undefined

placeholder: 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: boolean

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

Attribute

queue-chart-creation

Default value

undefined

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: 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: 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: 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: 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

Property

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

Applies runtime data filters to the chart's.

Default value

undefined

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

Property

selectionData: SelectionData

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

Default value

undefined

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: boolean

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

Attribute

set-time-binning-info-when-not-provided

Default value

undefined

syncSelection: boolean

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

Attribute

sync-selection

Default value

false

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: string

Used to set a custom time zone for the chart.

Attribute

time-zone

Default value

undefined

Property

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

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

Default value

undefined

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: boolean

Enables the animations on the chart.

Attribute

use-animated-charts

Default value

undefined

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

Property

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

Default value

undefined

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"

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

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

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

Event

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

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Event triggered when an error is detected with the data set

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Event triggered when the chart config is changed

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

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.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Event triggered once the chart data has been processed

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

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

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Event triggered once a legend item visibility has been changed

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Event triggered when a no-render prop is changed

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

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

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Event triggered when a selection is applied to the chart

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Event triggered once the chart series color have been assigned

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

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

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Event triggered once the chart is updated

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

clearSelection(): Promise<void>

componentOnReady(): Promise<void>

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

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

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

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

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

resetZoom(): Promise<void>

switchSelection(): Promise<void>

Method

clearSelection(): Promise<void>

Clears all selection on the chart.

Returns

Promise<void>

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Use dark colors for code blocks Copy

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>

Method

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

Triggers an alert to display an error message.

errorMessage

string | undefined

Returns

Promise<void>

Method

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

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

options

CSVOptions | undefined

Returns

Promise<void>

Method

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

Export the current chart as an image.

format

"jpeg" | "png" | "svg"

Returns

Promise<void>

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.

message

string | undefined

heading

string | undefined

options

NotifyOptions | undefined

Returns

Promise<void>

Method

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

Re-render the chart.

props

undefined | { updateData?: boolean | undefined; resetAxesBounds?: boolean | undefined; updateExtent?: boolean | undefined; }

Returns

Promise<void>

Method

resetZoom(): Promise<void>

Resets the chart zoom to bring it back to full extent

Returns

Promise<void>

Method

switchSelection(): Promise<void>

Switches the selection on the chart.

Returns

Promise<void>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4