JSPM

@arcgis/charts-components-react

4.34.0-next.76
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2583
  • Score
    100M100P100Q120793F
  • License SEE LICENSE.md

A set of React components that wrap ArcGIS charts components

Package Exports

  • @arcgis/charts-components-react
  • @arcgis/charts-components-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@arcgis/charts-components-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ArcGIS Maps SDK for JavaScript - React wrapper for Charts Components (beta)

No Esri Technical Support during beta.

Note: @arcgis/charts-components-react was developed for use in React 18. Consider updating to React 19 where the React wrapper is no longer necessary. Check out the documentation to get started with @arcgis/charts-components in React 19.

The ArcGIS Maps SDK for JavaScript provides a suite of ready-to-use UI components that simplify the process of creating GIS web applications. This package offers a series of charting components that can be used to build custom applications.

Documentation

Resources

Support

Quick start guide

  • Get started by using the react 18 sample.
  • Install the required packages: @arcgis/charts-components-react, @arcgis/core, @esri/calcite-components-react.
  • Import the necessary CSS files in your project and ensure CSS is configured for the charts components:
@import 'https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/dark/main.css';
@import url("https://js.arcgis.com/calcite-components/3.2.0/calcite.css");

#root,
html,
body {
  margin: 0;
}
  • Add chart component: In your main file (e.g., index.tsx), add the ArcgisChart component and configure it with either an existing chart model from a feature layer, or by creating a new model with createModel().
import React from "react";
import ReactDOM from "react-dom/client";
import "@arcgis/charts-components/components/arcgis-chart";
import "@arcgis/charts-components/components/arcgis-charts-action-bar";
import { ArcgisChart, ArcgisChartsActionBar } from "@arcgis/charts-components-react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ArcgisChart>
      <ArcgisChartsActionBar slot="action-bar"></ArcgisChartsActionBar>
    </ArcgisChart>
  </React.StrictMode>,
);

License

COPYRIGHT © 2025 Esri

All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.

This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.

See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english

For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA

email: contracts@esri.com