Color Management

Overview

AnyChart Stock allows you to set color of any element of the chart, and moreover - it provides a very user/designer/developer friendly mechanism of color setting. Web-developers usually work with Hexadecimal or Web-Colors, desktop developer use RGB or HSB notation. AnyChart supports all this formats and gives user the way for built-in color transformation.

to top

Color Formats

As it was said above AnyChart supports the following color setting notation, which means - you can use any of them when setting a value of color attribute in any node:

  1. Hexadecimal (html-like)
  2. Red Green Blue
  3. Hue Saturation Brightness
  4. Web-Color Constants

to top

Hexadecimal

Hexadecimal notation is widely used in HTML. A hex triplet is a six-digit, three-byte hexadecimal number used in HTML and CSS, and other computing applications, to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation). This represents the least (0) to the most (255) intensity of each of the color components. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order: red value; green value; blue value.

When setting color using Hexadecimal notation you should use "#" before hex constant itself, for example, to set font color to blue you should specify:

XML/JSON Syntax
Plain code
01 <font color="#0000FF" />
01{
02  color: "#0000FF"
03}

to top

RGB Macro

This format, just as Hexadecimal, sets color using three components: red, green and blue, but uses decimal, not hexadecimal values, for example: rgb(255,255,0) stands for absolutely Yellow. The syntax: rgb(red,green,blue), where red, green and blue – decimal values that vary from 0 to 255.

XML/JSON Syntax
Plain code
01 <font color="rgb(0,0,255)" />
01{
02  color: "rgb(0,0,255)"
03}

to top

HSB Macro

HSB sets color in Hue-Saturation-Brightness color space. Syntax: HSB(hue,saturation,brightness), where hue – varies from 0 to 360, saturation – from 0 to 100, and brightness - 0 to 100. Sample colors: hsb(0,100,100) – Red color, hsb(60,100,100) – yellow color, hsb(0,0,100) – white, etc.

XML/JSON Syntax
Plain code
01 <font color="hsb(240,100,50)" />
01{
02  color: "hsb(240,100,50)"
03}

to top

Web-Colors

Also you can use Web-Color constants. For example: "Red", "Gold", "RoyalBlue", etc. Table with full list of color constants, along with their hexadecimal, RGB and HSB you can find on Web-Color Constants Table.

XML/JSON Syntax
Plain code
01 <font color="Blue" />
01{
02  color: "Blue"
03}

to top

Color Transformation

To make design easier - AnyChart Provides several color transformation functions, below you will find their reference and a sample of their usage in creation of you own style for Column charts.

Function Description
LightColor(Color) Returns Lighter color than given
DarkColor(Color) Returns Darker color than given


LightColor

LightColor function is used to return for sure a color that is lighter than a given, for example, if input color is Black - we will get some non-black color that can be used for highlighting element. Input color can be specified in any of the specified above.

Sample: LightColor(Red) = LightColor(RGB(255,0,0)) = LightColor(#FF0000) = #FF5959

Input color LightColor
#FF0000   #FF5959  


DarkColor

DarkColor function is used to return for sure a color that is darker than a given, for example, if input color is White - we will get some non-white color that can be used for outlining an element. Input color can be specified in any of the specified above.

Sample: DarkColor(Red) = DarkColor(RGB(255,0,0)) = DarkColor(#FF0000) = #A50000

Input color DarkColor
#FF0000   #A50000  

to top

%Color token

By default all series are colored in black, to color series you should set its color explicitly.

Sample syntax to color the series:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_list>
03     <series type="Line" data_provider="dp1" color="#DC3912" />
04     <series type="Line" data_provider="dp2" color="DarkRed" />
05     <series type="Line" data_provider="dp3" color="Rgb(120,40,120)" />
06     <series type="Line" data_provider="dp4" color="Hsb(150,79,85)" />
07   </series_list>
08 </chart>
01{
02  seriesList: [
03    {
04      type: "Line",
05      dataProvider: "dp1",
06      color: "#DC3912"
07    },
08    {
09      type: "Line",
10      dataProvider: "dp2",
11      color: "DarkRed"
12    },
13    {
14      type: "Line",
15      dataProvider: "dp3",
16      color: "Rgb(120,40,120)"
17    },
18    {
19      type: "Line",
20      dataProvider: "dp4",
21      color: "Hsb(150,79,85)"
22    }
23  ]
24}

The color can be set in different format, it can be hex code, web-constant, RGB or HSB macros, also you can use transform functions, for example: <series color="DarkColor(#FEFE00)"/>.

The color set for the series used to draw the series and other depended elements, such as legend item, tooltip and markers.

Wherever you configure the series you can set either a color constant or %Color token, which will be replaced by the value of color attribute upon rendering.

Here is a sample XML for lines and fill of Area series:

XML/JSON Syntax
Plain code
01 <series_settings_defaults>
02   <area_series>
03     <line enabled="true" color="DarkColor(%Color)" thickness="2" opacity="1" />
04     <fill color="%Color" opacity="0.5" />
05   </area_series>
06 </series_settings_defaults>
01{
02  areaSeries: {
03    line: {
04      enabled: true,
05      color: "DarkColor(%Color)",
06      thickness: 2,
07      opacity: 1
08    },
09    fill: {
10      color: "%Color",
11      opacity: 0.5
12    }
13  }
14}

As you can see %Color is used to configure fill and line, but for line color is transformed: DarkColor(%Color), to make border distinct.

Live sample below shows to Area series, two of them use settings from defaults section and the third one uses personal settings with static colors defined:

Live Sample:  Using Color Tokens

to top