Display and create charts components

Learn how to display a chart from a web map stored in ArcGIS and how to create a new chart using charts model.

In this tutorial, you will:

Load and display a pre-configured chart (scatterplot) using a webmap and feature layer.
Create a new chart (pie chart) using charts model and display it in your app.

Prerequisites

Steps

Create a new pen

Go to CodePen to create a new pen for your application.

Add basic HTML

Define a basic HTML page.

In CodePen > HTML, add HTML to create a basic page.

Use dark colors for code blocksCopy
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Display and create charts with arcgis/charts-components</title>

    <style></style>
  </head>

  <body>

  </body>
</html>

Display a pre-configured chart from a webmap

Add references

In the <head> tag, add references to the JavaScript SDK core library and CSS, calcite components and charts components.

Use dark colors for code blocksCopy
<!-- Load Calcite components from CDN -->
<script type="module" src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script>

<!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
<link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.33/"></script>

<!-- Load Charts components from CDN-->
<script type="module" src="https://js.arcgis.com/4.33/charts-components/"></script>

Add a chart component

In the <body> tag, create a <div> element with a class set to chart-container. Add the <arcgis-chart> component inside the <div> with an id set to scatterplot.
Use dark colors for code blocksCopy
```
1
2
3
<div class="chart-container">
  <arcgis-chart id="scatterplot"></arcgis-chart>
</div>
```

Add styling

In the <style> tag, add CSS to style the chart container and the scatterplot.

Use dark colors for code blocksCopy
.chart-container {
  display: flex;
  height: 80vh;
}

#scatterplot {
  flex: 1;
}

Add script logic for displaying a chart from a webmap

In a new <script> at the bottom of the <body>, use $arcgis.import() to add the WebMap module.
Use WebMap to create a new instance of the webmap with the ID of the webmap item that contains the pre-configured chart. The webmap item ID used here is 96cb2d2825dc459abadcabc941958125.
Find the feature layer with the title "College Scorecard" from the webmap's layers.
Use document.querySelector() to select the <arcgis-chart> component with the id of scatterplot.
Get the first chart's model from the feature layer.

Set the scatterplot's layer property to the feature layer, then set the model property to the scatterplot's model.

Use dark colors for code blocksCopy
<!-- Step 1 -->
<script type="module">
  const WebMap = await $arcgis.import("@arcgis/core/WebMap.js");

  // Step 2
  const webmap = new WebMap({
    portalItem: {
      id: "96cb2d2825dc459abadcabc941958125",
    },
  });
  await webmap.loadAll();

  // Step 3
  const featureLayer = webmap.layers.find(
    (layer) => layer.title === "College Scorecard"
  );

  // Step 4
  const scatterplotElement = document.querySelector("#scatterplot");

  // Step 5
  const scatterplotModel = featureLayer.charts[0];

  // Step 6
  scatterplotElement.layer = featureLayer;
  scatterplotElement.model = scatterplotModel;
</script>

Create a chart with charts model

Add a chart component

Add the <arcgis-chart> component inside the <div class="chart-container"> with an id set to pie-chart.
Use dark colors for code blocksCopy
```
1
2
3
4
<div class="chart-container">
  ...
  <arcgis-chart id="pie-chart"></arcgis-chart>
</div>
```

Add styling

In the <style> tag, add CSS to style the pie chart.
Use dark colors for code blocksCopy
```
1
2
3
4
#pie-chart,
#scatterplot {
  flex: 1;
}
```

Add script logic for creating a chart model

Import createModel from the charts components CDN.
Use document.querySelector() to select the <arcgis-chart> component with the id of pie-chart.
Use createModel() to create a new pie chart model with the feature layer from the webmap. The chart type is set to pieChart.
Modify properties of the pie chart model. Refer to the full list of available methods in the pie chart model reference.

Set the model property to the pieChartModel.

Use dark colors for code blocksCopy
<script type="module">
  // Step 1
  const { createModel } = await $arcgis.import("@arcgis/charts-components/model.js");

  // Step 2
  const pieChartElement = document.querySelector("#pie-chart");

  // Step 3
  const pieChartModel = await createModel({ layer: featureLayer, chartType: "pieChart" });

  // Step 4
  await pieChartModel.setCategory("Type");
  pieChartModel.setDataLabelsVisibility(true);
  pieChartModel.setTitleText("Count by School Type");
  pieChartModel.setLegendTitleText("School Type");
  pieChartModel.setLegendPosition("bottom");

  // Step 5
  pieChartElement.model = pieChartModel;
</script>

Run the app

In CodePen, run your code to display the charts.

You should see a scatterplot showing the relationship between education cost and income earnings with a line displaying the linear trend. It should also display a pie chart showing the count of schools by type.

What's next?

Learn how to use additional API features and ArcGIS services in these tutorials:

Charts components with map components