Chart and map interactions | ArcGIS Maps SDK for JavaScript

In this tutorial, you will:

Load and display a pre-configured web map A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more stored in ArcGIS Online with the <arcgis-map> component.
Load and display multiple pre-configured charts from the web map A web map is a map stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web map specification. Learn more stored in ArcGIS Online using the <arcgis-chart> component with the reference-element, map-layer-id and chart-index attributes.
Add the <arcgis-charts-action-bar> component that will allow more interaction actions with the chart.
Add the <arcgis-selection-toolbar> component to enable selection on the map.
Explore interactive functionalities, such as filtering by extent of the map and synchronizing selections between the charts and the map.

Prerequisites

Steps

Create a new pen

Go to CodePen to create a new pen for your application.

Add basic HTML

Define a basic HTML page.

In CodePen > HTML, add HTML to create a basic page.

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Chart and map interactions</title>

  </head>

  <body>



  </body>

</html>

Add styling

In the <head> tag, add CSS to style the page layout for the map and chart components. It uses a grid layout to split the viewport into two columns and two rows, placing the map on the left and the charts on the right.

6 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Chart and map interactions</title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
      }
      arcgis-map {
        grid-row: span 2;
      }
      arcgis-chart {
        grid-column: 2;
      }
    </style>
10 collapsed lines

  </head>

  <body>



  </body>

</html>

Add the ArcGIS Maps SDK for JavaScript script tag

In the <head>, add the <script> tag for the JavaScript Maps SDK.

6 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Chart and map interactions</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.2/"></script>
10 collapsed lines

  </head>

  <body>



  </body>

</html>

Add map components

In the <body>, add the <arcgis-map> component.

Set the item-id attribute to the ID of the map you want to display.
Set the id to map to be used by the reference element later in the tutorial.

32 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Chart and map interactions</title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
      }
      arcgis-map {
        grid-row: span 2;
      }
      arcgis-chart {
        grid-column: 2;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.2/"></script>

  </head>

  <body>

    <arcgis-map item-id="f2481ef191924872be8897179f73d55c" id="map">

    </arcgis-map>
16 collapsed lines


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="0" sync-view-selection>

      <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>

    </arcgis-chart>


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="1" sync-view-selection>
      <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
    </arcgis-chart>

  </body>

</html>

Component reference (map)

Within the <arcgis-map> component, add the <arcgis-selection-toolbar> component to enable selection tools for the map.

32 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Chart and map interactions</title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
      }
      arcgis-map {
        grid-row: span 2;
      }
      arcgis-chart {
        grid-column: 2;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.2/"></script>

  </head>

  <body>

    <arcgis-map item-id="f2481ef191924872be8897179f73d55c" id="map">

      <arcgis-selection-toolbar
        slot="top-right"
        default-operation-type="add"
        visual-scale="s"
      ></arcgis-selection-toolbar>

    </arcgis-map>
16 collapsed lines


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="0" sync-view-selection>

      <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>

    </arcgis-chart>


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="1" sync-view-selection>
      <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
    </arcgis-chart>

  </body>

</html>

Component reference (selection toolbar)

Add charts components

Below the map component, add the <arcgis-chart> component.

Set the reference-element attribute to map (the id of the map component). This links the chart to the map element.
Set the map-layer-id attribute to the ID of the map layer you want to link the chart to.
Set the chart-index attribute to 0 to indicate that this is the first chart linked to the map layer.
Add the sync-view-selection attribute to enable synchronization of selection between the chart and the map.

Note

Charts need to be pre-configured in Map Viewer and saved to the webmap prior to being displayed with reference-element and map-layer-id.

The map-layer-id can be found by traversing the layers in the map component’s view once it is ready.

// Example: get the ID of the first layer in the map's web map item
// Note: If the layer is inside a group layer, you will need to traverse the group layer's sublayers to get the correct ID.
const viewElement = document.querySelector("arcgis-map");
await viewElement.viewOnReady();
const mapLayerId = viewElement.view.map.layers.items[0].id;

43 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Chart and map interactions</title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
      }
      arcgis-map {
        grid-row: span 2;
      }
      arcgis-chart {
        grid-column: 2;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.2/"></script>

  </head>

  <body>

    <arcgis-map item-id="f2481ef191924872be8897179f73d55c" id="map">

      <arcgis-selection-toolbar
        slot="top-right"
        default-operation-type="add"
        visual-scale="s"
      ></arcgis-selection-toolbar>

    </arcgis-map>


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="0" sync-view-selection>

    </arcgis-chart>
9 collapsed lines


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="1" sync-view-selection>
      <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
    </arcgis-chart>

  </body>

</html>

Component reference (chart)

Within the <arcgis-chart> component, add the <arcgis-charts-action-bar> component and set the slot to action-bar.

The action bar provides built-in actions such as toggling legend visibility, rotation, filtering by selection, filtering by view extent, exporting as images or tables and more.

43 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Chart and map interactions</title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
      }
      arcgis-map {
        grid-row: span 2;
      }
      arcgis-chart {
        grid-column: 2;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.2/"></script>

  </head>

  <body>

    <arcgis-map item-id="f2481ef191924872be8897179f73d55c" id="map">

      <arcgis-selection-toolbar
        slot="top-right"
        default-operation-type="add"
        visual-scale="s"
      ></arcgis-selection-toolbar>

    </arcgis-map>


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="0" sync-view-selection>

      <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>

    </arcgis-chart>
9 collapsed lines


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="1" sync-view-selection>
      <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
    </arcgis-chart>

  </body>

</html>

Component reference (charts action bar)

Lastly, repeat the first two steps to add the second chart to the page, specifying the appropriate chart-index for the second chart.

50 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Chart and map interactions</title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
      }
      arcgis-map {
        grid-row: span 2;
      }
      arcgis-chart {
        grid-column: 2;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.2/"></script>

  </head>

  <body>

    <arcgis-map item-id="f2481ef191924872be8897179f73d55c" id="map">

      <arcgis-selection-toolbar
        slot="top-right"
        default-operation-type="add"
        visual-scale="s"
      ></arcgis-selection-toolbar>

    </arcgis-map>


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="0" sync-view-selection>

      <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>

    </arcgis-chart>


    <arcgis-chart reference-element="map" map-layer-id="194f7ed3447-layer-50" chart-index="1" sync-view-selection>
      <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
    </arcgis-chart>
4 collapsed lines

  </body>

</html>

Component reference (charts action bar)

Run the app

In CodePen, explore how selections stay in sync across the map and charts, and how the map’s extent filters chart data.

Select a column in either chart to select the corresponding features on the map and in the other chart.
Use the map’s selection toolbar to select features and update both charts.
Choose Filter by view extent in a chart’s action bar to filter its data to the current map extent.