Display and create charts components

Learn how to display and create charts using charts components and 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.

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 charts components & charts model</title>

  <style>
  </style>
</head>

<body>
</body>

</html>

Display a chart with charts components

Add references

In the <head> tag, add references to the ArcGIS core library and CSS, and @arcgis/charts-components packages.

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

<!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
<script src="https://js.arcgis.com/4.32"></script>

<!-- Load Charts components from CDN-->
<script type="module" src="https://js.arcgis.com/charts-components/4.32/arcgis-charts-components.esm.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/charts-components/4.32/arcgis-charts-components.css" />

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

Add a <script type="module"> section in the <body>.
Define a function named loadFeatureLayer() for loading a feature layer from a webmap by passing in the webmapId and layerTitle.
Load the feature layer item by calling the asynchronous function loadFeatureLayer(webmapId, layerTitle).
Use document.querySelector() to refer the arcgis-chart component with the id of scatterplot.
Get the first chart's configuration from the feature layer.
Set the scatterplot's layer property to the feature layer, then set the model property to the scatterplot's configuration.

Use dark colors for code blocksCopy
<!-- Step 1 -->
<script type="module">
  // Step 2
  async function loadFeatureLayer(webmapId, layerTitle) {
    const WebMap = await $arcgis.import("esri/WebMap");
    const webmap = new WebMap({
        portalItem: {
            id: webmapId
        }
    });
    await webmap.loadAll();
    const featureLayer = webmap.layers.find((layer) => layer.title === layerTitle);

    return featureLayer;
  }

  // Step 3
  const featureLayer = await loadFeatureLayer("96cb2d2825dc459abadcabc941958125", "College Scorecard");

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

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

  // Step 6
  scatterplotElement.layer = featureLayer;
  scatterplotElement.model = scatterplotConfig;
</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
<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
#pie-chart,
#scatterplot {
    flex: 1;
}

Add script logic for creating a chart

Import PieChartModel from the charts model CDN.
Use document.querySelector() to refer the arcgis-chart component with the id of pie-chart.
Create a new instance of pie chart model.
Pass the feature layer to the pie chart model with setup().
Modify properties of the pie chart model. Refer to the full list of available methods in the charts model references.
Get the chart's configuration from the pie chart model with getConfig().
Set the pie chart's layer property to the feature layer, then set the model property to the pie chart's configuration.

Use dark colors for code blocksCopy
<script type="module">
  // Step 1
  import { PieChartModel } from "https://js.arcgis.com/charts-model/4.32/index.js";

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

  // Step 3
  const pieChartModel = new PieChartModel();

  // Step 4
  await pieChartModel.setup({ layer: featureLayer });

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

  // Step 6
  const pieChartConfig = pieChartModel.getConfig();

  // Step 7
  pieChartElement.layer = featureLayer;
  pieChartElement.model = pieChartConfig;
</script>

Run the app

In CodePen, run your code to display the charts.

The app should display 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?

Go to the references for more detailed information about components.