Radar chart | ArcGIS Maps SDK for JavaScript

Sandbox

Download

The historical monthly hurricane count by subbasin within the United States.

What is a radar chart?

Radar charts plot a single continuous field around the circumference in ascending order, connecting values the same way a line chart connects points along its x-axis, just wrapped into a circle — useful for cyclical or sequential data like year-over-year trends.

Data configurations

This section covers a few data configuration examples for radar charts, each configured using the radar chart model. See the radar chart model reference for the full list of available properties and methods.

With circular axis field

Radar charts with a number field (integer, double, etc.) on the circular axis plots points in ascending numeric order around the axis.

Sandbox

Download

This chart visualizes the historical hurricane counts by year.

Set the circularAxisField property to "year" to specify the numeric field.

With circular axis field


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>Radar Chart</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.2/"></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: "0cc8050831a145289408f6dac8d4ad7b",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const radarChartModel = await createModel({ layer: featureLayer, chartType: "radarChart" });
30

31
      radarChartModel.circularAxisField = "year";
10 collapsed lines
32

33
      radarChartModel.titleText = "Historical Hurricane Count by Year";
34
      radarChartModel.setAxisTitleText("Hurricane Count", 0);
35
      radarChartModel.setAxisTitleText("Year", 1);
36

37
      chartElement.model = radarChartModel;
38
      chartElement.actionMode = "none";
39
    </script>
40
  </body>
41
</html>

With split by field

Radar charts with a split by field displays multiple lines to compare trends across different categories.

Sandbox

Download

This chart visualizes the hurricane counts across subbasins over different months.

Set the circularAxisField property to "month" to specify the numeric field.
Set the splitByField property to "SUBBASIN" to group the data by subbasin.
Set the setAreaVisible method to control the area visibility for each series. This can be useful if you want to emphasize overall magnitude/coverage rather than precise per axis values.

With split by field


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>Radar Chart</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.2/"></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: "0cc8050831a145289408f6dac8d4ad7b",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const radarChartModel = await createModel({ layer: featureLayer, chartType: "radarChart" });
30

31
      radarChartModel.circularAxisField = "month";
32
      radarChartModel.splitByField = "SUBBASIN";
33
      // Set the area visibility for each series in the radar chart
34
      radarChartModel.setAreaVisible(true, 0);
35
      radarChartModel.setAreaVisible(true, 1);
36
      radarChartModel.setAreaVisible(true, 2);
37
      radarChartModel.setAreaVisible(true, 3);
38
      radarChartModel.setAreaVisible(true, 4);
39
      radarChartModel.setAreaVisible(true, 5);
40
      radarChartModel.setAreaVisible(true, 6);
41
      radarChartModel.setAreaVisible(true, 7);
42
      radarChartModel.setAreaVisible(true, 8);
11 collapsed lines
43

44
      radarChartModel.titleText = "Historical Monthly Hurricane Count by Subbasin";
45
      radarChartModel.setAxisTitleText("Hurricane Count", 0);
46
      radarChartModel.setAxisTitleText("Month", 1);
47
      radarChartModel.legendTitleText = "Subbasin";
48

49
      chartElement.model = radarChartModel;
50
      chartElement.actionMode = "none";
51
    </script>
52
  </body>
53
</html>

Chart typesPie chart Chart typesScatterplot