Line chart | ArcGIS Maps SDK for JavaScript

New York City 311 helicopter noise complaints from Jan 2025 to Jan 2026, binned into 3-day intervals.

What is a line chart?

Line charts are used to display trends over time or continuous data, with values shown through the relative positions of points connected by lines. The x-axis typically represents a continuous variable, while the y-axis represents a numeric scale.

Data configurations

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

With number field

With a number field (integer, double, etc.) on the x-axis, each number appears in the table only once, and the line chart connects the points in the order of the numbers.

Without numeric fields

When no numeric fields are specified, the chart will use the Count aggregation type, which totals the number of records for each unique value in the x-axis field.

The above chart visualizes the count of average SAT scores across the x-axis.

Set the xAxisField property to "SAT_Score_Average", which is an integer 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: Line chart with number 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: "fcf794778a4d486eb0ce863ab71d40db",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const lineChartModel = await createModel({ layer: featureLayer, chartType: "lineChart" });
30

31
      lineChartModel.xAxisField = "SAT_Score_Average";
6 collapsed lines
32

33
      chartElement.model = lineChartModel;
34
      chartElement.actionMode = "none";
35
    </script>
36
  </body>
37
</html>

With numeric fields

If numeric fields are specified and an aggregation type is provided, the chart will apply the aggregation type to the numeric values for each unique value in the x-axis field.

The above chart visualizes the average tuition fee and earnings across the x-axis. It provides insights into how tuition fees and earnings vary with average SAT scores.

Set the xAxisField property to "SAT_Score_Average", which is an integer field.
Set the numericFields property to ["TUITIONFEE", "Earnings"] to specify the numeric fields.
Set the aggregationType property to "avg" to calculate the average tuition fee and earnings for each unique average SAT score.

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: Line 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: "fcf794778a4d486eb0ce863ab71d40db",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const lineChartModel = await createModel({ layer: featureLayer, chartType: "lineChart" });
30

31
      lineChartModel.xAxisField = "SAT_Score_Average";
32
      lineChartModel.numericFields = ["TUITIONFEE", "Earnings"];
33
      lineChartModel.aggregationType = "avg";
6 collapsed lines
34

35
      chartElement.model = lineChartModel;
36
      chartElement.actionMode = "none";
37
    </script>
38
  </body>
39
</html>

With date field

Temporal line charts visualize data over time, allowing trends and patterns to be easily identified.

The above chart visualizes NYC 311 helicopter noise complaints from Jan 2025 to Jan 2026, binned into 3-day intervals.

Set the xAxisField property to "Created_Date" to specify the date field.
Set the binTemporalData property to true to enable temporal binning.
Set the temporalBinningSize property to 3 and the temporalBinningUnit property to "days" to group the date values into 3-day intervals.

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: Line 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: "caea6a7ab4fe44b9b4ec3abb7314c1bb",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const lineChartModel = await createModel({ layer: featureLayer, chartType: "lineChart" });
30

31
      lineChartModel.xAxisField = "Created_Date";
32
      lineChartModel.binTemporalData = true;
33
      lineChartModel.temporalBinningUnit = "days";
34
      lineChartModel.temporalBinningSize = 3;
8 collapsed lines
35

36
      lineChartModel.setAxisTitleText("Created Date", 0);
37
      lineChartModel.titleText = "NYC 311 Helicopter Noise Complaints by 3-Day Period";
38
      chartElement.model = lineChartModel;
39
      chartElement.actionMode = "none";
40
    </script>
41
  </body>
42
</html>

With split by field

A split by line chart displays multiple lines to compare trends across different categories over time.

The above chart visualizes NYC 311 helicopter noise complaints from Jan 2025 to Jan 2026, binned into 3-day intervals and split by the “City” field to compare complaints across different cities.

Set the xAxisField property to "Created_Date" to specify the date field.
Set the binTemporalData property to true to enable temporal binning.
Set the temporalBinningSize property to 3 and the temporalBinningUnit property to "days" to group the date values into 3-day intervals.
Set the splitByField property to "City" to divide each main category into grouped lines 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: Line 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: "caea6a7ab4fe44b9b4ec3abb7314c1bb",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const lineChartModel = await createModel({ layer: featureLayer, chartType: "lineChart" });
30

31
      lineChartModel.xAxisField = "Created_Date";
32
      lineChartModel.binTemporalData = true;
33
      lineChartModel.temporalBinningUnit = "days";
34
      lineChartModel.temporalBinningSize = 3;
35
      lineChartModel.splitByField = "City";
9 collapsed lines
36

37
      lineChartModel.legendTitleText = "City";
38
      lineChartModel.setAxisTitleText("Created Date", 0);
39
      lineChartModel.titleText = "NYC 311 Helicopter Noise Complaints by 3-Day Period by City";
40
      chartElement.model = lineChartModel;
41
      chartElement.actionMode = "none";
42
    </script>
43
  </body>
44
</html>

Chart typesHeat chart Chart typesPie chart