Color Modes (colorMode)

In this section:

How to:

The colorMode property defines the color mode for drawing chart risers and markers. In the default configuration (bySeries), risers and markers in a series are colored according to the values specified by the series:color property. The default values are series: 0, color: red, series: 1, color: green, series: 2, color: orange. This property can be used to apply different color modes to the chart risers and markers. Some color modes are not applicable or sensible for some chart types. For example, the waterfall charts properties define colors for positive risers and negative risers.


Top of page

x
Syntax: How to Define Color Modes
colorMode: {
   mode:'string',  
   colorList: ['string',...'string']  
 },

where:

mode: 'string'

Is a string that defines the chart color mode. Valid values are:

  • 'byGroup', in which risers and markers in a group a colored according to values specified in the series:color property.
  • 'byHeight', in which the colors defined in the colorList array create a gradient such that the first color is at the numeric axis minimum, the last color is at the numeric axis maximum, and the remaining colors are interpolated between these. This gradient is then used to color the risers. The byHeight mode is only valid for charts with an ordinal axis and a single numeric axis.
  • 'byInterpolation', in which the first series is colored the first color in the colorList array, the last series is colored the last color, and the series in between are interpolated accordingly.
  • 'byInterpolationAlt', which is identical to byInterpolation, except it does one additional step of mixing up the order of the chosen series colors. This mode is useful because colors between adjacent risers are different and easier to distinguish.
  • 'bySeries', in which risers and markers in a series are colored according to the values specified by the series:color property. This is the default, except for pie charts.
  • 'continuous', which is the default color mode for heatmaps and choropleths. This mode blends the colors in the color scale to form a gradient.
  • 'discrete', which can be used for heatmaps and choropleths to visualize the colorScale in discrete color bands. You use this with the colorScale object to define an array of color bands that provide start and stop values for each color. For more information, see Defining a Discrete Color Scale for Heatmap and Choropleth Charts.
colorList: ['string',...'string']

For byHeight, byInterpolation, and byInterpolationAlt color modes, is an array of colors defined by a color name or numeric specification string. If only one color is specified for byHeight, byInterporation, or byInterpolationAlt, a lighter version of that color is used as an implicit second color. The default value is undefined.



Example: Setting Color Modes

The following request uses the default color mode (bySeries):

GRAPH FILE WFLITE
SUM REVENUE_US GROSS_PROFIT_US DISCOUNT_US MSRP_US 
BY PRODUCT_CATEGORY
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
INCLUDE=ENDEFLT,$
*GRAPH_JS
border:{width:2, color:'teal'},
legend: {visible:false},
series: [
   {series: 'all', border: {width: 1, color: 'grey'}},
   {series: 0, color: 'red'},
   {series: 1, color: 'teal'},
   {series: 2, color: 'yellow'},
   {series: 3, color: 'cyan'}
]
*END
ENDSTYLE
END

On the output, each series has its own color, and that color is repeated for each group (PRODUCT_CATEGORY):

The following version of the request changes the color mode to byGroup:

GRAPH FILE WFLITE
SUM REVENUE_US GROSS_PROFIT_US DISCOUNT_US MSRP_US 
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Camcorder' OR 'Media Player' OR 'Stereo Systems'
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
INCLUDE=ENDEFLT,$
*GRAPH_JS
border:{width:2, color:'teal'},
legend: {visible:false},
  colorMode: {mode:'byGroup'},
series: [
   {series: 'all', border: {width: 1, color: 'grey'}},
   {series: 0, color: 'red'},
   {series: 1, color: 'teal'},
   {series: 2, color: 'yellow'},
   {series: 3, color: 'cyan'}
]
*END
ENDSTYLE
END

On the output, all series in each group (PRODUCT_CATEGORY) are colored the same. Group 0 uses the color set for series 0, group 1 uses the color set for series 1, and so on. When the series colors are used up, default colors are used:

Next, change the color mode to byHeight and add a color list:

colorMode: {
   'byHeight',
   colorList: ['red', 'yellow','lightgreen']
   }

On the output, the risers are colored using a gradient such that the first color is at the numeric axis minimum, the last color is at the numeric axis maximum, and the remaining colors are interpolated between these:

The next request generates a pie chart with the color mode byInterpolation with a color list:

GRAPH FILE WFLITE
SUM REVENUE_US 
BY PRODUCT_CATEGORY
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET STYLE *
*GRAPH_JS
border:{width:2, color:'teal'},
legend: {visible:false},
  colorMode: {mode: 'byInterpolation',colorList: ['red','tan', 'yellow']} ,
*END
ENDSTYLE
END

On the output, the first series is colored the first color in the colorList array, the last series is colored the last color, and the series in between are interpolated accordingly:

Changing the color mode to byInterpolationAlt generates the following chart, in which the colors have been interpolated and shuffled:


Top of page

x
Defining Colors for Color Modes

How to:

When the colorMode property is set to 'byInterpolation' or 'byHeight', the colorModeColors property defines the range of colors to apply to risers and markers.



x
Syntax: How to Define Colors for Color Modes
colorModeColors: ['string',...,'string']

where:

colorModeColors: ['string',...,'string']

Is an array of color strings defined by a color name or numeric specification string. The default value is undefined.



Example: Defining Color Mode Colors

The following request generates a vertical bar chart with color mode 'byHeight' and colorModeColors red, yellow, and light green:

GRAPH FILE WFLITE
SUM REVENUE_US GROSS_PROFIT_US DISCOUNT_US MSRP_US 
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Camcorder' OR 'Media Player' OR 'Stereo Systems'
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
border:{width:2, color:'teal'},
legend: {visible:false},
colorMode: 'byHeight',
  colorModeColors: ['red', 'yellow','lightgreen'],
series: [
   {series: 'all', border: {width: 1, color: 'grey'}},
   {series: 0, color: 'red'},
   {series: 1, color: 'teal'},
   {series: 2, color: 'yellow'},
   {series: 3, color: 'cyan'}
]
*END
ENDSTYLE
END

On the output, the colors are used to generate a gradient fill for the risers in which the first color is at the numeric axis minimum, the last color is at the numeric axis maximum, and the remaining colors are interpolated between these:

In the following request, the color mode is 'byInterpolation', and the color mode colors are bisque and teal:

GRAPH FILE WFLITE
SUM REVENUE_US GROSS_PROFIT_US DISCOUNT_US MSRP_US 
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Camcorder' OR 'Media Player' OR 'Stereo Systems'
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
border:{width:2, color:'teal'},
legend: {visible:false},
colorMode: 'byInterpolation',
  colorModeColors: ['bisque', 'teal'],
series: [
   {series: 'all', border: {width: 1, color: 'grey'}},
   {series: 0, color: 'red'},
   {series: 1, color: 'teal'},
   {series: 2, color: 'yellow'},
   {series: 3, color: 'cyan'}
]
*END
ENDSTYLE
END

On the output, the first series is colored the first color in the array, the last series is colored the last color, and the series in between are interpolated accordingly:


Information Builders