Bar chart | ArcGIS Maps SDK for JavaScript

New York City short-term rental distribution count across different neighbourhood groups.

What is a bar chart?

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.

Data configurations

This section demonstrates how different data configurations can be used to create various types of bar charts, including category field, numeric fields, split by field, and date field configurations.

With category field

Bar chart with a category field renders one bar per unique category value.

The above chart visualizes the distribution of short-term rentals in NYC by neighborhood group, with each bar representing a neighborhood group category. The height of each bar reflects the count of rentals in that neighborhood group.

Set the xAxisField property to "neighbourhood_group" to specify the category field.

Charts component


30 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Esri Developer Guide: Bar chart with category field</title>
6
    <style>
7
      html,
8
      body,
9
      arcgis-chart {
10
        height: 100%;
11
        margin: 0;
12
      }
13
    </style>
14
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
15
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
16
  </head>
17

18
  <body>
19
    <arcgis-chart></arcgis-chart>
20
    <script type="module">
21
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
22
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
23
      const featureLayer = new FeatureLayer({
24
        portalItem: {
25
          id: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });
30

31
      barChartModel.xAxisField = "neighbourhood_group";
8 collapsed lines
32

33
      barChartModel.setAxisTitleText("Neighbourhood Group", 0);
34
      barChartModel.titleText = "NYC Short-Term Rental by Neighbourhood Group";
35
      chartElement.model = barChartModel;
36
      chartElement.actionMode = "none";
37
    </script>
38
  </body>
39
</html>

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 one category field specified via the xAxisField property and one numeric field specified via the numericFields property, the chart renders one bar per category showing that numeric value.
With one 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).

The above chart visualizes the average price of short-term rentals in NYC by neighborhood group.

Set the xAxisField property to "neighbourhood_group".
Set the numericFields property to "price" to specify the numeric field.
Set the aggregationType property to "avg" to calculate the average price per neighborhood group.

Charts component


30 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Esri Developer Guide: Bar chart with numeric fields</title>
6
    <style>
7
      html,
8
      body,
9
      arcgis-chart {
10
        height: 100%;
11
        margin: 0;
12
      }
13
    </style>
14
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
15
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
16
  </head>
17

18
  <body>
19
    <arcgis-chart></arcgis-chart>
20
    <script type="module">
21
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
22
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
23
      const featureLayer = new FeatureLayer({
24
        portalItem: {
25
          id: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });
30

31
      barChartModel.xAxisField = "neighbourhood_group";
32
      barChartModel.numericFields = "price";
33
      barChartModel.aggregationType = "avg";
9 collapsed lines
34

35
      barChartModel.setAxisTitleText("Neighbourhood Group", 0);
36
      barChartModel.titleText = "NYC Short-Term Rental Average Price by Neighbourhood Group";
37
      barChartModel.dataLabelsVisibility = true;
38
      chartElement.model = barChartModel;
39
      chartElement.actionMode = "none";
40
    </script>
41
  </body>
42
</html>

With split by field

A split by bar chart displays multiple related data series side by side within each category.

The above chart visualizes the distribution of short-term rentals in NYC by neighborhood group, with each bar representing a neighborhood group category. The bars are split by room type, showing the count of each room type within each neighborhood group.

Set the xAxisField property to "neighbourhood_group".
Set the splitByField property to "room_type" to divide each main category into grouped bars for subcategory comparison.

Charts component


30 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Esri Developer Guide: Bar chart with split by field</title>
6
    <style>
7
      html,
8
      body,
9
      arcgis-chart {
10
        height: 100%;
11
        margin: 0;
12
      }
13
    </style>
14
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
15
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
16
  </head>
17

18
  <body>
19
    <arcgis-chart></arcgis-chart>
20
    <script type="module">
21
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
22
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
23
      const featureLayer = new FeatureLayer({
24
        portalItem: {
25
          id: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });
30

31
      barChartModel.xAxisField = "neighbourhood_group";
32
      barChartModel.splitByField = "room_type";
10 collapsed lines
33

34
      barChartModel.setAxisTitleText("Neighbourhood Group", 0);
35
      barChartModel.titleText = "NYC Short-Term Rental Room Types by Neighbourhood Group";
36
      barChartModel.legendTitleText = "Room type";
37
      barChartModel.dataLabelsVisibility = true;
38
      chartElement.model = barChartModel;
39
      chartElement.actionMode = "none";
40
    </script>
41
  </body>
42
</html>

With date field

A temporal bar chart visualizes data over time, allowing trends and patterns to be easily identified.

The above chart visualizes NYC short-term rental reviews, binned into 6-month intervals.

Set the xAxisField property to "last_review", which is a date field.
Set the binTemporalData property to true to enable temporal binning, which groups date values into time intervals for better visualization.
Set the temporalBinningSize property and the temporalBinningUnit property to group the date values.

Charts component


30 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Esri Developer Guide: Bar chart with date field</title>
6
    <style>
7
      html,
8
      body,
9
      arcgis-chart {
10
        height: 100%;
11
        margin: 0;
12
      }
13
    </style>
14
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
15
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
16
  </head>
17

18
  <body>
19
    <arcgis-chart></arcgis-chart>
20
    <script type="module">
21
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
22
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
23
      const featureLayer = new FeatureLayer({
24
        portalItem: {
25
          id: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });
30

31
      barChartModel.xAxisField = "last_review";
32
      barChartModel.binTemporalData = true;
33
      barChartModel.temporalBinningUnit = "months";
34
      barChartModel.temporalBinningSize = 6;
8 collapsed lines
35

36
      barChartModel.setAxisTitleText("Review Period", 0);
37
      barChartModel.titleText = "NYC Short-Term Rental Reviews by 6-Month Period";
38
      chartElement.model = barChartModel;
39
      chartElement.actionMode = "none";
40
    </script>
41
  </body>
42
</html>

Customization options

Stacked bar chart

A stacked bar chart need to have multiple numeric fields or use a split by field to create the stacks. It can be helpful to visualize the contribution of each data series to the total within each category.

The above chart shows the distribution of short-term rentals in NYC by neighborhood group, each bar represents a stacked percentage distribution of room types within each neighborhood group.

With a multiple numeric fields or split by field bar chart configured, set the stackedType property to "stacked100" to display the bars that sums up to 100%.

Charts component


32 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Esri Developer Guide: Bar chart with split by field</title>
6
    <style>
7
      html,
8
      body,
9
      arcgis-chart {
10
        height: 100%;
11
        margin: 0;
12
      }
13
    </style>
14
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
15
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
16
  </head>
17

18
  <body>
19
    <arcgis-chart></arcgis-chart>
20
    <script type="module">
21
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
22
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
23
      const featureLayer = new FeatureLayer({
24
        portalItem: {
25
          id: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });
30
      barChartModel.xAxisField = "neighbourhood_group";
31
      barChartModel.splitByField = "room_type";
32

33
      barChartModel.stackedType = "stacked100";
10 collapsed lines
34

35
      barChartModel.dataLabelsVisibility = true;
36
      barChartModel.setAxisTitleText("Neighbourhood Group", 0);
37
      barChartModel.legendTitleText = "Room type";
38
      barChartModel.titleText = "NYC Short-Term Rental Room Types by Neighbourhood Group (Stacked)";
39
      chartElement.model = barChartModel;
40
      chartElement.actionMode = "none";
41
    </script>
42
  </body>
43
</html>

ChartsIntroduction Chart typesBox plot