Bar chart | ArcGIS Maps SDK for JavaScript

Bar charts are used to summarize and compare categorical data, with values shown through the relative lengths of bars. The x-axis displays discrete categories (each mapped to one or more bars), while the y-axis represents a numeric scale that determines the height of each bar.

To render a basic bar chart, you will need to provide a category field by using the xAxisField property. Variations of the bar chart can be created, such as:

With category field:
- Set the category field via the xAxisField property, this renders one bar per unique category value.
  - When the category is a date field, the x-axis is time-based; configure temporal binning as needed via the temporalBinningSize and temporalBinningUnit properties to group data into appropriate time intervals (e.g., days, months, years).
With numeric fields:
- When only numeric fields are specified via the numericFields property, each field becomes a category and the bar height reflects its value.
- With a category field specified via the xAxisField property and a single numeric field specified via the numericFields property, the chart renders one bar per category showing that numeric value.
- With a category field specified via the xAxisField property and multiple numeric fields specified via the numericFields property, the chart renders grouped bars per category (one bar per numeric field).
With split-by field:
- Set the splitByField property to divide each main category into grouped bars for subcategory comparison.
Stacked bar chart:
- Set the stackedType property to stack multiple numeric fields within each category.

In this tutorial, you will create and customize a bar chart using bar chart model and render it with the <arcgis-chart> component.

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: Bar chart
  </title>

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

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

9 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: Bar 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>
5 collapsed lines

</head>


</html>

Add chart component

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

23 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: Bar 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></arcgis-chart>

</body>
3 collapsed lines


</html>

Component reference (chart)

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.

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: Bar 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></arcgis-chart>

  <script type="module">

  </script>
5 collapsed lines

</body>


</html>

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

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: Bar 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></arcgis-chart>

  <script type="module">

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

  </script>
5 collapsed lines

</body>


</html>

Load a feature layer from a portalItem that contains NYC short-term rental data that will be visualized in the bar chart.

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: Bar 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></arcgis-chart>

  <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: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
      },
    });

  </script>
5 collapsed lines

</body>


</html>

Use document.querySelector() to select the <arcgis-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: Bar 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></arcgis-chart>

  <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: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
      },
    });

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

  </script>
5 collapsed lines

</body>


</html>

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

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: Bar 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></arcgis-chart>

  <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: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
      },
    });

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

    const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });

  </script>
5 collapsed lines

</body>


</html>

Customize the bar chart

In this section, we’ll explore how to use various properties and methods from the bar chart model together with the <arcgis-chart> component to render the bar chart.

Specifically, we will be creating a bar chart with 100% stacked bars to show the NYC short-term rental distribution across different neighbourhood groups.

First, set the xAxisField property to the field name neighbourhood_group.

43 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: Bar 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></arcgis-chart>

  <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: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
      },
    });

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

    const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });

    barChartModel.xAxisField = "neighbourhood_group";

8 collapsed lines
    chartElement.model = barChartModel;

  </script>

</body>


</html>

Next, set the splitByField property to the field name room_type to create grouped bars for each neighbourhood group based on room types.

43 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: Bar 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></arcgis-chart>

  <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: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
      },
    });

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

    const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });

    barChartModel.xAxisField = "neighbourhood_group";

    barChartModel.splitByField = "room_type";

8 collapsed lines
    chartElement.model = barChartModel;

  </script>

</body>


</html>

By setting the stackedType property to stacked100, you can create a 100% stacked bar chart where each bar represents the total percentage distribution of room types within each neighbourhood group.

43 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: Bar 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></arcgis-chart>

  <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: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
      },
    });

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

    const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });

    barChartModel.xAxisField = "neighbourhood_group";

    barChartModel.splitByField = "room_type";

    barChartModel.stackedType = "stacked100";

8 collapsed lines
    chartElement.model = barChartModel;

  </script>

</body>


</html>

Set each one of the series colors by configuring the setSeriesColor property with an array of color strings.

43 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: Bar 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></arcgis-chart>

  <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: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
      },
    });

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

    const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });

    barChartModel.xAxisField = "neighbourhood_group";

    barChartModel.splitByField = "room_type";

    barChartModel.stackedType = "stacked100";

    barChartModel.setSeriesColor([235, 140, 52, 255], 0);
    barChartModel.setSeriesColor([118, 183, 178, 255], 1);
    barChartModel.setSeriesColor([208, 208, 208, 255], 2);

8 collapsed lines
    chartElement.model = barChartModel;

  </script>

</body>


</html>

Customize other properties such as rotatedState, dataLabelsVisibility, setAxisTitleText, legendTitleText and titleText to enhance the appearance of the bar chart.

43 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: Bar 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></arcgis-chart>

  <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: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
      },
    });

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

    const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });

    barChartModel.xAxisField = "neighbourhood_group";

    barChartModel.splitByField = "room_type";

    barChartModel.stackedType = "stacked100";

    barChartModel.setSeriesColor([235, 140, 52, 255], 0);
    barChartModel.setSeriesColor([118, 183, 178, 255], 1);
    barChartModel.setSeriesColor([208, 208, 208, 255], 2);

    barChartModel.rotatedState = true;
    barChartModel.dataLabelsVisibility = true;
    barChartModel.setAxisTitleText("Neighbourhood Group", 0);
    barChartModel.legendTitleText = "Room type";
    barChartModel.titleText = "NYC Short-Term Rental Room Types by Neighbourhood Group";
9 collapsed lines

    chartElement.model = barChartModel;

  </script>

</body>


</html>

Set the model property of the chartElement to the barChartModel to apply the configurations and render the chart.

59 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: Bar 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></arcgis-chart>

  <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: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
      },
    });

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

    const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });

    barChartModel.xAxisField = "neighbourhood_group";

    barChartModel.splitByField = "room_type";

    barChartModel.stackedType = "stacked100";

    barChartModel.setSeriesColor([235, 140, 52, 255], 0);
    barChartModel.setSeriesColor([118, 183, 178, 255], 1);
    barChartModel.setSeriesColor([208, 208, 208, 255], 2);

    barChartModel.rotatedState = true;
    barChartModel.dataLabelsVisibility = true;
    barChartModel.setAxisTitleText("Neighbourhood Group", 0);
    barChartModel.legendTitleText = "Room type";
    barChartModel.titleText = "NYC Short-Term Rental Room Types by Neighbourhood Group";

    chartElement.model = barChartModel;
7 collapsed lines

  </script>

</body>


</html>

Run the app

In CodePen, you should see a 100% stacked bar chart showing the NYC short-term rental distribution across different neighbourhood groups, with each bar representing the total percentage distribution of room types within each neighbourhood group.

What’s next?

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