Create a pie chart

In this tutorial, you will create a pie chart programmatically using charts model and a feature layer.

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: Create a pie chart with arcgis/charts-components</title>

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

</head>


<body>



</body>


</html>

Add references

In the <head> tag, 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> tag, add the <arcgis-chart> component and specify the layer item ID and chart index.

Expand
Use dark colors for code blocks

<body>

  <arcgis-chart>

  </arcgis-chart>

</body>
Expand
Component reference (chart)

Add charts action bar component

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

Expand
Use dark colors for code blocks

<body>

  <arcgis-chart>

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

  </arcgis-chart>

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

Add logic to create a chart

Within the <body> tag, add a <script> tag with type="module" to write JavaScript code to create a chart with charts model.

Expand
Use dark colors for code blocks
  <script type="module">

  </script>
Expand

Within the <script> tag, use @arcgis.import() to import the createModel function from @arcgis/charts-components and FeatureLayer from @arcgis/core/layers/FeatureLayer.js.

Expand
Use dark colors for code blocks
  <script type="module">

    const { createModel } = await $arcgis.import("@arcgis/charts-components");
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

  </script>
Expand

Load a feature layer from a portalItem that contains data to be visualized in the pie chart.

Expand
Use dark colors for code blocks
  <script type="module">

    const { createModel } = await $arcgis.import("@arcgis/charts-components");
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const featureLayer = new FeatureLayer({
      portalItem: {
        id: "8871626e970a4f3e9d6113ec63a92f2f"
      }
    });

  </script>
Expand

Use document.querySelector() to select the <arcgis-chart> component.

Expand
Use dark colors for code blocks
  <script type="module">

    const { createModel } = await $arcgis.import("@arcgis/charts-components");
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const featureLayer = new FeatureLayer({
      portalItem: {
        id: "8871626e970a4f3e9d6113ec63a92f2f"
      }
    });

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

  </script>
Expand

Use createModel() to create a new pie chart model with the feature layer. The chart type is set to pieChart.

Expand
Use dark colors for code blocks
  <script type="module">

    const { createModel } = await $arcgis.import("@arcgis/charts-components");
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const featureLayer = new FeatureLayer({
      portalItem: {
        id: "8871626e970a4f3e9d6113ec63a92f2f"
      }
    });

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

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

  </script>
Expand

Modify properties of the pie chart model. Refer to the full list of available properties and methods in the pie chart model reference.

Expand
Use dark colors for code blocks
  <script type="module">

    const { createModel } = await $arcgis.import("@arcgis/charts-components");
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const featureLayer = new FeatureLayer({
      portalItem: {
        id: "8871626e970a4f3e9d6113ec63a92f2f"
      }
    });

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

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

    pieChartModel.category = "Type";
    pieChartModel.dataLabelsVisibility = true;
    pieChartModel.labelCharacterLimit = 20;
    pieChartModel.titleText = "Count by School Type";
    pieChartModel.legendTitleText = "School Type";
    pieChartModel.legendPosition = "bottom";

  </script>
Expand

Set the model property to the pieChartModel.

Expand
Use dark colors for code blocks
  <script type="module">

    const { createModel } = await $arcgis.import("@arcgis/charts-components");
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const featureLayer = new FeatureLayer({
      portalItem: {
        id: "8871626e970a4f3e9d6113ec63a92f2f"
      }
    });

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

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

    pieChartModel.category = "Type";
    pieChartModel.dataLabelsVisibility = true;
    pieChartModel.labelCharacterLimit = 20;
    pieChartModel.titleText = "Count by School Type";
    pieChartModel.legendTitleText = "School Type";
    pieChartModel.legendPosition = "bottom";

    pieChartElement.model = pieChartModel;

  </script>
Expand

Run the app

In CodePen, run your code to display the chart.

You should see a pie chart showing the count by different school types, 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: