Styling and theming | ArcGIS Maps SDK for JavaScript

Styling and theming are an important part of a chart’s identity. They help convey meaning, create visual interest, and keep chart experiences consistent.

When it comes to styling charts, there are couple of approaches to consider:

App-wide consistency: Use CSS variables to theme charts with Calcite components and Map components.
Element-specific: Use charts model properties and methods when chart elements need targeted styling.

Theming with CSS variables

Charts components share the same CSS variables as Calcite components and Map components. This makes it easy to apply a consistent visual language across your application.

In charts, elements that can be customized with CSS variables include:

Background color: --calcite-color-foreground-1
Text elements: --calcite-color-text-1
Axes lines: --calcite-color-border-1
Grid lines: --calcite-color-text-3
Loading indicators: --calcite-color-brand-hover

This chart shows how to use CSS variables to apply a custom chart theme by overriding CSS variables in the HTML document’s <style> block.

Charts component - Theming with CSS variables


13 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

14
      :root {
15
        --calcite-color-foreground-1: #2d2670;
16
        --calcite-color-text-1: #ffffff;
17
        --calcite-color-border-1: #ffffff;
18
        --calcite-color-text-3: #4c4c4c;
19
        --calcite-color-brand-hover: #ffffff;
20
      }
29 collapsed lines
21

22
    </style>
23
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
24
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
25
  </head>
26

27
  <body>
28
    <arcgis-chart></arcgis-chart>
29
    <script type="module">
30
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
31
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
32
      const featureLayer = new FeatureLayer({
33
        portalItem: {
34
          id: "a8fbe2753beb4cd4aeef4d47e5e32a7c",
35
        },
36
      });
37
      const chartElement = document.querySelector("arcgis-chart");
38
      const barChartModel = await createModel({ layer: featureLayer, chartType: "barChart" });
39
      barChartModel.xAxisField = "neighbourhood_group";
40
      barChartModel.splitByField = "room_type";
41
      barChartModel.setAxisTitleText("Neighbourhood Group", 0);
42
      barChartModel.titleText = "NYC Short-Term Rental Room Types by Neighbourhood Group";
43
      barChartModel.legendTitleText = "Room type";
44
      barChartModel.dataLabelsVisibility = true;
45
      chartElement.model = barChartModel;
46
      chartElement.actionMode = "none";
47
    </script>
48
  </body>
49
</html>

Styling with charts model

Charts model allows you to style specific chart elements. This is useful when you want to target elements that may not be covered by CSS variables, such as series or guides or add additional styling like line types and widths.

Charts components use a default color palette for series colors. To define custom series colors, use the setSeriesColor model method.

Charts component - Series colors

32 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Esri Developer Guide: Bar chart with split by field</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.1/"></script>
  </head>

  <body>
    <arcgis-chart></arcgis-chart>
    <script type="module">
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
      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.setSeriesColor([0, 0, 0, 255], 0);
      barChartModel.setSeriesColor([128, 128, 128, 255], 1);
      barChartModel.setSeriesColor([200, 200, 200, 255], 2);
55 collapsed lines

      barChartModel.titleSymbol = {
        type: "esriTS",
        color: [255, 0, 0, 255],
        font: {
          size: 20,
          weight: "bold",
        },
      };
      barChartModel.legendTitleSymbol = {
        type: "esriTS",
        color: [255, 100, 0, 255],
        font: {
          size: 16,
          weight: "bold",
        },
      };

      barChartModel.setGridLinesSymbol(
        {
          type: "esriSLS",
          style: "esriSLSDash",
          color: [255, 100, 100, 255],
          width: 1,
        },
        [0, 1],
      );
      barChartModel.axisLinesSymbol = {
        type: "esriSLS",
        style: "esriSLSDash",
        color: [255, 100, 100, 255],
        width: 1.5,
      };

      barChartModel.addYAxisGuide("Guide 1", 0);
      barChartModel.setGuideStart(6000, 0);
      barChartModel.setGuideEnd(8000, 0);

      barChartModel.setGuideStyle(
        {
          type: "esriSFS",
          color: [255, 125, 125, 100],
        },
        0,
      );

      barChartModel.setGuideLabelText("Values between 6000 and 8000", 0);
      barChartModel.setAxisTitleText("Neighbourhood Group", 0);
      barChartModel.titleText = "NYC Short-Term Rental Room Types by Neighbourhood Group";
      barChartModel.legendTitleText = "Room type";
      barChartModel.dataLabelsVisibility = true;
      chartElement.model = barChartModel;
    </script>
  </body>
</html>

Guides are visual elements that provide context or highlight specific values. To style guide colors and appearance, use the setGuideStyle model method.

Charts component - Guides

73 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Esri Developer Guide: Bar chart with split by field</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.1/"></script>
  </head>

  <body>
    <arcgis-chart></arcgis-chart>
    <script type="module">
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
      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.setSeriesColor([0, 0, 0, 255], 0);
      barChartModel.setSeriesColor([128, 128, 128, 255], 1);
      barChartModel.setSeriesColor([200, 200, 200, 255], 2);

      barChartModel.titleSymbol = {
        type: "esriTS",
        color: [255, 0, 0, 255],
        font: {
          size: 20,
          weight: "bold",
        },
      };
      barChartModel.legendTitleSymbol = {
        type: "esriTS",
        color: [255, 100, 0, 255],
        font: {
          size: 16,
          weight: "bold",
        },
      };

      barChartModel.setGridLinesSymbol(
        {
          type: "esriSLS",
          style: "esriSLSDash",
          color: [255, 100, 100, 255],
          width: 1,
        },
        [0, 1],
      );
      barChartModel.axisLinesSymbol = {
        type: "esriSLS",
        style: "esriSLSDash",
        color: [255, 100, 100, 255],
        width: 1.5,
      };

      barChartModel.addYAxisGuide("Guide 1", 0);
      barChartModel.setGuideStart(6000, 0);
      barChartModel.setGuideEnd(8000, 0);

      barChartModel.setGuideStyle(
        {
          type: "esriSFS",
          color: [255, 125, 125, 100],
        },
        0,
      );
10 collapsed lines

      barChartModel.setGuideLabelText("Values between 6000 and 8000", 0);
      barChartModel.setAxisTitleText("Neighbourhood Group", 0);
      barChartModel.titleText = "NYC Short-Term Rental Room Types by Neighbourhood Group";
      barChartModel.legendTitleText = "Room type";
      barChartModel.dataLabelsVisibility = true;
      chartElement.model = barChartModel;
    </script>
  </body>
</html>

For example, to style the chart title and legend title with specific colors, use the titleSymbol and legendTitleSymbol properties on the chart model.

Charts component - Symbols

36 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Esri Developer Guide: Bar chart with split by field</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.1/"></script>
  </head>

  <body>
    <arcgis-chart></arcgis-chart>
    <script type="module">
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
      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.setSeriesColor([0, 0, 0, 255], 0);
      barChartModel.setSeriesColor([128, 128, 128, 255], 1);
      barChartModel.setSeriesColor([200, 200, 200, 255], 2);

      barChartModel.titleSymbol = {
        type: "esriTS",
        color: [255, 0, 0, 255],
        font: {
          size: 20,
          weight: "bold",
        },
      };
      barChartModel.legendTitleSymbol = {
        type: "esriTS",
        color: [255, 100, 0, 255],
        font: {
          size: 16,
          weight: "bold",
        },
      };
38 collapsed lines

      barChartModel.setGridLinesSymbol(
        {
          type: "esriSLS",
          style: "esriSLSDash",
          color: [255, 100, 100, 255],
          width: 1,
        },
        [0, 1],
      );
      barChartModel.axisLinesSymbol = {
        type: "esriSLS",
        style: "esriSLSDash",
        color: [255, 100, 100, 255],
        width: 1.5,
      };

      barChartModel.addYAxisGuide("Guide 1", 0);
      barChartModel.setGuideStart(6000, 0);
      barChartModel.setGuideEnd(8000, 0);

      barChartModel.setGuideStyle(
        {
          type: "esriSFS",
          color: [255, 125, 125, 100],
        },
        0,
      );

      barChartModel.setGuideLabelText("Values between 6000 and 8000", 0);
      barChartModel.setAxisTitleText("Neighbourhood Group", 0);
      barChartModel.titleText = "NYC Short-Term Rental Room Types by Neighbourhood Group";
      barChartModel.legendTitleText = "Room type";
      barChartModel.dataLabelsVisibility = true;
      chartElement.model = barChartModel;
    </script>
  </body>
</html>

Addition styling such as line types and widths can be applied to axes lines and grid lines using the setAxesLinesSymbol and setGridLinesSymbol model methods.

Charts component - Lines

53 collapsed lines
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Esri Developer Guide: Bar chart with split by field</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.1/"></script>
  </head>

  <body>
    <arcgis-chart></arcgis-chart>
    <script type="module">
      const { createModel } = await $arcgis.import("@arcgis/charts-components/model/shared/setup-utils.js");
      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.setSeriesColor([0, 0, 0, 255], 0);
      barChartModel.setSeriesColor([128, 128, 128, 255], 1);
      barChartModel.setSeriesColor([200, 200, 200, 255], 2);

      barChartModel.titleSymbol = {
        type: "esriTS",
        color: [255, 0, 0, 255],
        font: {
          size: 20,
          weight: "bold",
        },
      };
      barChartModel.legendTitleSymbol = {
        type: "esriTS",
        color: [255, 100, 0, 255],
        font: {
          size: 16,
          weight: "bold",
        },
      };

      barChartModel.setGridLinesSymbol(
        {
          type: "esriSLS",
          style: "esriSLSDash",
          color: [255, 100, 100, 255],
          width: 1,
        },
        [0, 1],
      );
      barChartModel.axisLinesSymbol = {
        type: "esriSLS",
        style: "esriSLSDash",
        color: [255, 100, 100, 255],
        width: 1.5,
      };
22 collapsed lines

      barChartModel.addYAxisGuide("Guide 1", 0);
      barChartModel.setGuideStart(6000, 0);
      barChartModel.setGuideEnd(8000, 0);

      barChartModel.setGuideStyle(
        {
          type: "esriSFS",
          color: [255, 125, 125, 100],
        },
        0,
      );

      barChartModel.setGuideLabelText("Values between 6000 and 8000", 0);
      barChartModel.setAxisTitleText("Neighbourhood Group", 0);
      barChartModel.titleText = "NYC Short-Term Rental Room Types by Neighbourhood Group";
      barChartModel.legendTitleText = "Room type";
      barChartModel.dataLabelsVisibility = true;
      chartElement.model = barChartModel;
    </script>
  </body>
</html>

Chart typesScatterplot TutorialsDisplay a chart