Modify a chart

Learn how to modify an existing chart with charts model properties and methods.

Prerequisites

Steps

Create a new pen

Go to CodePen to create a new pen for your application.

Add basic HTML

Define a basic HTML page.

In CodePen > HTML, add HTML to create a basic page.

Use dark colors for code blocks

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Modify a chart</title>

  <style>
    html,
    body,
    arcgis-chart {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>


</body>


</html>

Add references

In the <head> tag, add references to the JavaScript SDK core library, calcite components and charts components.

Expand
Use dark colors for code blocks
  <style>
    html,
    body,
    arcgis-chart {
      height: 100%;
      margin: 0;
    }
  </style>

  <!-- Load Calcite components from CDN -->
  <script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script src="https://js.arcgis.com/4.34/"></script>

  <!-- Load Charts components from CDN-->
  <script type="module" src="https://js.arcgis.com/4.34/charts-components/"></script>
Expand

Add chart component

In the <body> tag, add the <arcgis-chart> component and specify the layer item ID and chart index.

Expand
Use dark colors for code blocks

<body>

  <arcgis-chart layer-item-id="8871626e970a4f3e9d6113ec63a92f2f" chart-index="0">

  </arcgis-chart>


</body>
Expand
Component reference (chart)

Add charts action bar component

Inside the <arcgis-chart> component, add the <arcgis-charts-action-bar> component and specify its slot.

Expand
Use dark colors for code blocks

<body>

  <arcgis-chart layer-item-id="8871626e970a4f3e9d6113ec63a92f2f" chart-index="0">

    <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>

  </arcgis-chart>


</body>
Expand
Component reference (charts action bar)

Modify the chart

Within the <body> tag, add a <script> tag with type="module" to write JavaScript code to modify the existing chart.

Expand
Use dark colors for code blocks
  <script type="module">

  </script>
Expand

Use document.querySelector() to select the <arcgis-chart> component.

Expand
Use dark colors for code blocks
    const chartElement = document.querySelector("arcgis-chart");

Expand

Use the loadModel() method to ensure the model is fully loaded before making changes.

Expand
Use dark colors for code blocks
    const chartElement = document.querySelector("arcgis-chart");

    await chartElement.loadModel();

Expand

Start modifying the chart model by using the titleSymbol prop to set the axis title symbol. Then use the subtitleText and subtitleSymbol props to add and modify the style of the subtitle.

Expand
Use dark colors for code blocks
    chartElement.model.titleSymbol = {
      type: "esriTS",
      font: {
        size: 20,
        style: "italic",
      },
    };
    chartElement.model.subtitleSymbol = {
      type: "esriTS",
      font: {
        size: 12,
        style: "italic",
      },
    };
    chartElement.model.subtitleText = "Categorized by School Type";

Expand

Set the descriptionText prop to a new description on the model.

Expand
Use dark colors for code blocks
    chartElement.model.descriptionText = "This scatterplot illustrates the relationship between tuition cost and post-graduation earnings across different school types. Each point represents a school, with size reflecting the SAT score and colors distinguishing types of schools. A trend line with a relatively low R² value (0.1) suggests only a weak positive correlation between higher tuition and higher earnings.";

Expand

Use the setAxisTitleSymbol() method to modify the X and Y axis title symbols to change their font size and weight

Expand
Use dark colors for code blocks
    chartElement.model.setAxisTitleSymbol({
      type: "esriTS",
      font: {
        size: 15,
        weight: "bold",
      },
    }, 0);
    chartElement.model.setAxisTitleSymbol({
      type: "esriTS",
      font: {
        size: 15,
        weight: "bold",
      },
    }, 1);

Expand

Lastly, use the addYAxisGuide() method to add a guide to the Y-axis. You can modify the guide further by using the setGuideStart(), setGuideStyle(), setGuideLabelText(), and setGuideAbove() methods.

Expand
Use dark colors for code blocks
    chartElement.model.addYAxisGuide("Y-axis guide", 0);
    chartElement.model.setGuideStart(40000, 0);
    chartElement.model.setGuideStyle(
      {
        type: "esriSFS",
        color: [100, 100, 100, 100],
      }, 0
    );
    chartElement.model.setGuideLabelText("Median Individual Earning", 0);
    chartElement.model.setGuideAbove(true, 0);
Expand

Run the app

In CodePen, run your code to display the chart.

You should see a scatterplot with a modified title, subtitle, description, axis title symbols, and a guide on the Y-axis.

What's next?

Learn how to use additional SDK features and ArcGIS services in these tutorials: