Display a chart | ArcGIS Maps SDK for JavaScript

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

By leveraging the layer-item-id and chart-index properties of the <arcgis-chart> component, you can easily render charts without the need for complex coding. We will also demostrate how to modify the chart using the charts model capabilities by adding a guide to highlight a specific value on the y-axis.

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.

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a chart</title>

</head>


<body>

</body>


</html>

Add styling

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

7 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a chart</title>

  <style>
    html,
    body,
    arcgis-chart {
      height: 100%;
      margin: 0;
    }
  </style>
10 collapsed lines

</head>


<body>

</body>


</html>

Add the ArcGIS Maps SDK for JavaScript script tag

In the <head>, add the <script> tag for the JavaScript Maps SDK.

7 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a chart</title>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>
10 collapsed lines

</head>


<body>

</body>


</html>

Add chart component

In the <body>, add the <arcgis-chart> component and specify the layer-item-id and chart-index to render the first chart from the feature layer.

12 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a chart</title>

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

</head>


<body>

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

</body>
3 collapsed lines


</html>

Component reference (chart)

Modify the chart

If additional modifications are needed, you can use the charts model capabilities to customize the chart further.

In this section, we will be adding a guide to highlight a specific value on the y-axis.

In the <body>, add a <script> tag after the <arcgis-chart> component.

26 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a chart</title>

  <style>
    html,
    body,
    arcgis-chart {
      height: 100%;
      margin: 0;
    }
  </style>

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

</head>


<body>

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

  <script type="module">

  </script>
5 collapsed lines

</body>


</html>

Use document.querySelector() to get a reference to the chart component.

28 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a chart</title>

  <style>
    html,
    body,
    arcgis-chart {
      height: 100%;
      margin: 0;
    }
  </style>

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

</head>


<body>

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

  <script type="module">

    const chartElement = document.querySelector("arcgis-chart");

6 collapsed lines
  </script>

</body>


</html>

To modify the chart, first use the loadModel() method to ensure the chart model is loaded from the chart element.

28 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a chart</title>

  <style>
    html,
    body,
    arcgis-chart {
      height: 100%;
      margin: 0;
    }
  </style>

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

</head>


<body>

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

  <script type="module">

    const chartElement = document.querySelector("arcgis-chart");

    await chartElement.loadModel();

6 collapsed lines
  </script>

</body>


</html>

Next, add a guide to the y-axis and customize the guide with charts model methods. We will create a variable guideIndex to store the index of the guide for easy reference. The guide can be added by calling the addYAxisGuide() method, and provide the start value of the guide with setGuideStart(), which in this case is 40,000.

We can also customize the style of the guide line by calling setGuideStyle() and passing in an object with style properties.

Finally, we can set the label text for the guide with setGuideLabelText(), which will display “Median Individual Earnings” next to the guide line.

28 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a chart</title>

  <style>
    html,
    body,
    arcgis-chart {
      height: 100%;
      margin: 0;
    }
  </style>

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

</head>


<body>

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

  <script type="module">

    const chartElement = document.querySelector("arcgis-chart");

    await chartElement.loadModel();

    const guideIndex = 0;
    chartElement.model.addYAxisGuide("Y-axis guide", guideIndex);
    chartElement.model.setGuideStart(40000, guideIndex);
    chartElement.model.setGuideStyle(
      {
        type: "esriSFS",
        color: [100, 100, 100, 100],
      },
      guideIndex,
    );
    chartElement.model.setGuideLabelText("Median Individual Earnings", guideIndex);
7 collapsed lines

  </script>

</body>


</html>

Run the app

In CodePen, you should see a scatterplot showing the relationship between education cost and income earnings with a line displaying the linear trend. With the guide added, you should also see a horizontal line at the 40,000 value on the y-axis labeled “Median Individual Earnings”.

What’s next?

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

Chart and map interactions