pieChart | References | ArcGIS Maps SDK for JavaScript

import { createRenderer, createRendererForClustering } from "@arcgis/core/smartMapping/renderers/pieChart.js";

Since: ArcGIS Maps SDK for JavaScript 4.24

This object contains a helper method for generating a pie chart for every feature.

For example, suppose you have a layer of U.S. counties with fields containing the total sales of various crops: wheat, soybeans, corn, cotton, and vegetables. You can use the createRenderer() method in this module to generate a chart for each feature visualizing the proportion of each crop type for every county.

Known Limitations

Only supported in 2D MapView. Only supported in layers with point and polygon geometries.

See also

PieChartRenderer

Functions

Name	Return Type	Object
`createRenderer`	`Promise<RendererResult>`
`createRendererForClustering`	`Promise<ClusterRendererResult>`
`RendererParameters`
`RendererResult`
`ClusterRendererResult`
`ClusterRendererParameters`

createRenderer

Function

Generates a PieChartRenderer based on a set of numeric fields.

Signature: createRenderer (parameters: RendererParameters): Promise<RendererResult>

Parameters

Parameter	Type	Description	Required
parameters	`RendererParameters`	Input parameters for generating a pie chart visualization based on a set of numeric fields.

Returns: Promise<RendererResult>
Resolves to an instance of RendererResult.

Example

const layer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0"
});

// will create a visualization of predominant crop by U.S. county

const parameters = {
  layer: layer,
  view: view,
  attributes: [{
    field: "M217_07",
    label: "Vegetables"
  }, {
    field: "M188_07",
    label: "Cotton"
  }, {
    field: "M172_07",
    label: "Wheat"
  }, {
    field: "M193_07",
    label: "Soybeans"
  }, {
    field: "M163_07",
    label: "Corn"
  }],
  includeSizeVariable: true,
  sizeOptimizationEnabled: true,
  shape: "donut"
};

// when the promise resolves, apply the renderer to the layer
const { renderer } = await pieChartRendererCreator.createRenderer(parameters);
layer.renderer = renderer;

createRendererForClustering

Function

Since: ArcGIS Maps SDK for JavaScript 4.25

Generates a PieChartRenderer to use for a FeatureReductionCluster visualization based off an input layer's UniqueValueRenderer or ClassBreaksRenderer. This method also generates aggregate fields that must be provided to the FeatureReductionCluster object to properly render.

Signature: createRendererForClustering (parameters: ClusterRendererParameters): Promise<ClusterRendererResult>

Parameters

Parameter	Type	Description	Required
parameters	`ClusterRendererParameters`	Input parameters for generating a pie chart visualization for clustering.

Returns: Promise<ClusterRendererResult>
Resolves to an instance of ClusterRendererResult.

Example

const { renderer, fields } = await pieChartRendererCreator.createRendererForClustering({
  layer,
  shape: "donut"
});

const featureReduction = {
  type: "cluster",
  renderer,
  fields
};

layer.featureReduction = featureReduction;

Type definitions

RendererParameters

Type definition

Supertypes: AbortOptions

layer

Property

Type: FeatureLikeLayerOrAdapter | null | undefined

The layer for which the visualization is generated. When a client-side layer type is provided, attribute and spatial statistics are calculated only from features in the view's extent. When a server-side layer type is provided, the statistics are calculated from the entire layer, unless a valueExpression is provided.

attributes

Property

Type: Attribute[] | null | undefined

A set of complementary numeric fields/expressions used to create the charts. For example, if creating an election map, you would indicate the name of each field representing the candidate or political party where their total counts are stored.

shape

Property

Type: "donut" | "pie" | null | undefined

Determines whether to create a pie chart or a donut chart.

Default value: "pie"

view

Property

Type: MapView | null | undefined

The view instance in which the visualization will be rendered.

outlineOptimizationEnabled

Property

Type: boolean | null | undefined

Only for polygon layers. Indicates whether the polygon's background fill symbol outline width should vary based on view scale.

Default value: false

sizeOptimizationEnabled

Property

Type: boolean | null | undefined

Indicates whether chart sizes should vary based on view scale.

Default value: false

includeSizeVariable

Property

Type: boolean | null | undefined

Indicates whether to include data-driven size in the final renderer. If true, features will be assigned a sized based on the sum of all values in the attributes param. Features with small total counts will be sized with small charts and features with large total counts will be sized with large charts. Enabling this option is good for visualizing how influential a particular feature is compared to the dataset as a whole. It removes bias introduced by features with large geographic areas, but relatively small data values.

pieChartScheme

Property

Type: PieChartScheme | null | undefined

In authoring apps, the user may select a pre-defined color scheme. Pass the scheme object to this property to avoid getting one based on the background of the view.

legendOptions

Property

Type: RendererLegendTitleOption | null | undefined

Provides options for modifying Legend properties describing the visualization.

forBinning

Property

Type: boolean | null | undefined

Indicates whether the generated renderer is for a binning or clustering visualization. If true, then the input field(s) in this method should refer to aggregate fields defined in the featureReduction property of the layer.

filter

Property

Type: FeatureFilter | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.31

When defined, only features included in the filter are considered in the attribute and spatial statistics calculations when determining the final renderer. This is useful when a lot of variation exists in the data that could result in undesired data ranges. A common use case would be to set a filter that only includes features in the current extent of the view where the data is most likely to be viewed. Currently, only geometry filters with an intersects spatial relationship are supported. All other filter types (including where) are ignored.

RendererResult

Type definition

The result object of the createRenderer() method. See the table below for details of each property.

renderer

Property

Type: PieChartRenderer

The generated pie chart renderer. Set this on a layer's renderer property to update its visualization.

pieChartScheme

Property

Type: PieChartScheme

The color scheme used by the renderer.

size

Property

Type: sizeCreator.VisualVariableResult | null | undefined

A size visual variable representing the sum of all attributes included in the pie chart. This is returned if the includeSizeVariable parameter is true.

basemapId

Property

Type: string | null | undefined

The ID of the basemap used to determine the optimal color schemes for the charts.

basemapTheme

Property

Type: BasemapTheme | null | undefined

Indicates whether the average color of the input view's basemap is light or dark.

statistics

Property

Type: UniqueValuesResult

Contains the total counts of each attribute used in the renderer.

ClusterRendererResult

Type definition

The result object of the createRendererForClustering() method. See the table below for details of each property.

fields

Property

Type: AggregateField[]

The aggregate fields used by the renderer. Set this on a FeatureReductionCluster.fields property of the FeatureReductionCluster instance alongside the renderer to update the clustering visualization to pie charts.

renderer

Property

Type: PieChartRenderer

The generated pie chart renderer to use for clustering. Set this on a FeatureReductionCluster.renderer property of the FeatureReductionCluster instance to update its visualization.