Charts

Charts visualize data in a graphical format, making it easier to identify patterns, trends, and insights. When used alongside maps, they provide additional context for exploring spatial data.

The @arcgis/charts-components package provides web components for building interactive charts in web applications. It includes the <arcgis-chart> component for rendering charts and the <arcgis-charts-action-bar> component for actions such as rotating, filtering, and exporting charts.

Get started

Charts are rendered by setting a model object that defines how to render a chart. The model object can be sourced from an existing layer, or built programmatically with createModel().

Depending on the use case, there are different approaches to render a chart:

Load from a layer item

After configuring a chart in Map Viewer and saving it to a layer item, you can load it with the <arcgis-chart> component.

To load a saved chart from a layer item, set the following attributes on the <arcgis-chart> component:

1. The layer-item-id for the layer item containing one or more saved charts.
   • The layer item ID can be found in the URL of the layer’s item page on ArcGIS Online or Enterprise. For example, in the URL https://www.arcgis.com/home/item.html?id=8871626e970a4f3e9d6113ec63a92f2f, the layer item ID is 8871626e970a4f3e9d6113ec63a92f2f.
   • Supported layer types: FeatureLayer, ParquetLayer, ImageryLayer, ImageryTileLayer, WCSLayer, OrientedImageryLayer.
2. The chart-index of the chart you want to render.

<arcgis-chart layer-item-id="8871626e970a4f3e9d6113ec63a92f2f" chart-index="2" />

Create a new model with createModel()

When creating a new chart, use the createModel() method to create a new model and then set it to the model property of the <arcgis-chart> component. The model must be created from a supported layer type, which the chart sources for field metadata, statistics, and other necessary information for rendering.

• Supported layer types:
  • Feature and data layers: CatalogLayer, CSVLayer, FeatureLayer, GeoJSONLayer, ParquetLayer, WFSLayer
  • Imagery layers: ImageryLayer, ImageryTileLayer, OrientedImageryLayer, WCSLayer
• For the list of supported chart types, refer to the chart types guide page.

// Import the layer and createModel method
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
import { createModel } from "@arcgis/charts-components/model/shared/setup-utils.js";

// Create a feature layer instance from a portal item: e3bb6dbf5e0e44baad8391c74161198c (Reservoir Conditions)
const featureLayer = new FeatureLayer({ portalItem: { id: "e3bb6dbf5e0e44baad8391c74161198c" } });

// Get a reference to the chart element in the DOM
const chartElement = document.querySelector("arcgis-chart");

// Create a new bar chart model from the layer instance
const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });

// Set the x-axis field for the bar chart
barChartModel.xAxisField = "State";

// Assign the bar chart model to the chart element to render it
chartElement.model = barChartModel;

Load from layer item and customize with charts model

When you want to start with an existing chart configuration but need to customize it beyond what is possible in Map Viewer, you can use charts model methods to make further customizations to a chart loaded from a layer item.

To customize an existing chart saved to the layer item, first load the chart with the layer-item-id and chart-index attributes.

<arcgis-chart layer-item-id="8871626e970a4f3e9d6113ec63a92f2f" chart-index="2" />

Once the chart is loaded, call the async loadModel() method on the <arcgis-chart> component to ensure the model is fully loaded before making changes.

// Get a reference to the chart element in the DOM
const chartElement = document.querySelector("arcgis-chart");

// Call the method to ensure the model is fully loaded before making changes
await chartElement.loadModel();

// Once the model is loaded, use the model's properties/methods to customize
chartElement.model.titleText = "New Title";