ColorVariable | References | ArcGIS Maps SDK for JavaScript

import ColorVariable from "@arcgis/core/renderers/visualVariables/ColorVariable.js";

const ColorVariable = await $arcgis.import("@arcgis/core/renderers/visualVariables/ColorVariable.js");

Inheritance: ColorVariable→VisualVariable→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.10

The color visual variable is used to visualize features along a continuous color ramp based on the values of a numeric attribute field or an expression. The color ramp is defined along a sequence of stops, where color values are mapped to data values. Data values that fall between two stops are assigned a color that is linearly interpolated based on the value's position relative to the closest defined stops.

For CIMSymbols, the color value is applied only to symbol layers that aren't color locked.

See also

Examples

// Population per square kilometer
const colorVisVar = {
  type: "color",
  field: "POPULATION",
  normalizationField: "SQ_KM",
  stops: [
    { value: 30, color: "#fffcd4" },
    { value: 6000, color: "#0d2644" }
  ],
  legendOptions: {
    title: "Population per square kilometer"
  }
};
renderer.visualVariables = [ colorVisVar ];

// color visual variable with arcade expression
// voter turnout
const colorVisVar = {
  type: "color",
  valueExpression: "( $feature.TOT_VOTES / $feature.REG_VOTERS ) * 100",
  valueExpressionTitle: "Voter Turnout",
  stops: [
    { value: 30, color: "#fffcd4" },
    { value: 70, color: "#0d2644" }
  ]
};
renderer.visualVariables = [ colorVisVar ];

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	ColorVariableProperties

See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
declaredClass readonly inherited	string	Accessor
field inherited	string	VisualVariable
legendOptions inherited	VisualVariableLegendOptions \| null \| undefined	VisualVariable
normalizationField	string \| null \| undefined
stops	ColorStop[]
type readonly	"color"
valueExpression inherited	string \| null \| undefined	VisualVariable
valueExpressionTitle inherited	string \| null \| undefined	VisualVariable

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

The name of the class. The declared class name is formatted as esri.folder.className.

field

inherited Property

Type: string

Inherited from: VisualVariable

The name of the numeric attribute field that contains the data values used to determine the color/opacity/size/rotation of each feature.

legendOptions

autocast inherited Property

Type: VisualVariableLegendOptions | null | undefined

Inherited from: VisualVariable

An object providing options for displaying the visual variable in the Legend.

normalizationField

Property

Type: string | null | undefined

Name of the numeric attribute field by which to normalize the data. If this field is used, then the values in stops should be normalized as percentages or ratios.

stops

autocast Property

Type: ColorStop[]

An array of sequential objects, or stops, that defines a continuous color ramp. You must specify 2 - 8 stops. In most cases, no more than five are needed. Features with values that fall between the given stops will be assigned colors linearly interpolated along the ramp in relation to the nearest stop values. The stops must be listed in ascending order based on the value of the value property in each stop.

type

readonly Property

Type: "color"

The visual variable type.

valueExpression

inherited Property

Type: string | null | undefined

Inherited from: VisualVariable

An Arcade expression following the specification defined by the Arcade Visualization Profile. Expressions in visual variables may reference field values using the $feature profile variable and must return a number.

The values returned from this expression are the data used to drive the visualization as defined in the stops. This takes precedence over field. Therefore, this property is typically used as an alternative to field in visual variables.

See also

Arcade - Visualization Profile

valueExpressionTitle

inherited Property

Type: string | null | undefined

Inherited from: VisualVariable

The title identifying and describing the associated Arcade expression as defined in the valueExpression property. This is displayed as the title of the corresponding visual variable in the Legend in the absence of a provided title in the legendOptions property.

Methods

Method	Signature	Class
fromJSON inherited static	fromJSON(json: any): any	JSONSupportMixin
clone	clone(): ColorVariable
toJSON inherited	toJSON(): any	JSONSupportMixin

fromJSON

inheritedstatic Method

Signature: fromJSON (json: any): any

Inherited from: JSONSupportMixin

Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product. The object passed into the input json parameter often comes from a response to a query operation in the REST API or a toJSON() method from another ArcGIS product. See the Using fromJSON() topic in the Guide for details and examples of when and how to use this function.

Parameters

Parameter	Type	Description	Required
json	any	A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.

Returns: any
Returns a new instance of this class.

clone

Method

Signature: clone (): ColorVariable

Creates a deep clone of the ColorVariable.

Returns: ColorVariable
A deep clone of the color visual variable that invoked this method.

Example

// Creates a deep clone of the visual variable
let renderer = renderer.visualVariables[0].clone();

toJSON

inherited Method

Signature: toJSON (): any

Inherited from: JSONSupportMixin

Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() guide topic for more information.

Returns: any
The ArcGIS portal JSON representation of an instance of this class.