Colors

Solid Colors

Solid colors can either be entered:

  • By name, for example: steelBlue
  • By RGB color components, for example: 70 130 180
  • By a hexadecimal RGB color code, for example: #4682b4

Named Colors

xmCHART has easy-to-remember names for the most common colors. Refer to table Color Names for the names. For example:

FillStyle(1;​red)

AddRect(10;​10;​200;​100;​steelBlue)

Named colors cannot be combined with an alpha value. Instead, use the equivalent RGB color components. For example:

FillStyle(1;​steelBlue 128) /* Error */

FillStyle(1;​steelBlue,128) /* Error */

FillStyle(1;​70 130 180 128) /* R G B A */

FillStyle(1;​#4682b480) /* #rrggbbaa */

RGB Colors

RGB colors are defined by three integers between 0 and 255, which represent the red, green and blue components. These three color components are separated by any whitespace characters, including space, tab, and new line. For example:

FillStyle(1;​255 0 0) /* Red */

FillStyle(1;​255 255 0) /* Yellow */

Transparency (alpha channel) is supported as optional 4th component between 0 (invisible) and 255 (opaque), default is 255. For example:

FillStyle(1;​70 130 180 255) /* Same as FillStyle(1;70 130 180) */

FillStyle(1;​70 130 180 200) /* Translucent */

FillStyle(1;​70 130 180 0) /* Transparent (invisible) */

RGB Hexcodes

Solid colors also can be entered as hexadecimal RGB color code (#rrggbb), along with an optional alpha channel (#rrggbbaa). r, g, b and a can be any hexadecimal digit (0–9, a–f). For example:

FillStyle(1;​#4682b4)

FillStyle(1;​#4682b480)

The short-hand forms #rgb and #rgba are converted into the six and eight digit forms by replicating digits. For example:

FillStyle(1;​#f0a) /* Same as FillStyle(1;#ff00aa) */

FillStyle(1;​#f0ab) /* Same as FillStyle(1;#ff00aabb) */

Examples
EXAMPLE_01
1

OpenDrawing(360;​80)

2

AddRect(10;​10;​80;​40;​steelBlue)

3

AddRect(30;​30;​80;​40;​darkRed)

4

AddRect(130;​10;​80;​40;​70 130 180 )

5

AddRect(150;​30;​80;​40;​190 51 0 170)

6

AddRect(250;​10;​80;​40;​#4682b4)

7

AddRect(270;​30;​80;​40;​#be330055)

8

CloseDrawing()

EXAMPLE_01
EXAMPLE_02
1

OpenDrawing(360;​150)

2

ChartData( 8 13 9 7 11 8;​

3

-14 3 4 18 5 3;​

4

14 7 -8 4 16 11)

5

AreaChart(;​on)

6

AreaChartOptions(on) /* After AreaChart() */

7

/* Set up styles. */

8

FillStyle(1;​ 0 150 200 50)

9

FillStyle(2;​255 150 0 50)

10

FillStyle(3;​150 200 0 50)

11

BorderStyle(all;​smooth;​0)

12

LineStyle(1;​;​2;​steelBlue)

13

LineStyle(2;​;​2;​red)

14

LineStyle(3;​;​2;​darkGreen)

15

/* Set up axes and grid. */

16

AxisLine(all;​0) /* Hide axis lines. */

17

AxisMajorTicks(all;​0) /* Hide tick marks. */

18

AxisMajorTickLabelTexts(x;​"") /* Hide tick mark labels. */

19

MajorGridLineWidths(y;​x;​0) /* Hide vertical grid lines. */

20

MajorGridLineWidths(x;​y;​0.25)

21

CloseDrawing()

EXAMPLE_02
Color Palette
Color Palette
COLOR_PALETTE

Color Gradients

Color gradients are available for all xmCHART fills, borders, texts, etc. and are defined by a list of numbers.

Linear Gradients

1 angle isScalableFlag offset1 r1 g1 b1 a1 offset2 r2 g2 b2 a2 ...

For linear gradients the first value of the list is always 1. The second value defines the direction of the gradient within a range of -360 and +360 degrees. 0 degree defines a horizontal gradient from left to right, 90 degrees a gradient from top to bottom. The third value is either 0 or 1, 1 means the angle of the gradient is linked to the width/height ratio of the bounding box, which is in most cases preferable. For example, for a diagonal gradient set the first three values to 1 45 1. On the other hand, if you set the third value 0 (e.g.: 1 45 0 ...) the direction of the gradient is always exactly 45 degrees regardless of the shape of the bounding box. These three values follows a series of color stops. A color stop is represented by five elements: offset, red, green, blue and alpha. Offsets are between 0 and 1, the four RGBA components are between 0 and 255. Color names and RGB hexcodes are not supported in combination with color gradients.

Examples
EXAMPLE_03
1

OpenDrawing(600;​90)

2

AddRect(10;​10;​180;​70;​

3

1 90 1

4

0.0 0 128 255 255 /* Blue */

5

1.0 40 40 100 255) /* Dark blue */

6

AddRect(210;​10;​180;​70;​

7

1 0 1

8

0.0 255 0 0 255 /* Red */

9

0.2 240 109 6 255 /* Orange */

10

0.7 255 255 0 255 /* Yellow */

11

1.0 0 128 0 255) /* Green */

12

AddRect(410;​10;​180;​70;​

13

1 45 1

14

0.0 255 0 0 255 /* Red */

15

0.5 255 255 0 255 /* Yellow */

16

1.0 0 0 255 255) /* Blue */

17

CloseDrawing()

EXAMPLE_03
EXAMPLE_04
1

OpenDrawing(800;​100)

2

AddRect( 10;​10;​80;​80;​1 30 1 0.0 220 220 220 255 0.35 240 240 240 255 1.0 220 220 220 255;​;​0) /* Silver */

3

AddRect(110;​10;​80;​80;​1 30 1 0.0 204 204 255 255 0.35 240 240 255 255 1.0 204 204 255 255;​;​0) /* Light blue */

4

AddRect(210;​10;​80;​80;​1 30 1 0.0 203 226 195 255 0.35 240 255 240 255 1.0 203 226 195 255;​;​0) /* Light green */

5

AddRect(310;​10;​80;​80;​1 30 1 0.0 205 205 191 255 0.35 220 220 205 255 1.0 205 205 191 255;​;​0) /* Beige */

6

AddRect(410;​10;​80;​80;​1 30 1 0.0 170 180 190 255 0.35 184 195 205 255 1.0 170 180 190 255;​;​0) /* Light gray */

7

AddRect(510;​10;​80;​80;​1 30 1 0.0 102 102 102 255 0.35 120 120 120 255 1.0 102 102 102 255;​;​0) /* Dark gray */

8

AddRect(610;​10;​80;​80;​1 30 1 0.0 25 39 67 255 0.35 78 97 130 255 1.0 21 36 68 255;​;​0) /* Dark blue */

9

AddRect(710;​10;​80;​80;​1 30 1 0.0 10 10 10 255 0.35 50 50 50 255 1.0 30 30 30 255;​;​0) /* Black */

10

CloseDrawing()

EXAMPLE_04
EXAMPLE_05
1

OpenDrawing(400;​210)

2

/* Vertical */

3

AddRect( 20;​20;​20;​170;​1 0 1 0.0 241 176 81 255 0.35 247 211 152 255 1.0 90 68 35 255) /* Gold */

4

AddRect( 50;​20;​20;​170;​1 0 1 0.0 209 70 40 255 0.35 228 147 124 255 1.0 79 31 21 255) /* Red */

5

AddRect( 80;​20;​20;​170;​1 0 1 0.0 80 134 234 255 0.35 151 187 244 255 1.0 36 53 84 255) /* Light blue */

6

AddRect(110;​20;​20;​170;​1 0 1 0.0 6 56 28 255 0.35 18 169 85 255 1.0 6 56 28 255) /* Green */

7

AddRect(140;​20;​20;​170;​1 0 1 0.0 49 56 12 255 0.35 176 198 52 255 1.0 49 56 12 255) /* Olive */

8

AddRect(170;​20;​20;​170;​1 0 1 0.0 46 28 100 255 0.35 143 148 197 255 1.0 46 28 100 255) /* Dark blue */

9

/* Horizontal */

10

AddRect(210;​ 20;​170;​20;​1 90 1 0.0 90 68 35 255 0.35 247 211 152 255 1.0 90 68 35 255) /* Gold */

11

AddRect(210;​ 50;​170;​20;​1 90 1 0.0 79 31 21 255 0.35 228 147 124 255 1.0 79 31 21 255) /* Red */

12

AddRect(210;​ 80;​170;​20;​1 90 1 0.0 36 53 84 255 0.35 151 187 244 255 1.0 36 53 84 255) /* Light blue */

13

AddRect(210;​110;​170;​20;​1 90 1 0.0 6 56 28 255 0.35 18 169 85 255 1.0 6 56 28 255) /* Green */

14

AddRect(210;​140;​170;​20;​1 90 1 0.0 49 56 12 255 0.35 176 198 52 255 1.0 49 56 12 255) /* Olive */

15

AddRect(210;​170;​170;​20;​1 90 1 0.0 46 28 100 255 0.35 143 148 197 255 1.0 46 28 100 255) /* Dark blue */

16

Background(1 45 1

17

0.0 40 40 40 255

18

0.4 80 80 80 255

19

1.0 40 40 40 255;​;​

20

0) /* Hide border. */

21

CloseDrawing()

EXAMPLE_05
EXAMPLE_06
1

OpenDrawing(285;​90)

2

AddText(21;​60;​"gradients";​Times New Roman;​60;​bold;​gray)

3

AddText(20;​60;​"gradients";​Times New Roman;​60;​bold;​

4

1 0 1

5

0.35 176 198 52 255

6

0.00 49 56 12 255

7

1.00 49 56 12 255)

8

Background(1 30 1

9

0.00 25 39 67 255

10

0.35 78 97 130 255

11

1.00 21 36 68 255;​;​

12

0) /* Hide border. */

13

CloseDrawing()

EXAMPLE_06
EXAMPLE_07
1

OpenDrawing(450;​250)

2

OpenChart(60;​35;​350;​160;​on)

3

ChartData(72 90 76 61 48 38 57 86 84 63 84 48)

4

BarChart(label)

5

BorderStyle(all;​none)

6

FillStyle(1;​1 40 0 0.0 249 202 118 255 1.0 56 45 25 255)

7

LabelStyle(all;​Verdana;​9;​bold;​200 200 200)

8

AxisMajorTickLabelTexts(x;​"Jan";​"Feb";​"Mar";​"Apr";​"May";​"Jun";​"Jul";​"Aug";​"Sep";​"Oct";​"Nov";​"Dec")

9

AxisMajorTickLabelStyle(x;​Verdana;​10;​bold;​200 200 200;​right;​-45)

10

AxisMajorTickLabelStyle(y;​Verdana;​10;​bold;​200 200 200)

11

AxisMajorTickLabelOptions(x;​;​;​3)

12

AxisLine(all;​0) /* Hide axis lines. */

13

AxisMajorTicks(x;​0) /* Hide x-axis tick marks. */

14

AxisMajorTicks(y;​8;​1;​gray;​;​out)

15

MajorGridLineWidths(all;​all;​0) /* Hide grid lines. */

16

GridFrame(xy;​1;​gray)

17

ChartBackground(;​1 -30 1 0.0 25 39 67 255 0.65 78 97 130 255 1.0 21 36 68 255;​;​0)

18

CloseChart()

19

Background(1 30 1 0.0 25 39 67 255 0.35 78 97 130 255 1.0 21 36 68 255;​;​0)

20

CloseDrawing()

EXAMPLE_07
See Also

Radial Gradients

2 cx cy offset1 r1 g1 b1 a1 offset2 r2 g2 b2 a2 ...

For radial gradients the first value of the list is always 2. The second and third value represent the center point in relative coordinates in respect to the bounding box. For example, the center of the bounding box is defined by cx=0.5 and cy=0.5. These three values follows a series of color stops. A color stop is represented by five elements: offset, red, green, blue and alpha. Offsets are between 0 and 1, the four RGBA components are between 0 and 255. Color names and RGB hexcodes are not supported in combination with color gradients.

Examples
EXAMPLE_08
1

OpenDrawing(300;​100)

2

AddOval(10;​10;​280;​80;​

3

2 0.5 0.5

4

0.0 255 0 0 255 /* Red */

5

0.5 255 255 0 255 /* Yellow */

6

1.0 0 0 255 255) /* Blue */

7

CloseDrawing()

EXAMPLE_08
EXAMPLE_09
1

OpenDrawing(310;​60)

2

AddOval( 10;​10;​40;​40;​2 0.8 0.8 0.1 223 176 173 255 0.7 161 42 37 255) /* Red */

3

AddOval( 60;​10;​40;​40;​2 0.8 0.8 0.1 150 207 121 255 0.7 28 92 0 255) /* Green */

4

AddOval(110;​10;​40;​40;​2 0.8 0.8 0.1 187 191 251 255 0.7 34 56 148 255) /* Blue */

5

AddOval(160;​10;​40;​40;​2 0.8 0.8 0.1 223 183 251 255 0.7 103 41 149 255) /* Purple */

6

AddOval(210;​10;​40;​40;​2 0.8 0.8 0.1 247 208 143 255 0.7 115 73 0 255) /* Gold */

7

AddOval(260;​10;​40;​40;​2 0.8 0.8 0.1 211 211 211 255 0.7 46 46 46 255) /* Silver */

8

CloseDrawing()

EXAMPLE_09
EXAMPLE_10
1

OpenDrawing(350;​200)

2

ChartData( 5 5 5 5 5;​ /* 1st series: y-values.  */

3

6 12 18 24 30;​ /* 1st series: diameters. */

4

15 15 15 15 15;​ /* 2nd series: y-values.  */

5

30 24 18 12 6;​ /* 2nd series: diameters. */

6

25 25 25 25 25;​ /* 3rd series: y-values.  */

7

6 12 18 24 30) /* 3rd series: diameters. */

8

BubbleChart(;​on)

9

BubbleChartOptions(35) /* After BubbleChart() */

10

FillStyle(1;​2 0.7 0.3 0.0 255 100 100 255 1.0 120 0 0 255) /* Red */

11

FillStyle(2;​2 0.7 0.3 0.0 100 220 100 255 1.0 0 100 0 255) /* Green */

12

FillStyle(3;​2 0.7 0.3 0.0 120 120 255 255 1.0 0 0 120 255) /* Blue */

13

BorderStyle(all;​none) /* Hide borders. */

14

GridLocation(all;​none) /* Hide grid. */

15

AxisMajorTicks(all;​8;​;​;​;​out)

16

CloseDrawing()

EXAMPLE_10
EXAMPLE_11
1

OpenDrawing(360;​200)

2

OpenChart(30;​25;​300;​150;​on)

3

ChartData(94 71 50 32 73 65 75 58 51 45 33 69)

4

RadarChart(oval+label;​;​;​on)

5

RadarChartOptions(0;​oval;​0;​0;​20;​0) /* After RadarChart() */

6

FillStyle(1;​2 0.5 0.5 0.0 250 250 0 255 1.0 250 100 42 255)

7

BorderStyle(1;​;​3;​245 183 103)

8

LabelOptions(all;​centerCenter;​12)

9

LabelStyle(all;​Verdana;​9;​bold;​white)

10

AxisOptions(all;​none) /* Hide axes. */

11

Scaling(x;​linear;​20;​100;​4)

12

MajorGridLineColors(2;​1;​255 255 255 200)

13

MajorGridLineColors(1;​2;​255 255 255 100)

14

MajorGridLineWidths(2;​1;​5;​0.5;​0.5;​0.5;​5)

15

GridLocation(xy;​front)

16

CloseChart()

17

Background(1 30 1 0.0 0 24 42 255 0.65 0 44 77 255 1.0 0 24 42 255;​;​0)

18

CloseDrawing()

EXAMPLE_11
EXAMPLE_12
1

OpenDrawing(240;​150)

2

OpenChart(20;​20;​200;​120;​on)

3

ChartData(1)

4

PieChart(oval;​12;​0;​-130;​270)

5

BorderStyle(all;​none)

6

FillStyle(1;​2 0.5 0.5

7

0.1 155 55 255 255 /* Purple */

8

0.77 55 155 155 255

9

0.80 250 200 0 255 /* Yellow */

10

0.83 55 155 155 255

11

1.0 100 200 200 255) /* Green */

12

CloseChart()

13

CloseDrawing()

EXAMPLE_12
See Also
Scroll to Top