Charts components with Map components

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 create a chart with an arcgis-charts-scatter-plot component.
  • Add an arcgis-charts-action-bar component to the chart that will allow more interaction features with the chart.
  • Explore various functionalities, such as filtering by extent and synchronizing selections between the chart and the map.
Charts components with map components

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

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

Install dependencies

  1. Install Charts Components and Map Components in the terminal window as a dependency.

    1
    npm install @arcgis/charts-components @arcgis/map-components
  2. Later in this tutorial we will need to know which version of @esri/calcite-components was installed as a dependency of @arcgis/map-components, run this command in the terminal window to find the correct version.

    1
    npm list @esri/calcite-components
  3. Start the Vite development server.

    1
    npm run dev
  4. Open a web browser and navigate to http://localhost:5173. Initially, this web page will be empty, but it will update as we proceed through the remaining steps.

  5. Import functions to define the custom HTML elements from the Charts Components, Map Components and Calcite Components libraries in main.js. You will need to use an alias, because the imported function from each library has the same name, defineCustomElements.

    1
    2
    3
    import { defineCustomElements as defineCalciteElements } from '@esri/calcite-components/dist/loader';
    import { defineCustomElements as defineChartsElements } from '@arcgis/charts-components/dist/loader';
    import { defineCustomElements as defineMapElements } from '@arcgis/map-components/dist/loader';
  6. Define the custom elements on the window using the Calcite Components distribution build. You will use CDN-hosted assets. When using the CDN-hosted assets, you need to keep the version number in the path the same as the version of @esri/calcite-components found in step two.

    1
    defineCalciteElements(window, { resourcesUrl: 'https://js.arcgis.com/calcite-components/2.13.2/assets' });
  7. Next, use the Charts Components and Map Components distribution build to define and lazy load the custom charts elements.

    1
    2
    defineMapElements(window, { resourcesUrl: 'https://js.arcgis.com/map-components/4.31/assets' });
    defineChartsElements(window, { resourcesUrl: 'https://js.arcgis.com/charts-components/4.31/assets' });

Add styles

  1. In style.css, import the @arcgis/core light theme and @esri/calcite-components CSS stylesheets.

    1
    2
    @import "https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/light/main.css";
    @import "https://js.arcgis.com/calcite-components/2.13.2/calcite.css";
  2. Add CSS styles to the scatterplot in style.css. This will position the chart component directly on top of the map component.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    html,
    body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
    
    #scatterplot {
        position: absolute;
        bottom: 100px;
        left: 30px;
        height: 40%;
        width: 50%;
    }
  3. Import the CSS file in main.js.

    1
    import './style.css';

Add components

  1. Add the arcgis-map component to index.html under <body>.

    1
    <arcgis-map item-id="2c7d98b24ed64da0985666d937c85196"></arcgis-map>
  2. Add the arcgis-charts-scatter-plot component under the map component.

    1
    <arcgis-charts-scatter-plot id="scatterplot"></arcgis-charts-scatter-plot>
  3. Add the arcgis-charts-action-bar component to be slotted inside the scatterplot component.

    1
    2
    3
    <arcgis-charts-scatter-plot id="scatterplot">
        <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
    </arcgis-charts-scatter-plot>

Create a reference to components

  1. In main.js, use document.querySelector() to get references for the arcgis-map, arcgis-charts-scatter-plot and arcgis-charts-action-bar components.
    1
    2
    3
    const mapElement = document.querySelector('arcgis-map');
    const scatterplotElement = document.querySelector('arcgis-charts-scatter-plot');
    const actionBarElement = document.querySelector('arcgis-charts-action-bar');

Load the scatterplot

  1. 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.

    1
    2
    3
    mapElement.addEventListener('arcgisViewReadyChange', (event) => {
      // to be implemented
    });
  2. Inside the event listener, get the map and view from the event target.

    1
    const { map, view } = event.target;
  3. Get the CollegeScorecard_Charts layer from the map and the first chart's config from the layer.

    1
    2
    const featureLayer = map.layers.find((layer) => layer.title === 'CollegeScorecard_Charts');
    const scatterplotConfig = featureLayer.charts[0];
  4. Set config to the scatterplot element, and assign the feature layer to the scatterplot element's layer property.

    1
    2
    scatterplotElement.config = scatterplotConfig;
    scatterplotElement.layer = featureLayer;

Show selected features from the chart on the map

  1. In the arcgisViewReadyChange event listener, get the layer views from the view.

    1
    const featureLayerViews = view.layerViews;
  2. Add an event listener to the scatterplot element. When the arcgisSelectionComplete event is fired, remove the previous selection and highlight the currently selected features on the map.

    1
    2
    3
    4
    scatterplotElement.addEventListener('arcgisSelectionComplete', (event) => {
        map.highlightSelect?.remove();
        map.highlightSelect = featureLayerViews.items[0].highlight(event.detail.selectionOIDs);
    });

Add functionality to filter by extent

  1. In the arcgisViewReadyChange event listener's callback function, add the arcgisDefaultActionSelect event listener to the actionBarElement.

    1
    2
    3
    actionBarElement.addEventListener('arcgisDefaultActionSelect', (event) => {
        // to be implemented
    });
  2. In the arcgisChartsDefaultActionSelect event listener's callback function, get the actionId and actionActive properties from the event detail.

    1
    const { actionId, actionActive } = event.detail;
  3. Set the view of the scatterplot element to the map view if the Filter By Extent action is toggled on.

    1
    2
    3
    4
    5
    if (actionId === 'filterByExtent') {
      if (mapElement.view !== undefined) {
        scatterplotElement.view = actionActive ? mapElement.view : undefined;
      }
    }

Show selected features from the map on the chart

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

    1
    2
    3
    mapElement.addEventListener('arcgisViewClick', (event) => {
        // to be implemented
    });
  2. In the arcgisViewClick event listener's callback, get the view from the event target.

    1
    const { view } = event.target;
  3. Get the screen points from the event detail.

    1
    2
    let screenPoints = event.detail.screenPoint;
    view.hitTest(screenPoints).then(getFeatures);
  4. Lastly, get the features from the hit test. Within the function, get the selected feature's OID (in this case, the attribute is ObjectId) and assign it to the scatterplot element's selection data.

    1
    2
    3
    4
    5
    6
    7
    function getFeatures(response) {
        const selectedFeatureOID = response.results[0].graphic.attributes['ObjectId'];
    
        scatterplotElement.selectionData = {
            selectionOIDs: [selectedFeatureOID],
        };
    }

Run the application

The app should display the scatterplot on top of the map. When you select some features on the chart, the corresponding features should also be selected on the map. With the Filter By Extent action toggled on, the scatterplot should only display features within the current extent of the map. You should also be able to select features on the map and see the corresponding features selected on the chart.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close