Chart and map interactions

Learn how to use Charts Components with Map Components using Vite developer build tools.

In this tutorial, you will:

Add a map with an <arcgis-map> component and display a chart with an <arcgis-chart> component using slots.
Add an <arcgis-charts-action-bar> component that will allow more interaction actions with the chart.
Explore interactive functionalities, such as filtering by extent of the map and synchronizing selections between the chart and the map.

Prerequisites

The most recent LTS Node.js runtime environment.
A text editor to edit files.
A terminal to enter commands.

Steps

Create a new project using Vite

Download the initial Vite vanilla JavaScript project to your local machine.
Unzip the downloaded file.
Open the unzipped folder's files in your text editor.
Navigate to the unzipped folder in your terminal.

Install dependencies

To use charts and map components, install the @arcgis/charts-components and @arcgis/map-components packages and its dependencies into your project:
Use dark colors for code blocksCopy
```
1
npm install @arcgis/charts-components @arcgis/map-components @arcgis/core @esri/calcite-components
```
Start the Vite development server.
Use dark colors for code blocksCopy
```
1
npm run dev
```
Open a web browser and navigate to http://localhost:5173, this webpage will be empty, however, it will update as we proceed through the remaining steps.

Import the stylesheet, along with the <arcgis-chart> and the <arcgis-charts-action-bar> components from the @arcgis/charts-components package in main.js.

main.js
Use dark colors for code blocks


import "./style.css";
import "@arcgis/charts-components/components/arcgis-chart";
import "@arcgis/charts-components/components/arcgis-charts-action-bar";

Import the <arcgis-map> component from the @arcgis/map-components package in main.js.

main.js
Use dark colors for code blocks


import "./style.css";
import "@arcgis/charts-components/components/arcgis-chart";
import "@arcgis/charts-components/components/arcgis-charts-action-bar";

import "@arcgis/map-components/components/arcgis-map";

Add styles

Add CSS styles to make html and body fill the entire viewport with no margin.
style.css
Use dark colors for code blocks
```
1
2
3
4
5
6
7
8
9
10

html,
body {
  height: 100%;
  margin: 0;
}
```

Add CSS to the arcgis-chart element so its width is 800px.

style.css
Use dark colors for code blocks

html,
body {
  height: 100%;
  margin: 0;
}

arcgis-chart {
  width: 800px;
}

Add components

Add the <arcgis-map> component to index.html under <body> and set its item-id attribute to a WebMap portal item ID.

index.html
Expand
Use dark colors for code blocks

<body>

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

  </arcgis-map>

  <script type="module" src="main.js"></script>
</body>
Expand

Next, add the <arcgis-chart> component to the bottom-left slot of the map, and set its layer-item-id and chart-index attributes to load an existing bar chart from a feature layer item.

index.html
Expand
Use dark colors for code blocks

<body>

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

    <arcgis-chart layer-item-id="8c7ef8e9f0f149a4972300187dfc70c0" chart-index="0" slot="bottom-left">

    </arcgis-chart>

  </arcgis-map>

  <script type="module" src="main.js"></script>
</body>
Expand

Lastly, add the <arcgis-charts-action-bar> component and slot it within the chart component to enable chart actions like filtering and exporting.

index.html
Expand
Use dark colors for code blocks

<body>

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

    <arcgis-chart layer-item-id="8c7ef8e9f0f149a4972300187dfc70c0" chart-index="0" slot="bottom-left">

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

    </arcgis-chart>

  </arcgis-map>

  <script type="module" src="main.js"></script>
</body>
Expand

Interacting with the chart and map

In main.js, use document.querySelector() to get references for the <arcgis-map> and <arcgis-chart> components.

main.js
Expand
Use dark colors for code blocks
const mapElement = document.querySelector("arcgis-map");
const chartElement = document.querySelector("arcgis-chart");

let highlightSelect;
Expand

Since we are going to use property values from the map component, we'll use the arcgisViewReadyChange event to determine when the map is ready.

main.js
Expand
Use dark colors for code blocks
mapElement.addEventListener("arcgisViewReadyChange", (event) => {

});
Expand

Inside the event listener, get the map and view from the event target.

main.js
Expand
Use dark colors for code blocks
mapElement.addEventListener("arcgisViewReadyChange", (event) => {

  const { map, view } = event.target;

});
Expand

Filter chart data by map extent

In the callback function of the arcgisViewReadyChange event listener, set the chart element’s view property to the map’s view.

main.js
Expand
Use dark colors for code blocks
mapElement.addEventListener("arcgisViewReadyChange", (event) => {

  const { map, view } = event.target;

  chartElement.view = view;

});
Expand

This will enable the chart to filter its data based on the current map extent. To use this, you can click on the Filter by extent action in the chart's action bar. When you pan or zoom the map, the chart will automatically update to show only the features that are currently within the map's extent.

Synchronize chart selection with map highlights

Outside of the arcgisViewReadyChange event listener, declare a variable highlightSelect to hold the highlight handle for the map.

main.js
Expand
Use dark colors for code blocks
const mapElement = document.querySelector("arcgis-map");
const chartElement = document.querySelector("arcgis-chart");

let highlightSelect;
Expand

Add a listener for the arcgisSelectionComplete event on the chart element to clear the previous selection and highlight the new features on the map.

main.js
Expand
Use dark colors for code blocks
mapElement.addEventListener("arcgisViewReadyChange", (event) => {

  const { map, view } = event.target;

  chartElement.addEventListener("arcgisSelectionComplete", (event) => {
    if (highlightSelect) {
      highlightSelect.remove();
    }
    highlightSelect = view.layerViews.items[0].highlight(event.detail.selectionData.selectionOIDs);
  });

});
Expand

Now when you select features on the chart by clicking or dragging, the corresponding features will be highlighted on the map.

Highlight chart data based on map selections

Outside of the arcgisViewReadyChange event listener, add a second event listener to the mapElement: arcgisViewClick.

main.js
Expand
Use dark colors for code blocks
mapElement.addEventListener("arcgisViewClick", (event) => {

});

In the arcgisViewClick event listener's callback, get the view from the event target.

main.js
Expand
Use dark colors for code blocks
mapElement.addEventListener("arcgisViewClick", (event) => {

  const { view } = event.target;

});

Get the screenPoint from the event's detail property.

main.js
Expand
Use dark colors for code blocks
mapElement.addEventListener("arcgisViewClick", (event) => {

  const { view } = event.target;

  const { screenPoint } = event.detail;
  view.hitTest(screenPoint).then(getFeatures);

});

Lastly, get the features from the hitTest. Within the function, get the selected feature's OID (in this case, the attribute is ObjectId) and assign it to the chart element's selection data.

main.js
Expand
Use dark colors for code blocks
mapElement.addEventListener("arcgisViewClick", (event) => {

  const { view } = event.target;

  const { screenPoint } = event.detail;
  view.hitTest(screenPoint).then(getFeatures);

  function getFeatures(response) {
    const selectedFeatureOID = response.results[0].graphic.attributes["ObjectId"];
    chartElement.selectionData = {
      selectionOIDs: [selectedFeatureOID],
    };
  }

});

Run the application

The application should display a bar chart overlaying on bottom left of the map. When you select features on the chart, the corresponding features will be highlighted on the map. With the Filter By Extent action from the action bar enabled, the bar chart will only show features within the current map extent. Additionally, selecting features on the map will highlight the corresponding features on the chart.