Introduction to 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 chart component for rendering charts and the charts action bar component for common interactions 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 charts model.

Depending on your use case, there are different workflows to create and render a chart:

Load from a layer item

When a chart was configured in Map Viewer and saved to the layer item, you can quickly render the chart without needing to write any JavaScript.

To load a chart from a layer item, set the following attributes on the chart component:

• The layer-item-id of the layer item that contains the chart configuration.
  • Supported layer types: feature layer, subtype sublayer, imagery layer, imagery tile layer and WCS layer.
• The chart-index of the chart you want to render.

<arcgis-chart
  layer-item-id="..."
  chart-index="0">
</arcgis-chart>

Create a new chart with charts model

When you want to create a new chart, use the charts model properties and methods to create and configure the chart in JavaScript.

To create a new chart with charts model, use the createModel() method.

• Supported layer types: feature layer, subtype sublayer, imagery layer, imagery tile layer and WCS layer.
• Supported chart types: barChart, boxPlot, lineChart, comboBarLineChart, gauge, heatChart, histogram, pieChart,scatterplot and radarChart.

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

const myLayer = new FeatureLayer({ portalItem: { id: "..." } });

const chartElement = document.querySelector("arcgis-chart");
const barChartModel = await createModel({ layer: myLayer, chartType: "barChart" });
barChartModel.xAxisField = "field";

Once configured, assign the 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, first load the chart from the layer item with the layer-item-id and chart-index attributes.

<arcgis-chart
  layer-item-id="..."
  chart-index="0">
</arcgis-chart>

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

const chartElement = document.querySelector("arcgis-chart");
await chartElement.loadModel();

Then you can use the model’s properties and methods to customize the chart.

chartElement.model.titleText = "New Title";

Chart types

The chart component currently supports 10 chart types. Each chart type has a corresponding model with a list of properties and methods. Depending on the data you want to visualize and the insights you want to gain, certain chart types might be more suitable than others.

Use the guides below to explore each chart type with different configuration examples.