Display a chart

In this tutorial, you will load and display an existing chart from a feature layer item stored in ArcGIS Online.

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 blocks

<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 a chart using arcgis/charts-components</title>

</head>

<body>

</body>

</html>

Add styling

In the <head> tag, add CSS to style the page and ensure the chart displays correctly.

Expand
Use dark colors for code blocks
  <style>
    html,
    body,
    arcgis-chart {
      height: 100%;
      margin: 0;
    }
  </style>
Expand

Add references

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

Expand
Use dark colors for code blocks
  <style>
    html,
    body,
    arcgis-chart {
      height: 100%;
      margin: 0;
    }
  </style>

  <!-- Load Calcite components from CDN -->
  <script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>

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

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

Add chart component

In the <body>, add the <arcgis-chart> component and specify the layer item ID and chart index.

Expand
Use dark colors for code blocks

<body>

  <arcgis-chart layer-item-id="8871626e970a4f3e9d6113ec63a92f2f" chart-index="0">

  </arcgis-chart>

</body>
Expand
Component reference (chart)

Add charts action bar component

The <arcgis-charts-action-bar> component provides built-in capabilities for interacting with the chart, such as rotating the chart, toggling the legend, filtering data and exporting the chart as an image.

Inside the <arcgis-chart> component, add the <arcgis-charts-action-bar> component and specify its slot as action-bar.

Expand
Use dark colors for code blocks

<body>

  <arcgis-chart layer-item-id="8871626e970a4f3e9d6113ec63a92f2f" chart-index="0">

    <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>

  </arcgis-chart>

</body>
Expand
Component reference (charts action bar)

Run the app

In CodePen, run your code to display the chart.

You should see a scatterplot showing the relationship between education cost and income earnings with a line displaying the linear trend, along with an action bar to interact with the chart.

What's next?

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