Combo bar line chart | ArcGIS Maps SDK for JavaScript

Average of hail size and average property damage estimates over months, with two y-axes measuring different types of values (inches vs dollars).

What is a combo bar line chart?

Combo bar line charts provide the visualization of bar and line series in a single chart, allowing you to use the appropriate series type for the data, while also being able to compare and analyze the relationship between the two series. The chart can either have one x-axis and one or two y-axes. The x-axis represents discrete categories or continuous values depending on the field type. The y-axis or y-axes represent the associated numeric value that corresponds to each category or continuous interval on the x-axis.

Data configurations

This section demonstrates how different data configurations can be used to create various types of combo bar line charts.

With one y-axis

When the series are all measuring the same type of value, or are at least in a similar range, you can use a single y-axis to visualize the data.

When an x-axis field is specified, the chart will use the unique values provided as the x-axis categories.

The above chart visualizes property damange and agricultural loss estimates over months, with the property damange estimates rendered as bars and the agricultural loss estimates rendered as a line.

Set the xAxisField property to "mo" to use the unique values in the months field as the x-axis categories.
Set the numericFields property to ["loss", "closs"] to specify the fields that will be visualized.
Next use the setSeriesType method to set the series type for each field. In this case, we will set the "loss" field (property damage) to be rendered as bars and the "closs" field (agricultural loss) to be rendered as a line.

Charts component


33 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: Combo Bar Line 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.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: "5972242f44714758b97c415a62a49ad5",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const comboBarLineChartModel = await createModel({
30
        layer: featureLayer,
31
        chartType: "comboBarLineChart",
32
      });
33

34
      comboBarLineChartModel.xAxisField = "mo";
35
      comboBarLineChartModel.numericFields = ["loss", "closs"];
36
      // Set series type for each numeric fieid
37
      comboBarLineChartModel.setSeriesType(0, "barSeries");
38
      comboBarLineChartModel.setSeriesType(1, "lineSeries");
13 collapsed lines
39

40
      comboBarLineChartModel.setSeriesColor([78, 121, 167, 100], 0);
41
      comboBarLineChartModel.setSeriesColor([242, 142, 44, 100], 1);
42
      comboBarLineChartModel.setSeriesLineWidth(5, 1);
43
      comboBarLineChartModel.setAxisTitleText("Months", 0);
44
      comboBarLineChartModel.setAxisTitleText("Dollar Value", 1);
45
      comboBarLineChartModel.titleText = "Average Property Damage Estimates and Crop Loss Over Months";
46
      comboBarLineChartModel.legendPosition = "top";
47
      chartElement.model = comboBarLineChartModel;
48
      chartElement.actionMode = "none";
49
    </script>
50
  </body>
51
</html>

With two y-axes

When the two series are measuring different types of values, or are in very different ranges, you can use two y-axes to visualize the data. The primary y-axis will be used for the first series, and the secondary y-axis will be used for the second series.

The above chart visualizes average hail size and average property damage estimates over months, with the average hail size rendered as a line and the average property damage estimates rendered as bars. Each series is using a different y-axis since they are measuring different types of values (inches vs dollars) and are in very different ranges.

With the similar data configuration steps as the previous example, set the x-axis field and numeric fields, and define the series type for each field.
Then use the setAssignToSecondValueAxis method to assign the second series to the secondary y-axis.

Charts component


40 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: Combo Dual Axes</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: "5972242f44714758b97c415a62a49ad5",
26
        },
27
      });
28
      const chartElement = document.querySelector("arcgis-chart");
29
      const comboBarLineChartModel = await createModel({
30
        layer: featureLayer,
31
        chartType: "comboBarLineChart",
32
      });
33

34
      comboBarLineChartModel.xAxisField = "mo";
35
      comboBarLineChartModel.numericFields = ["mag", "loss"];
36
      comboBarLineChartModel.aggregationType = "avg";
37

38
      comboBarLineChartModel.setSeriesType(0, "lineSeries");
39
      comboBarLineChartModel.setSeriesType(1, "barSeries");
40

41
      comboBarLineChartModel.setAssignToSecondValueAxis(true, 1);
14 collapsed lines
42

43
      comboBarLineChartModel.setSeriesColor([78, 121, 167, 100], 0);
44
      comboBarLineChartModel.setSeriesColor([242, 142, 44, 100], 1);
45
      comboBarLineChartModel.setSeriesLineWidth(8, 1);
46
      comboBarLineChartModel.setAxisTitleText("Months", 0);
47
      comboBarLineChartModel.setAxisTitleText("Inches", 1);
48
      comboBarLineChartModel.setAxisTitleText("Dollar Value", 2);
49
      comboBarLineChartModel.titleText = "Average Hail Size and Average Property Damage Estimates Over Months";
50
      comboBarLineChartModel.legendPosition = "top";
51
      chartElement.model = comboBarLineChartModel;
52
      chartElement.actionMode = "none";
53
    </script>
54
  </body>
55
</html>

Chart typesBox plot Chart typesGauge