How to use PieChartRenderer (ArcGIS) in javascript

Question

In my user interface, I want to display data per neighborhood via a pie chart, whereby different age groups correspond to different pieces of the pie chart. Relevant code:

import { setDefaultOptions, loadModules } from "esri-loader";
import PieChartRenderer from "@arcgis/core/renderers/PieChartRenderer.js";


const buurten_2023_v1_age = new FeatureLayer({
  id: "buurten_2023_v1_age",
  url: "https://services.arcgis.com/zmBQLV64TsFvEpV0/arcgis/rest/services/buurten_2023_v1_age/FeatureServer",
  spatialReference: { wkid: 28992 },
  hasZ: false,
  outFields: ["BU_NAAM", "P_00_14_JR", "P_15_24_JR"],
  renderer: new PieChartRenderer({
    size: 10,
    attributes: [
      {
        color: [255, 69, 0, 0.4],
        label: "Perc 0-14",
        field: "P_00_14_JR",
      },
      {
        color: [255, 69, 255, 0.4],
        label: "Perc 15-24",
        field: "P_15_24_JR",
      },
     ],
     outline: {
      width: 1.5,
      color: "white",
     },
    }),
  });

I also have "@arcgis/core": "^4.30.8" in my package.json

Currently, the pie chart visualization does not work. In the console, I get:

4.18/:73  [esri.core.Accessor] Accessor#set Invalid property value, value needs to be one ,
of 'esri.renderers.HeatmapRenderer', 'esri.renderers.SimpleRenderer', 
'esri.renderers.UniqueValueRenderer', 'esri.renderers.ClassBreaksRenderer', 
'esri.renderers.DotDensityRenderer', 'esri.renderers.DictionaryRenderer', or a plain object
 that can autocast (having .type = 'heatmap', 'simple', 'unique-value', 'class-breaks', 
'dot-density', 'dictionary')

How can I fix this problem, so that the pie charts render correctly in the user interface.

tdy · Accepted Answer · 2024-07-25 20:47:08Z

1

Adding the following lines in a index.html file works in my case:

<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.30/"></script>
<script type="module" src="https://js.arcgis.com/calcite-components/2.8.5/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.8.5/calcite.css" />

line 7-10 in https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=visualization-pie-chart

edited Jul 25, 2024 at 20:47

tdy

42k42 gold badges124 silver badges125 bronze badges

answered Jul 24, 2024 at 14:58

Foeke Boersma

2271 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use PieChartRenderer (ArcGIS) in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related