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-chart component.
  • Add an arcgis-charts-action-bar component to the chart that will allow more interaction features with the chart.
  • Explore interactive functionalities, such as filtering by extent of the map 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 as dependencies.

    Use dark colors for code blocksCopy
    1
    2
    
             npm install @arcgis/charts-components @arcgis/map-components
  2. Start the Vite development server.

    Use dark colors for code blocksCopy
    1
    2
    
             npm run dev
  3. 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.

  4. Import the arcgis-map components from the @arcgis/map-components package in main.js.

    Use dark colors for code blocksCopy
    1
    import "@arcgis/map-components/components/arcgis-map";
  5. Import functions to define the custom HTML elements from the Charts 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.

    Use dark colors for code blocksCopy
    1
    2
    import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
    import { defineCustomElements as defineChartsElements } from "@arcgis/charts-components/dist/loader";
  6. Define the custom elements on the window using the Calcite Components distribution build.

    Use dark colors for code blocksCopy
    1
    defineCalciteElements();
  7. Next, define and load all of the custom charts elements.

    Use dark colors for code blocksCopy
    1
    defineChartsElements(window, { resourcesUrl: "https://js.arcgis.com/charts-components/4.32/assets" });

Add styles

  1. In style.css, import the @arcgis/core light theme CSS stylesheet.

    Use dark colors for code blocksCopy
    1
    @import "https://js.arcgis.com/4.32/@arcgis/core/assets/esri/themes/light/main.css";
  2. Add CSS styles to make the html, body and arcgis-map elements the full width and height of their parent containers.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    html,
    body {
        margin: 0;
    }
    
    arcgis-map {
        display: block;
        height: 100vh;
    }
  3. Add CSS styles to the arcgis-chart element to position the chart directly on top of the map component.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    arcgis-chart {
        position: absolute;
        bottom: 20px;
        left: 20px;
        height: 50%;
        width: 60%;
    }
  4. Import the CSS file in main.js.

    Use dark colors for code blocksCopy
    1
    import "./style.css";

Add components

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

    Use dark colors for code blocksCopy
    1
    <arcgis-map item-id="f2481ef191924872be8897179f73d55c"></arcgis-map>
  2. Add the arcgis-chart component under the map component.

    Use dark colors for code blocksCopy
    1
    <arcgis-chart></arcgis-chart>
  3. Add the arcgis-charts-action-bar component to be slotted inside the arcgis-chart component.

    Use dark colors for code blocksCopy
    1
    2
    3
    <arcgis-chart>
        <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
    </arcgis-chart>

Create a reference to components

  1. In main.js, use document.querySelector() to get references for the arcgis-map, arcgis-chart and arcgis-charts-action-bar components.
    Use dark colors for code blocksCopy
    1
    2
    3
    const mapElement = document.querySelector("arcgis-map");
    const chartElement = document.querySelector("arcgis-chart");
    const actionBarElement = document.querySelector("arcgis-charts-action-bar");

Load the bar chart

  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.

    Use dark colors for code blocksCopy
    1
    2
    3
    mapElement.addEventListener("arcgisViewReadyChange", async (event) => {
      // to be implemented
    });
  2. Inside the event listener, get the map and view from the event target.

    Use dark colors for code blocksCopy
    1
    const { map, view } = event.target;
  3. Use find to get the CollegeScorecard layer from the map, and use load() to ensure the layer loads.

    Use dark colors for code blocksCopy
    1
    2
    const featureLayer = map.layers.find((layer) => layer.title === "CollegeScorecard");
    await featureLayer.load();
  4. Get the first chart configuration from the feature layer

    Use dark colors for code blocksCopy
    1
    const chartConfig = featureLayer.charts[0];
  5. Set chart element's layer property to the feature layer first, then assign the chart configuration to the chart element's model property. Setting model last will ensure the chart renders correctly.

    Use dark colors for code blocksCopy
    1
    2
    chartElement.layer = featureLayer;
    chartElement.model = chartConfig;

Synchronize chart selection with map highlights

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

    Use dark colors for code blocksCopy
    1
    const featureLayerViews = view.layerViews;
  2. Add an event listener to the chart element. When the arcgisSelectionComplete event is fired, remove the previous selection and highlight the currently selected features on the map.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    chartElement.addEventListener("arcgisSelectionComplete", (event) => {
        map.highlightSelect?.remove();
        map.highlightSelect = featureLayerViews.items[0].highlight(event.detail.selectionData.selectionOIDs);
    });

Filter chart data by map extent

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

    Use dark colors for code blocksCopy
    1
    chartElement.view = view;
  2. Add the arcgisDefaultActionSelect event listener to the actionBarElement.

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

    Use dark colors for code blocksCopy
    1
    const { actionId, actionActive } = event.detail;
  4. Set the view of the chart element to the map view if the Filter By Extent action is toggled on.

    Use dark colors for code blocksCopy
    1
    2
    3
    if (actionId === "filterByExtent") {
      chartElement.filterByExtent = actionActive;
    }

Highlight chart data based on map selections

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

    Use dark colors for code blocksCopy
    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.

    Use dark colors for code blocksCopy
    1
    const { view } = event.target;
  3. Get the screen points from the event's detail property.

    Use dark colors for code blocksCopy
    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 chart element's selection data.

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    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 the map. When you select features on the chart, the corresponding features will be highlighted on the map. With the Filter By Extent action 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.

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