Introduction to charts

Charts are used to visualize data in a graphical format, making it easier to identify patterns, trends, and insights. They can be used in conjunction with maps to provide a comprehensive view of the data being represented.

Charts components

The @arcgis/charts-components package contains components for building charts in web applications. The package also includes a charts action bar component that offers default actions like rotation, filtering, and exporting as images, with support for adding custom actions as needed.

Working with charts components

Charts are rendered by setting a model object that defines the chart’s data and visualization to the chart component. The model object can be sourced from an existing feature layer, or built programmatically with charts model. Here are some different ways to render or configure a chart:

1. Load an existing chart from a feature layer item
2. Create a new chart using charts model
3. Load an existing chart and customize it with charts model

Load an existing chart from a feature layer item

If you have already configured a chart in Map Viewer and saved it to the feature layer item, you can render the chart by specifying the layer-item-id and chart-index on the <arcgis-chart> component. This is useful for quickly rendering charts without needing to set up charts model from scratch.

Here is a code snippet to demonstrate the usage of a chart component <arcgis-chart> with layer-item-id and chart-index attributes, which renders a chart into a web page using the specified feature layer and chart index:

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

Create a new chart using charts model

To create a new chart programmatically, use the createModel() method. This lets you configure the chart with JavaScript, including data, series, and many other display options. The model object can then be set to the chart element to render the chart.

createModel

To use the createModel() method, you need to provide a feature layer or subtype sublayer using the layer property, and specify the chartType.

The table below lists the supported chartType and their corresponding model documentation:

• barChart
• boxPlot
• lineChart
• comboBarLineChart
• gauge
• heatChart
• histogram
• pieChart
• scatterplot
• radarChart

Here is a code snippet to demonstrate how to create a bar chart with createModel():

1
2
3
4
5
6
7
8
import { createModel } from "@arcgis/charts-components";

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

const barChartModel = await createModel({ layer: myFeatureLayer, chartType: "barChart" });
barChartModel.xAxisField = "field";

chartElement.model = barChartModel;

Load an existing chart and customize it with charts model

Another workflow is to load an existing chart with the layer-item-id and chart-index attributes, and then customize it with the charts model methods. Call the async loadModel() method on the chart component to ensure the model is fully loaded before making changes. Once loaded, you can use the model’s methods to customize the chart.

Here is a code snippet to demonstrate how to load an existing chart and customize it:

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

1
2
3
4
const chartElement = document.querySelector("arcgis-chart");

await chartElement.loadModel();
chartElement.model.titleText = "New Title";