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 (beta)

The @arcgis/charts-components package contains components for building charts in web applications. Each chart is rendered by setting a model object that follows a shared chart specification. The model can be loaded directly from a preconfigured webmap or feature layer, or configured programmatically using charts model methods. The package also includes a charts action bar component that offers default actions like rotation, filtering, and exporting as PNGs, with support for adding custom actions as needed.

Render a chart

Charts are rendered by setting a model object that defines the chart’s data and visualization to the chart component. There are two ways to create and configure this model:

1. Use an existing model from a webmap or feature layer.
2. Create a new model programmatically.

Use an existing model from a webmap or feature layer

If you've already configured a chart in a web map or feature layer using Map Viewer in ArcGIS Online, you can directly bring in the model from that source. This is useful for quickly rendering charts without needing to set up the model from scratch.

Here’s a snippet showing how to set an existing charts model from a webmap layer to a chart element, using the map element to access the layer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<arcgis-map item-id="96cb2d2825dc459abadcabc941958125">
  <arcgis-placement position="bottom-right">
      <arcgis-chart></arcgis-chart>
  </arcgis-placement>
</arcgis-map>
<script type="module">
  const mapElement = document.querySelector("arcgis-map");
  const chartElement = document.querySelector("arcgis-chart");

  mapElement.addEventListener('arcgisViewReadyChange', (event) => {
    const { map } = event.target;
    const layer = map.layers.find((layer) => layer.title === "College Scorecard");

    chartElement.layer = layer;
    chartElement.model = layer.charts[0];
  });
</script>

Create a new model

To create a new chart model, use the createModel() method. This lets you configure the chart fully in code, including data, series, and many other display options. The model can then be set to the chart element to render the chart just like with an existing model from a webmap or feature layer. You would still need a valid layer to create a model. There are currently nine charts model types available, which are documented in the charts model reference.

Here's a snippet showing how to create a bar chart model with createModel() and set it on the chart element:

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

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

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

chartElement.model = barChartModel;