The ArcGIS Maps SDK for JavaScript's Charts components are a collection of pre-built UI components for creating charts in web applications with minimal code. This package contains the Chart component and the Charts Action Bar component.
<arcgis-chart>
<arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
</arcgis-chart>
<script type="module">
const WebMap = await $arcgis.import("@arcgis/core/WebMap.js");
const webmap = new WebMap({ portalItem: { id: "96cb2d2825dc459abadcabc941958125" }});
await webmap.loadAll();
const featureLayer = webmap.layers.find((layer) => layer.title === "College Scorecard");
const scatterplotModel = featureLayer.charts[0];
const chartElement = document.querySelector("arcgis-chart");
chartElement.layer = featureLayer;
chartElement.model = scatterplotModel;
</script>Get started
You can include this package in your application using either the ArcGIS CDN or by installing from npm.
Visit the full Get Started guide for working with the ArcGIS CDN, npm, CSS, frameworks and more.
CDN
Include all the necessary library scripts and CSS link tags in the order shown below to the <head section of your HTML:
<!-- Load Calcite components and the JavaScript Maps SDK core API-->
<script
type="module"
src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/dark/main.css" />
<script src="https://js.arcgis.com/4.33/"></script>
<!-- Load Charts components -->
<script
type="module"
src="https://js.arcgis.com/4.33/charts-components/"
></script>This only needs to be done once in your application. No specific import is needed to use a component.
npm
Run the following command to install the package:
npm install @arcgis/charts-componentsAfterwards, you'll need to individually import each component you use.
import "@arcgis/charts-components/components/arcgis-chart";
import "@arcgis/charts-components/components/arcgis-charts-action-bar";