Color

live example

Explore the API in the live example.

api reference

Color()

Component implementing various color palettes and coloring policies. When this component is available for a widget, its API is exposed via the .color namespace.

Color.deficiency(type)

Emulates a color vision deficiency. Useful for testing the widget for accessibility. The deficiency emulation is implemented using the algorithm [here]@link http://web.archive.org/web/20081030075157/http://www.nofunc.com/Color_Blindness_Library/ .

Parameters

Name	Type	Description
type	string	Type of deficiency to emulate. Supported values: `achromatomaly` , `achromatopsia` , `deuteranomaly` , `deuteranopia` , `protanomaly` , `protanopia` , `tritanomaly` , `tritanopia` . If it is not specified, true colors are restored.

Returns

Widget

Reference to the Widget's API.

Examples

// Set deficiency to protanotopia.
chart.color.deficiency('protanotopia')

// Remove deficiency emulator (true colors).
chart.color.deficiency()

Color.on([on])

Sets the mapping function that should be used to map data points to colors. It is used different ways for each coloring policy:

Categorical: the function should map to distinct categorical values (such as integers or strings).
Sequential: the function should map to the interval [0, 1].
Diverging: the function should map to the interval [-1, 1].

Parameters

Name	Type	Description
on	Function	optionalFunction that maps from a data point to a set of categories, the interval [0, 1] or the interval [-1, 1]. Default value is `d => d.name`.

Returns

Widget

Reference to the Widget's API.

Examples

// Set color mapping to the first letter of the plot name (for categorical policy).
chart.color.on(d => d.name.chartAt(0))

// Set color mapping to the y value of the element (for sequential policy).
// yMax is the maximum data point in the data set.
chart.color.on(d => d.y / yMax)

// Reset color mapping to default.
chart.color.on()

Color.palette(palette, missing)

Sets the color palette. Supported palettes:

Default color palette: When the palette is not specified or it is incompatible with the currently set policy, the policy dependent default palette is used. See the documentation of the policy method for details.
Built-in color palette (passing a string that starts with 'palette-'): One of the built-in palettes that support the vast majority of color vision deficiencies:
- palette-brightA 6 color colorblind friendly qualitative palette designed by Paul Tol.
  Colors:
- palette-mutedA 9 color colorblind friendly qualitative palette designed by Paul Tol.
  Colors:
- palette-lightA 8 color colorblind friendly qualitative palette designed by Paul Tol.
  Colors:
- palette-vibrantA 6 color colorblind friendly qualitative palette designed by Paul Tol.
  Colors:
Single color (passing a string that represents a color): The specified color is used for all plots (categorical policy) or shades of the color are used (sequential policy).
List of colors (passing string[]): A custom color palette. It is either used to color elements in the order they appear in a widget (categorical policy) or colors are interpolated in the specified order (sequential and diverging policies).
Custom color mapping (passing an object): Each plot has the color specified as the value for the property with the same name as the plot's key.

Parameters

Name	Type	Description
palette	string, string[], Object	Color palette to set. If not specified, the default policy is set. If string, it's either a built-in palette or a the color represented by the string is used for all plots. If an array of strings, it's colors are assigned to plots as they are added to the widget without any specific association between colors and plots. If an object, it is used as a mapping from the plot names to the colors.
missing	string	Color to be used for missing values. This is mostly relevant for the sequential and diverging color policies. Default value is policy dependent.

Returns

Widget

Reference to the Widget's API.

Examples

// Set color palette to single color.
chart.color.palette('green')

// Set color palette to a mapping from plot names to colors (categorical policy).
chart.color.palette({
  plot1: 'green',
  plot2: 'brown'
})

// Set color palette to an array of colors with missing color as gray
// for sequential and diverging policies.
chart.color.palette(['green', 'yellow', 'brown'], 'gray')

// Reset color palette to policy-default.
chart.color.palette()

Color.policy([policy])

Sets the color scheme policy and updates the current color mapping. The following policies are supported:

categorical: Maps categories to colors, typically different plots in a chart or groups of elements in a widget. Supported palette types: single color (all elements have the same color), array of colors (incoming elements in a widget will be assigned colors in order), object representing the color mapping (with element name - color as property names and values). The default color palette is the one proposed by Bang Wong (See this paper and this post for details):
Colors:
sequential: Maps the interval [0, 1] to a range of colors. When this policy is used, it is most often applied together with a specific mapping function set by the on method. Supported palette types: single color (colors are interpolated from white to the specified color), array of colors (colors are interpolated according to the specified colors). The default color palette is the iridescent palette created by Paul Tol (See this post for details):
Colors:
diverging: Maps the interval [-1, 1] to a range of colors. When this policy is used, it is most often applied together with a specific mapping function set by the on method. Supported palette types: array of colors (colors are interpolated according to the specified colors). The default palette is the sunset palette created by Paul Tol which is a variant of the diverging color palette RdYlBu from Cynthia Brewer (See this post and the original scheme for details):
Colors:

Parameters

Name	Type	Description
policy	string	optionalPolicy to set for the color scheme. Default value is `categorical`.

Returns

Widget

Reference to the Widget's API.

Examples

// Set color policy to sequential.
chart.color.policy('sequential')

// Reset color policy to default.
chart.color.policy()