Skip To ContentArcGIS for DevelopersSign In Dashboard
require(["esri/renderers/visualVariables/ColorVariable"], function(ColorVariable) { /* code goes here */ });
Class: esri/renderers/visualVariables/ColorVariable
Inheritance: ColorVariable VisualVariable Accessor
Since: ArcGIS API 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.

renderer-vv-color

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

new ColorVariable(properties)
Parameter:
properties Object
optional

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

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
NameTypeSummaryClass
String

The name of the class.

more details
more detailsAccessor
String

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

more details
more detailsVisualVariable
Object

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

more details
more detailsVisualVariable
String

Name of the numeric attribute field by which to normalize the data.

more details
more detailsColorVariable
ColorStop[]

An array of sequential objects, or stops, that defines a continuous color ramp.

more details
more detailsColorVariable
String

The visual variable type.

more details
more detailsColorVariable
String

An Arcade expression evaluating to a number.

more details
more detailsVisualVariable
String

The title identifying and describing the associated Arcade expression as defined in the valueExpression property.

more details
more detailsVisualVariable

Property Details

declaredClass Stringreadonly inherited

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

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

legendOptions Object inherited

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

Properties:
showLegend Boolean
optional

Indicates whether to show the visual variable in the legend.

title String
optional

The title describing the visualization of the visual variable in the Legend. This takes precedence over a field alias or valueExpressionTitle.

normalizationField String

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.

Autocasts from Object[]

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 Stringreadonly

The visual variable type. For ColorVariable, this value is always color.

valueExpression String inherited

An Arcade expression evaluating to a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. The values returned from this expression are the data used to drive the visualization. This takes precedence over field. Therefore, this property is typically used as an alternative to field in visual variables.

See also:
valueExpressionTitle String inherited

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.

Method Overview

NameReturn TypeSummaryClass
ColorVariable

Creates a deep clone of the ColorVariable.

more details
more detailsColorVariable
*

Creates a new instance of this class and initializes it with values from a JSON object generated from a product in the ArcGIS platform.

more details
more detailsColorVariable
Object

Converts an instance of this class to its ArcGIS portal JSON representation.

more details
more detailsColorVariable

Method Details

clone(){ColorVariable}

Creates a deep clone of the ColorVariable.

Returns:
TypeDescription
ColorVariableA deep clone of the color visual variable that invoked this method.
Example:
// Creates a deep clone of the visual variable
var renderer = renderer.visualVariables[0].clone();
fromJSON(json){*}static

Creates a new instance of this class and initializes it with values from a JSON object generated from a product in the ArcGIS platform. 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.

Parameter:
json Object

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:
TypeDescription
*Returns a new instance of this class.
toJSON(){Object}

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

Returns:
TypeDescription
ObjectThe ArcGIS portal JSON representation of an instance of this class.

API Reference search results

NameTypeModule
Loading...