This sample demonstrates coordinated feature selection across a Chart component, Map component, and Selection List component. Clicking on the chart or a feature in the map performs a shared selection and displays the corresponding features in the Selection List.
Add a Map component to display the web map that contains the CollegeScorecard layer and its chart configuration.
<arcgis-map item-id="f2481ef191924872be8897179f73d55c" id="my-map" popup-disabled> <arcgis-zoom slot="top-left"></arcgis-zoom>
<arcgis-selection-list id="selection-list" slot="top-right"></arcgis-selection-list>
<arcgis-chart sync-view-selection slot="bottom-left"> <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar> </arcgis-chart>
</arcgis-map>Add the Selection List to the map’s top-right slot. The component displays features in a list from the view’s selectionManager.
<arcgis-selection-list id="selection-list" slot="top-right"></arcgis-selection-list>Add the Chart component to the map’s bottom-left slot. The sync-view-selection attribute synchronizes chart selections with the view’s selection manager. The Charts Action Bar provides the available chart interactions.
<arcgis-chart sync-view-selection slot="bottom-left"> <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar> </arcgis-chart>After the view and layer are ready, associate the layer and view with the Chart component. Hide the Filter by selection action since filtering by the current selection disables further chart selection.
chartElement.layer = layer;
// Set the chart element's view property to the view, and enable syncing of selections between the chart and layer view chartElement.view = view;
// Hide the filter by selection action actionBar.hiddenActions = [...actionBar.hiddenActions, "filterBySelection"];Listen for the Map component’s arcgisViewClick event and perform a hit test. Replace the layer’s current selection with the object IDs returned by the hit test. The Chart and Selection List then update from the shared selection manager.
viewElement.addEventListener("arcgisViewClick", async (event) => { const { results } = await viewElement.hitTest(event.detail, { include: [layer] }); if (results?.length > 0) { const objectIds = results.map((r) => r.graphic.getObjectId()); view.selectionManager.replace(layer, objectIds); } });