Color Schemes
Color schemes can be applied to borders, fills, lines, symbols and the nodes of Sankey diagrams. The following four color scheme functions are available:
The color scheme is defined by the 1st argument schemeIndex. The color scheme classic (schemeIndex = 0) is for compatibility with older xmCHART versions. The FileMaker color schemes can be referenced by schemeIndex 1 to 20. By using the 2nd argument colorVariant, it is possible to choose between the default appearance solid and shaded. For example:
FillColorScheme(earth;solid) /* Same as line above. */
FillColorScheme(earth;shaded)
LineColorScheme() /* Same as line above. */
In addition, the transparency of the colors can be controlled by using the 3rd argument opacity. The opacity can be set between 0 (fully transparent) and 1 (completely opaque) — default is 1. For example:
FillColorScheme(earth;shaded;0.5)
LineColorScheme(3;;0.15)
Move cursor over the swatches below to see the RGB hexcode for each swatch in a tooltip. Double-click on the swatch to copy the RGB hexcode to the clipboard.
| Constant | Color Scheme | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 0 | classic | #ff3100 | #0003de | #ffff00 | #ce9c00 | #525252 | #000052 | #9cffff | #00ef00 | |
| 1 | beige | #3d7698 | #bbd0df | #a5ac74 | #d49147 | #797baa | #e4c881 | #c35b25 | #95b9c4 | |
| 2 | saturated | #db6318 | #00a8aa | #6e125a | #0071bd | #616f02 | #00446f | #af1501 | #006837 | |
| 3 | primaryBasics | #3879aa | #fdb910 | #00a652 | #f68b1e | #662d91 | #84bad2 | #ed2125 | #cbdb29 | |
| 4 | earth | #909a3f | #bd9d7d | #4e7e99 | #caa465 | #8e8e8e | #7a7841 | #dac582 | #4d7d98 | |
| 5 | jewels | #214295 | #0f8249 | #c1272d | #6b3d98 | #26abe2 | #8cc63f | #8d4f1e | #f15a24 | |
| 6 | pastels | #a5baa0 | #f3df9a | #79a2c6 | #bf9cc3 | #faa352 | #9dc7d2 | #e4aebc | #84c4bc | |
| 7 | desert | #77a76e | #ffca5f | #465137 | #989f83 | #eed09d | #a35c35 | #71726c | #bb882d | |
| 8 | gray | #191919 | #9b9b9b | #505050 | #cdcdcd | #828282 | #323232 | #afafaf | #e1e1e1 | |
| 9 | brown | #a58b5c | #6a4c32 | #c5a764 | #89472b | #9b6b17 | #9c824b | #4f402c | #805d33 | |
| 10 | red | #f54c2b | #a6070a | #f97d55 | #ce4f3d | #e8161b | #f55434 | #891f15 | #ca0d00 | |
| 11 | orange | #ffb730 | #b75900 | #ffd65f | #e1a037 | #ff7d09 | #ffb610 | #f1e000 | #d47700 | |
| 12 | purple | #b87fd2 | #890175 | #8922b4 | #5a0162 | #e1a2db | #c002a0 | #735bba | #d2bee4 | |
| 13 | blue | #005ca9 | #9cccf0 | #00afef | #0f3284 | #3d92de | #333bb6 | #a2e4f9 | #2a79b5 | |
| 14 | green | #43cd7f | #297f29 | #a5e6a5 | #49a549 | #50662e | #38e238 | #d9ed9f | #7ea248 | |
| 15 | rainbow | #d40019 | #eb6d00 | #f1cb00 | #cdea03 | #82c900 | #17b100 | #00a7a6 | #0073a7 | |
| 16 | rainbow2 | #97621e | #e29235 | #ccdf17 | #82b071 | #669073 | #49c7e1 | #84bedc | #bacce1 | |
| 17 | purpleBlue | #ee4699 | #c9198e | #932f82 | #5d3484 | #564d8f | #105896 | #0082b2 | #00a5cd | |
| 18 | plumTree | #b0e44f | #a3be22 | #8c8c34 | #704732 | #8b5152 | #7f1760 | #a70a96 | #c41abc | |
| 19 | copper | #e8b974 | #dea43d | #bb7a00 | #a27400 | #988a00 | #5c8b3d | #307830 | #1d9280 | |
| 20 | seaGlass | #006699 | #087fa1 | #3f9187 | #58976f | #6da04f | #96b05f | #b8ba44 | #e4c82d | |
Examples
| | EXAMPLE_01 |
| 1 | OpenDrawing(320;180) |
| 2 | |
| 3 | ChartData( 3 4 10 7 13; |
| 4 | 18 14 17 22 20; |
| 5 | 25 29 26 27 34) |
| 6 | |
| 7 | |
| 8 | |
| 9 | |
| 10 | AxisMajorTicks(all;0) /* Hide tick marks. */ |
| 11 | MajorGridLineColors(all;all;230 230 230) |
| 12 | |
| 13 |
| | EXAMPLE_02 |
| 1 | OpenDrawing(300;260) |
| 2 | |
| 3 | ChartDataOptions(xyxy) /* Before ChartData() function. */ |
| 4 | ChartData( 3 18 25; |
| 5 | 17 22 20; |
| 6 | 26 27 34; |
| 7 | 13 8 21) |
| 8 | |
| 9 | |
| 10 | |
| 11 | BorderStyle(all;none) /* Hide borders. */ |
| 12 | ScalingOptions(y;on) /* Reverse y-axis. */ |
| 13 | AxisMajorTickLabelTexts(y;"A";"B";"C";"D") |
| 14 | AxisOptions(x;;1) /* Move x-axis from bottom to top. */ |
| 15 | |
| 16 | AxisMajorTicks(all;0) /* Hide tick marks. */ |
| 17 | MajorGridLineWidths(x;y;0) /* Hide horizontal grid lines. */ |
| 18 | MajorGridLineColors(y;x;230 230 230) |
| 19 | |
| 20 |
| | EXAMPLE_03 |
| 1 | OpenDrawing(200;200) |
| 2 | |
| 3 | ChartData(35 18) |
| 4 | PieChart() |
| 5 | PieChartExplodes(18;1) |
| 6 | PieChartInnerLabelTexts("|u|") |
| 7 | PieChartInnerLabelStyle(Verdana;24;bold;white) |
| 8 | PieChartLabelOptions(on;;15) /* Fine-tune label positions. */ |
| 9 | |
| 10 | BorderStyle(1;;6;0 170 170;shaded) |
| 11 | BorderStyle(2;none) |
| 12 | |
| 13 |
| | EXAMPLE_04 |
| 1 | OpenDrawing(300;250) |
| 2 | |
| 3 | ChartData(35 18 5 3 2) |
| 4 | |
| 5 | PieChartAuxLines(20;;;0.25) |
| 6 | |
| 7 | BorderStyle(all;;0.25;0 0 0 40) |
| 8 | |
| 9 |
Custom Color Scheme
In xmCHART 5 a custom color scheme can be defined by adding a list of colors as the first argument in one of the following color scheme functions:
Colors can be entered as red, green and blue components between 0 and 255 or as hexadecimal RGB color code (#rrggbb) – always without an alpha value.
For more on this topic, see for example: W3Schools Color Schemes
Example
| | EXAMPLE_05 |
| 1 | OpenDrawing(150;140) |
| 2 | |
| 3 | ChartData(35 18 5 3) |
| 4 | |
| 5 | FillColorScheme(#3b3933 #967e67 #a3a092 #e2e1da #5a6a75 #607e65;shaded) |
| 6 | |
| 7 | |
| 8 |
Combine Color Scheme with Style Function
The color scheme functions can be customized by using the corresponding style functions:
Examples
| | EXAMPLE_06 |
| 1 | OpenDrawing(320;180) |
| 2 | |
| 3 | ChartData( 3 4 8 17 13; |
| 4 | 18 14 17 25 24; |
| 5 | 35 26 26 37 33) |
| 6 | |
| 7 | LineColorScheme(3) /* Before LineStyle() function. */ |
| 8 | SymbolColorScheme(3) /* Before SymbolStyle() function. */ |
| 9 | |
| 10 | |
| 11 | |
| 12 | SymbolStyle(1;circle;8;1.5;;;#fafbfe) |
| 13 | SymbolStyle(2;diamondHalfRight;9;;;;#fafbfe) |
| 14 | SymbolStyle(3;spokes4;8;2) |
| 15 | |
| 16 | AxisMajorTicks(all;0) /* Hide tick marks. */ |
| 17 | MajorGridLineColors(all;all;230 230 230) |
| 18 | |
| 19 |
| | EXAMPLE_07 |
| 1 | OpenDrawing(300;260) |
| 2 | |
| 3 | ChartDataOptions(xyxy) /* Before ChartData() function. */ |
| 4 | ChartData(13 18 26; |
| 5 | 17 22 30; |
| 6 | 26 29 32; |
| 7 | 13 18 22) |
| 8 | |
| 9 | FillColorScheme(1;shaded;0.7) /* Before FillStyle() function. */ |
| 10 | FillStyle(3;1 110 1 0.0 240 240 240 150 1.0 200 200 200 150) |
| 11 | BorderStyle(all;none) /* Hide borders. */ |
| 12 | LabelTexts(3;"(|u|)") |
| 13 | LabelStyle(3;;;;#888) |
| 14 | |
| 15 | AxisMajorTickLabelTexts(x;"A";"B";"C";"D") |
| 16 | |
| 17 | AxisMajorTicks(all;0) /* Hide tick marks. */ |
| 18 | MajorGridLineWidths(y;x;0) /* Hide vertical grid lines. */ |
| 19 | MajorGridLineColors(x;y;230 230 230) |
| 20 | |
| 21 |
